Vue-cli 使用json server在本地模拟请求数据的示例代码

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

//json-server 假数据
var jsonServer = require('json-server') //引入文件
var apiServer = jsonServer.create(); //创建服务器
var apiRouter = jsonServer.router('db.json') //引入json 文件 ，这里的地址就是你json文件的地址
var middlewares = jsonServer.defaults(); //返回JSON服务器使用的中间件。
apiServer.use(middlewares)
apiServer.use('/json',apiRouter)
apiServer.listen( port + 1,function(){ //json服务器端口:比如你使用8080,这里的json服务器就是8081端口
 console.log('JSON Server is running') //json server成功运行会在git bash里面打印出'JSON Server is running'
})

proxyTable: {
 '/api': {
  target: 'http://localhost:8081/', // 通过本地服务器将你的请求转发到这个地址
  changeOrigin: true, // 设置这个参数可以避免跨域
  pathRewrite: {
   '/api': '/'
  }
 },
},

import axios from 'axios';//引入文件
Vue.prototype.$ajax = axios;//将axios挂载到Vue实例中的$ajax上面,在项目中的任何位置通过this.$ajax使用

  this.$ajax({
    url:'/api/articles',//api 代理到json文件地址，后面的后缀是文件中的对象或者是数组
    method:'get',//请求方式
    //这里可以添加axios文档中的各种配置
   }).then(function (res) {
    console.log(res,'成功');
   }).catch(function (err) {
    console.log(err,'错误');
   })
//还可以像下面这么简写
 this.$ajax.get('api/publishContent').then((res) => {
  console.log(res,'请求成功')
 },(err)=>{
  console.log(err,'请求失败');
 });