vue + json-server

1.安装json-server

npm i json-server -g

2.在package.json同级目录新建db.json文件，写上伪数据

{
    "department": [
      {
        "id": 1,
        "name": "教务部gsf",
        "describe": "负责教学的一切相关工作gs",
        "person": "小苗1gs",
        "view": "张三2gsf"
      },
      {
        "id": 2,
        "name": "教务部",
        "describe": "负责教学的一切相关工作",
        "person": "小苗2",
        "view": "张三2"
      },
      {
        "name": "教务部",
        "describe": "负责教学的一切相关工作",
        "person": "小苗3",
        "view": "张三2"
      }
    ],
    "workers": [
      {
        "name": "张三1",
        "sex": "男",
        "department": "教务部",
        "job": "教师",
        "phone": "1234567",
        "num": "123",
        "email": "534047909@qq.com",
        "birth": "1992.09.08"
      },
      {
        "name": "张三2",
        "sex": "男",
        "department": "教务部",
        "job": "教师",
        "phone": "1234567",
        "num": "123",
        "email": "534047909@qq.com",
        "birth": "1992.09.08"
      },
      {
        "name": "张三3",
        "sex": "男",
        "department": "教务部",
        "job": "教师",
        "phone": "1234567",
        "num": "123",
        "email": "534047909@qq.com",
        "birth": "1992.09.08"
      }
    ]
  }

3.配置json-server  (在build\webpack.dev.conf.js下配置)

/*----------------jsonServer---------*/
/*引入json-server*/
const jsonServer = require('json-server')
/*搭建一个server*/
const apiServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
/*监听端口*/
apiServer.listen(3000, () => {
  console.log('JSON Server is running')
})

4.访问数据

npm dev run 重启项目，然后再地址栏输入http://localhost:3000 就可以访问到数据。

5.设置代理

最后做一下浏览器代理设置，在 config/index.js中：

/*代理配置表，在这里可以配置特定的请求代理到对应的API接口*/
/* 下面的例子将代理请求 /api/getNewsList  到 http://localhost:3000/getNewsList*/
proxyTable: {
  '/api': {
    changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
    target: 'http://localhost:3000',// 接口的域名
    pathRewrite: {
      '^/api': ''//后面可以使重写的新路径，一般不做更改
    }
  }

6.验证代理是否成功

在浏览器输入地址：http://localhost:8080/api 页面显示正常

7.请求数据

$.ajax({ 
      type: "get",
      url: "http://localhost:3000/workers",
      dataType: "json",
      success: function(data){
        console.log(data)
      }    
    })

注意：开两个端口

1.json-server db.json -p 3000

2.npm run dev

来源参考：https://www.cnblogs.com/superlizhao/p/8618221.html