模拟数据(前端mock,JSON-Server)

前端mock

目的：体验前端mock接口数据

1）安装

yarn add axios mockjs

2）发送请求 App.vue

import axios from "axios";
export default {
  name: "App",
  setup() {
    axios
      .get("/list")
      .then((data) => {
        console.log(data);
      })
      .catch((e) => {
        console.log(e);
      });
  },
};

3）mock数据 mock/index.js

import Mock from "mockjs";

Mock.mock("/list", () => {
  const list = [];
  for (let i = 0; i < 10; i++) {
    list.push({
      id: Mock.mock('@id'),
      name: Mock.mock('@cname'),
      age: Mock.mock('@integer(20,30)'),
      city: Mock.mock('@city(true)'),
      picture: Mock.mock('@image')
    });
  }
  return {
    message: "获取数据成功",
    result: list,
  };
});

4）使用mock main.js

import './mock'

总结：

• 前期开发后台接口没更上，可以先mock数据，开发完毕注释导入的mock文件即可。

使用JSON-Server搭建JSON服务器

一、安装

npm install --save json-server

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

二、提供json数据文件。

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

三、配置json-server

在build\webpack下配置，如果是用旧版本的手脚架工具初始化的项目，是在build/dev-server.js下配置。

/*引入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' : '' //后面可以使重写的新路径，一般不做更改
    }
  }

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

在浏览器输入地址：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)
  })