Vue-cli + json-server 创建测试api

参考目录

json-sercer地址：GitHub
Vue ：Vue

ps:

在写demo的时候需要用到一些动态数据，然后想到用json写api,于是花了几个小时的时间，研究了下网上的案例。最终改造成自己项目的demo。。。

json server 工具:
在后台还没给接口之前，使用JSON-Server搭建一台JSON服务器，将接口要返回的数据放在json文件里面。然后请求这些数据，这样我们可以先做一些东西，等后台接口好了之后直接替换就可以了，不必一直傻傻的等后端的接口。

install

npm install json-server --save  // json server
npm install axios --save  // 使用axios发送请求

db.json

创建一个json文件，起名叫db.json，文件放置在 api目录中，db.json文件里面的内容，是一个对象。

{
  "gradelist": [
  {
    "grade": "初一",
    "isshow": false,
    "classlist": ["1班", "2班", "3班"]

  },
  {
    "grade": "初二",
    "isshow": false,
    "classlist": ["1班", "2班", "3班"]
  },
  {
    "grade": "初三",
    "isshow": false,
    "classlist": ["1班", "2班", "3班"]
  },
  {
    "grade": "高一",
    "isshow": false,
    "classlist": ["1班", "2班", "3班"]
  },
  {
    "grade": "高二",
    "isshow": false,
    "classlist": ["1班", "2班", "3班"]
  },
  {
    "grade": "高三",
   "isshow": false,
    "classlist": ["1班", "2班", "3班"]
  }],

  "studentList": [
  {
    "id": 12345678901,
    "name": "司马诸葛"
  },
  {
    "id": 12345678901,
    "name": "司马诸葛"
  },
  {
    "id": 12345678901,
    "name": "司马诸葛"
  },
  {
    "id": 12345678901,
    "name": "司马诸葛"
  },
  {
    "id": 12345678901,
    "name": "司马诸葛"
  },
  {
    "id": 12345678901,
    "name": "司马诸葛"
  },
  {
    "id": 12345678901,
    "name": "司马诸葛"
  },
  {
    "id": 12345678901,
    "name": "司马诸葛"
  }]
}

server.js

创建一个js文件，起名叫 server.js，文件放置在 api目录中，server.js文件写入：

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('./db.json')
const middlewares = jsonServer.defaults()

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares)

// Add custom routes before JSON Server router
server.get('/echo', (req, res) => {
  res.jsonp(req.query)
})

// To handle POST, PUT and PATCH you need to use a body-parser
// You can use the one used by JSON Server
server.use(jsonServer.bodyParser)
server.use((req, res, next) => {
  if (req.method === 'POST') {
    req.body.createdAt = Date.now()
  }
  // Continue to JSON Server router
  next()
})

// Use default router
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})

参考：json-server

请求接口代理

config 文件夹下 index.js 文件中插入

proxyTable: {
  '/api': {
    // 通过本地服务器将你的请求转发到这个地址(使用8080端口 代理 3000端口)
    target: 'http://localhost:8080/',  
    changeOrigin: true,  // 设置这个参数可以避免跨域
    pathRewrite: {
      '/api': '/'
    }
  },
},

如下图所示：

项目名/config/index.js

npm run dev 启动项目 + node server.js 启动 api 服务器 ,访问你的json文件：

启动 api 服务器，端口默认3000

ps: 启动项目和启动 api 要打开两个命令行~

现在服务器已经成功启动，在地址栏输入 localhost:8080\api\gradelist，就可以看到的json文件，加上相应后缀即可访问文件里面的数据。

gradelist 数据

axios请求json数据：

光看到这些数据可不行，我们还需要发起请求，请求到这些数据。

.vue 组件中使用axios
如下图所示：

import Axios

Axios 发起get请求

结果