Vue使用json-server快速“伪造”后台接口

JSON-Server主要的作用是搭建一台JSON服务器，测试一些业务逻辑。

一、安装

npm install --save json-server

前提是已经安装好了node环境，并且初始化好了项目。

二、提供json数据文件。

在项目根目录下，新建一个 JSON 文件db.json。

三、配置json-server

在build\webpack.dev.conf.js下配置，如果是用旧版本的手脚架工具初始化的项目，是在build/dev-server.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')

})

四、访问数据

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

五、设置代理

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

/*代理配置表，在这里可以配置特定的请求代理到对应的API接口*/

/* 下面的例子将代理请求 /api/getNewsList  到 http://localhost:3000/getNewsList*/

proxyTable: {

  '/api': {

    changeOrigin: true,// 如果接口跨域，需要进行这个参数配置

    target: 'http://localhost:3000',// 接口的域名

    pathRewrite: {

      '^/api': ''//后面可以使重写的新路径，一般不做更改

    }

  }

具体设置代理的方法，参见：Vue-接口跨域请求调试proxyTable

六、最后验证一下代理是否成功

在浏览器输入地址：http://localhost:8080/api。

七、使用

　　使用vue-resouce发送Ajax获取数据。

this.$http.get('/api/getNewsList')//代替http://localhost:3000/getNewsList

  .then((res) => {

    this.newsList = res.data

  }, (err) => {

    console.log(err)

  })