从零开始学习Vue - json-server 入门基础

1. json-server 入门基础

1.1 安装 json-server

• 参考文档 :
  • json-server 详解
  • json-server官方文档
• 执行 npm install -g json-server 安装 json-server
• 注意: json-server 是严格遵守 restful 规范的

1.2 使用 json-server

• 创建 db.json 文件

  {
    "user": [
      {
        "id": 1,
        "title": "json-server",
        "author": "knightzz"
      }
    ]
  }
  
  

• 执行 json-server --watch --port 3303 --host 127.0.0.1 db.json 命令即可启动

  $ json-server --watch --port 3303 --host 127.0.0.1 db.json
  
    \{^_^}/ hi!
  
    Loading db.json
    Done
  
    Resources
    http://127.0.0.1:3303/user
  
    Home
    http://127.0.0.1:3303
  
    Type s + enter at any time to create a snapshot of the database
    Watching...
  
  

• 然后我们输入 http://127.0.0.1:3303/user 即可访问到

1.3 结合 mockjs

• 我们可以使用 mockjs 生成的数据作为数据源

  // 用mockjs模拟生成数据
  var Mock = require('mockjs');
  
  module.exports = () => {
    // 使用 Mock
    var data = Mock.mock({
      'course|227': [
        {
          // 属性 id 是一个自增数，起始值为 1，每次增 1
          'id|+1': 1000,
          course_name: '@ctitle(5,10)',
          autor: '@cname',
          college: '@ctitle(6)',
          'category_Id|1-6': 1
        }
      ],
      'course_category|6': [
        {
          "id|+1": 1,
          "pid": -1,
          cName: '@ctitle(4)'
        }
      ]
    });
    // 返回的data会作为json-server的数据
    return data;
  };
  

• 使用下面的命令即可

  json-server --watch --port 3303 --host 127.0.0.1 mock-data.js
  

1.4 自定义路由

1.4.1 基本概述

• 因为 json-server 是严格支持 restful 规范的, 所以默认实现了 restful

• 例如 :

  GET    /posts
  GET    /posts/1
  POST   /posts
  PUT    /posts/1
  PATCH  /posts/1
  DELETE /posts/1
  

• 举个例子

• db.json

  {
    "user": [
      {
        "id": 1,
        "title": "json-server1",
        "author": "knightzz1"
      },
      {
        "id": 2,
        "title": "json-server2",
        "author": "knightzz2"
      }
    ],
    "login": {
        "msg": "请求成功",
        "code": "100",
        "info": {
          "result": "fail"
        }
    }
  }
  

• 我们可以通过访问 http://127.0.0.1:3303/user/1 获取 id 为1的数据

1.4.2 自定义路由

• 虽然json-server给我们提供了restful api, 但是不能满足我们所有的需求, 所以我们需要自己定义

• 新建 json-server.json 这个文件里面可以填写相关配置, 名字不要改, 默认识别这个文件名

  {
      "port": 3303,
      "watch": true,
      "read-only": false,
      "no-cors": false,
      "no-gzip": false,
      "routes": "routes.json"
  }
  

• "routes": "routes.json" 指定路由文件

• 新建 routes.json , 左边是非 restful api 风格的请求, 右边是restful api 的请求路径

  {
      "/login/auth": "/login"
   }
  

• /login/auth 是我们在浏览器中访问的路径, /login 是实际映射的路径, 也就是对应 db.json 中的数据

• 如下图所示 :