是什么

一种用于 API 的查询语言；它与特定技术无关，你可以用任何语言实现它

简单理解，他能提供一个接口，让我们来调用，只是返回的数据格式更多是由我们前端来控制

为什么

官网：https://graphql.cn/

1.请求你所要的数据 不多不少

2.获取多个资源只用一个请求

3.描述所有的可能类型系统

怎么样

演示一下

步骤一：

创建工程目录 demo

初始化项目，以及引入所需的包

npm init -f

npm install graphql express express-graphql --save

npm install babel-cli babel-preset-es2015 --save-dev

npm install -g nodemon

步骤二：

在项目根目录下创建 data 目录，并在该目录下创建 data.json 文件，并输入以下内容：

{    "1": {        "id": "1",        "name": "宁缺",        "age":20    },    "2": {        "id": "2",        "name": "光明之子",        "age":25    },   "3": {        "id": "3",        "name": "冥王之子",        "age":35    }
}

步骤三：

创建 server.js 文件，并输入以下内容：

import express from 'express'const app = express()
const port = 3000app.get('/', (req, res) => {res.send('Hello!');});let server = app.listen(port, function () {let addr = server.address();let bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port;console.log('Listening on ' + bind);});

命令行运行：nodemon --exec babel-node --presets=es2015 server.js，浏览器输入：http://localhost:3000 。显示 Hello!，说明你的 express 服务已经 OK 了。

步骤四：

创建文件夹 /src/schema，并创建文件 index.js。并在 index.js 文件中编写GraphQL Schema。Schema 是 GraphQL 请求的入口，用户请求的GraphQL 将会对应到具体的 Schema。

import {GraphQLObjectType,GraphQLSchema,GraphQLString,GraphQLInt
} from 'graphql'// 我们要用的模拟数据
const data = require('../../data/data.json')const User = new GraphQLObjectType({name: 'User',description: 'User对象',fields: {id: {type: GraphQLInt},name: {type: GraphQLString},}});const Query = new GraphQLObjectType({name: 'Query',fields: {user: {type: User,args: {id: {type: GraphQLInt}},resolve: function (_, args) {return data[args.id];}}}});const Schema = new GraphQLSchema({query: Query
});export default Schema;

步骤五：

修改 server.js 文件，连接 schema。将 server.js 文件修改为以下内容：

import express from 'express'
import Schema from './src/schema'
import graphqlHTTP from 'express-graphql'const app = express()
const port = 3000app.use('/', graphqlHTTP({schema: Schema,graphiql: true}));let server = app.listen(port, function () {var addr = server.address();var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port;console.log('Listening on ' + bind);});

这时，在浏览器中可以查看到如下界面

我们还可以用postman去请求

更多学习视频学习资料请参考：B站搜索“我们一起学前端”