从简单开始

简介

从客户端使用 GraphQL API 并不需要复杂的框架或大量工具。一个普通的 JavaScript 脚本就足够了。我们将从构建最简单的 JavaScript 项目开始，以演示如何配置一个基础的客户端。这个项目将与 PlateSlate 的 Phoenix 应用程序分开独立设置。

前端所需依赖

前端所需的依赖如下：

1. npm
2. yarn

注意： 所有内容均已为我们配置好。

我们为项目创建一个新的目录，进入该目录，并使用 yarn 生成一个基本的 package.json 文件来管理项目元数据和依赖项：

1npm install -g yarn
2mkdir plate-slate-basic-ui
3cd plate-slate-basic-ui
4yarn init -y

这里的 -y 选项表示默认回答所有问题为“是”（yes）。打开 package.json 文件后，可以看到 yarn 添加的基本模板内容：

1{
2"name": "plate-slate-basic-ui",
3"version": "1.0.0",
4"main": "index.js",
5"license": "MIT"
6}

目前内容还很少。我们稍后会继续向此文件添加内容。接下来，在项目中创建一个子目录，用于存放我们将要添加的 HTML 和 JavaScript 文件：

1mkdir public

在该目录中，创建一个基础的 HTML 文档。我们之后会进一步扩展它：

1<!doctype html>
2<html lang="en">
3<head>
4    <title>PlateSlate（基础界面）</title>
5</head>
6<body>
7你好。
8</body>
9</html>

目前，页面仅用于向访问者打招呼。当检查是否成功提供页面时，看到一些内容总比空白页面更友好。我们可以使用多种工具实现这一点。但既然我们已经使用 Node.js，那就配置一个轻量级静态服务器，通过本地端口提供 index.html 文件。

添加静态 Web 服务器

Node.js 项目中最常用的 Web 服务器工具包是 Express。配置它来提供静态资源目录非常简单。
首先，使用 yarn 将其作为开发依赖添加：

1yarn add express --dev

现在 Express 已可用，我们可以在 index.js 文件中编写配置代码。将其配置为在端口 3000 上提供 public/ 目录的内容：

1const express = require('express');
2const app = express();
3
4app.use(express.static('public'));
5app.listen(3000, () => console.log('正在监听端口 3000！'))

为了尽可能简化启动这个小服务器的过程，我们向 package.json 文件添加一个脚本条目：

1{
2"name": "plate-slate-basic-ui",
3"version": "1.0.0",
4"main": "index.js",
5"license": "MIT",
6"devDependencies": {
7   "express": "^4.16.2"
8},
9"scripts": {
10  "dev": "node ."
11}
12}

这样我们就可以通过运行 yarn dev 启动 Web 服务器：

1yarn dev
2正在监听端口 3000！

现在我们已成功搭建了一个基础的静态 Web 服务器，完全基于 Node.js。为了测试能否从我们的 GraphQL API 获取数据，我们希望获取菜单项列表并将其展示出来。