vue 模拟后台 vue mock数据 json-server

vue实现ajax获取后台数据是通过vue-resource，首先通过npm安装vue-resource，进入到项目目录里

npm install vue-resource --save

安装完成以后，将vue-resource引入到main.js文件中

import VueResource from 'vue-resource' // 导入vue-resource

使用VueResource

Vue.use(VueResource);

具体如下图：

上面步骤是用vue-resource来进行数据请求的大体流程，作为前端，我们只关注前端的开发，所以使用mock data来模拟后台穿传数据，主要有两种方式：

1）json-server模拟数据；此方法只能发送get请求不能发送post请求

2）express启动数据服务；get请求和post请求都可以发送

本文先介绍第一种方式：

在另一篇文章中介绍了第二种方法：https://blog.csdn.net/lxkll/article/details/84336846

使用json-server工具，可以虚构出后端接口对应的数据，然后在项目里发送特定的请求，就可以发请求拿到模拟的数据。

首先npm安装

npm install json-server --save

然后在build/webpack.dev.conf.js中进行配置

将一下代码片段加入到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')
})

配置完成以后，重新npm run dev 启动，浏览器输入localhost:3000，出现如下图，说明配置成功

现在还有一个问题，我们代码的服务端接口是8080，json-server的服务端端口是3000，由于浏览器的同源策略问题，这样请求会存在一个跨域问题，所以这里要做一个服务端代理的配置，配置config/index.js中找到proxyTable，并添加一下内容:

    // 配置转化：从3000 => 8080
    proxyTable: {
       '/api': {
             changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
             target: 'http://localhost:3000',// 接口的域名
             pathRewrite: {
               '^/api': ''//后面可以使重写的新路径，一般不做更改
             }
         }
    },

注意：配置好后，一定要npm run dev 重新启动项目

这样就可以在localhost:8080下访问接口了

如果db.json中加入了数据

则可以访问localhost:8080/api/getList 其中getList 是请求的数据名称

json-server配置就完成了。

vue 模拟后台 vue mock数据 json-server

猜你喜欢