安装jsonp-server

参考文章
用json-server结合mockjs“造数据”
是一个json接口服务，支持CORS和JSONP跨域请求,用node编写的，前端开发还是用这个吧。用php来做输出json的话好像也差不多，算了，学vue就好好用node的服务
一、初始化node环境

cnpm init

二、在package.json中配置脚本
安装完 nodemon 后，就可以用 nodemon 来代替 node 来启动应用,一般修改了一个文件，再要node运行的话，都是要重启，用nodemon就不用了。方便开发，比php牛逼好吧。

    "server": "cd static && nodemon server.js"

三、安装相关依赖

cnpm install json-server --save  //安装json-server服务
cnpm install nodemon --save  //安装nodemon，修改配置无需重启服务
cnpm install mockjs --save  //安装批量生成数据

参考文章上安装相关依赖是用–save-dev,我上面是save,下面是两者的区别

–save-dev 和 –save 的区别

我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，比如：

–save-dev 安装的 插件，被写入到 devDependencies 对象里面去

–save 安装的 插件 ，被写入到 dependencies 对象里面去

package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢？

devDependencies 里面的插件只用于开发环境，不用于生产环境
dependencies 是需要发布到生产环境的。
比如：

你用angularjs框架开发一个程序，开发阶段需要用到gulp来构建你的开发和本地运行环境。所以angularjs一定要放到dependencies里，因为以后程序到生产环境也要用。gulp则是你用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，所以放到dev里就ok了。

嗯我应譔用–save-dev的，这些东西在生产环境上用不上。哭。
四、创建项目目录

|--static  //静态数据方式
    |--config.js  //配置文件
    |--db.json   //静态数据文件
    |--server.js  //服务文件

config.js

module.exports = {
  SERVER:"127.0.0.1",  
  //定义端口号
  PORT: 3004,
  //定义数据文件
  DB_FILE:"db.json"
};

db.json

{
  "list":[
      {
        "id": 1,
        "name": "张三",
        "tel": "15223810923"
      },
      {
        "id": 2,
        "name": "李四",
        "tel": "15223810923"
      },
      {
        "id": 3,
        "name": "王二",
        "tel": "15223810923"
      }
    ],
  "list2": [
    {
      "name": "abcde",
      "tel": "123454323",
      "id": 5
    },
    {
      "id": 4,
      "name": "你好2121",
      "tel": "15223810923"
    }
  ]
}

server.js

const path = require('path');
const config = require('./config');
const jsonServer = require('json-server');

const ip = config.SERVER;
const port = config.PORT;
const db_file = config.DB_FILE;

const server = jsonServer.create();
//根据db.json文件自动生成路由规则
const router = jsonServer.router(path.join(__dirname, config.DB_FILE));
//中间件
const middlewares = jsonServer.defaults();

server.use(jsonServer.bodyParser);
server.use(middlewares);
//设置增加一个响应头信息“从server到前端”
server.use((req, res, next) => {
 res.header('X-Hello', 'World');
 next();
})
//数据发送到前端之前包一层
router.render = (req, res) => {
    res.jsonp({
        code: 0,
        body: res.locals.data//res.locals.data这个是真正的数据
    })
}
server.use("/api",router);//模拟api接口，就是访问api的时候给制定路由规则

server.use(router);
server.listen({
    host: ip,
    port: port,
}, function() {
    console.log(JSON.stringify(jsonServer));
    console.log(`JSON Server is running in http://${ip}:${port}`);
});

最后运行npm run start脚本

请求接口    请求方式    请求说明
http://localhost:3003/list/2    GET 查询id为2的数据
http://localhost:3003/list?tel=15223810923  GET 查询tel为15223810923的数据
http://localhost:3003/list?id=2&tel=15223810923 GET 查询id位2并且tel为15223810923的数据

接口路由是由db.json的规则来实现的
成功