vue项目使用mock数据的几种方式

以下讲解基于vuecli3.0创建的项目

首先我们来说一说vue/cli 3.0 与 2.0 的一些不同：

1. 3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源，静态数据（如json数据、图片等）需要存放在这里。
2. 3.0 移除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建 vue.config.js 进行配置即可。

方式一：借助mockjs插件实现本地mock数据

1.安装插件：npm i mockjs -D；

2.在src目录下创建一个mock文件夹，在mock文件夹下创建一个index.js和一个json文件夹（用于存放项目需要的模拟数据），如下图所示：

3.mock目录下的index.js示例如下：

const Mock = require('mockjs');

//格式： Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/index/foodlist', 'get', require('./json/foodlist.json'));

Mock.mock('/index/foodlist2', 'post', require('./json/foodlist2.json'));

4.json文件夹下的json数据示例如下：

{
    "code": 200,
    "list": [
        {
            "imgSrc": "https://timgsa.baidu.com/timg?C2880.jpg%3Fmode%3Ddownload",
            "name": "老弄堂1",
            "term": "起送￥15 免配送费"
        },
        {
            "imgSrc": "https://timgsa.baidu.com/timg?2C2880.jpg%3Fmode%3Ddownload",
            "name": "老弄堂2",
            "term": "起送￥15 免配送费"
        }
    ]
}

5.在main.js入口文件中引入mock数据，不需要时，则注释掉。

import Vue from 'vue';
import App from './App';
import router from './router';
 
require('./mock'); //引入mock数据，关闭则注释该行
 
Vue.config.productionTip = false;
 
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
});

6.最后，在vue模板中使用即可

axios.get('/user/userInfo')
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

方式二：在public文件夹放mock数据（无需使用mockjs插件）

1.在public文件夹下创建一个mock文件夹，在mock文件夹里创建项目需要的json文件，目录结构如下：

2.在vue.config.js里进行路径配置，如下：

3.最后，在vue模板中使用即可

// 模拟请求本地mock数据（不基于插件）
    this.$http.get('/api/foods.json').then(function(res){
      let list = res.data.list;
      console.log(list);
      that.businessList = res.data.list;
    })

注：但是本方式貌似只能使用get请求方式，不支持post等其它方式，具体还需再研究下。

方式三：前端本地启动一个nodejs服务，vue项目向nodejs服务请求mock数据

1.创建一个node项目（为了方便，本例直接在vue项目根目录创建，当然也可以是其它任何地方）

2.serve.js示例如下：

const http = require('http');
// url模块用于处理与解析 前端传给后台的URL，适用于get请求（不适用于post请求），详情参见文档
const urlLib = require('url');

http.createServer(function(req, res){
    let urlObj = urlLib.parse(req.url, true);  // 注意：这里的第二个参数一定要设置为：true, query才能解析为对象形式,可以更加方便地获取key:value
    let url = urlObj.pathname;
    let get = urlObj.query;
    console.log(url);
    // 模拟的mock数据
    let data = {
        "code": 200,
        "list": [
            {
                "imgSrc": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1126716551,3134048915&fm=26&gp=0.jpg",
                "name": "老弄堂1",
                "term": "起送￥15 免配送费"
            },
            {
                "imgSrc": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582134004436&di=eee2d024a136e950daa694f56ea78a2d&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F12%2F05%2F56db465e153a5d808b54501846e88dca.jpg",
                "name": "老弄堂2",
                "term": "起送￥15 免配送费"
            }
        ]
    }

    // console.log(get.user);
    if(url === "/food") {  // 美食列表接口
        res.write(JSON.stringify(data));
    }
    res.end();
}).listen(9000); 

启动node服务：node serve

3.配置vue.config.js的proxy，解决跨域

注意：这里配置的端口号不要和node的端口一样，否则会报端口号被占用

3.最后，在vue模板中使用即可

// 模拟请求本地node服务
    this.$http.get('/api/food').then(function(res){
      let list = res.data.list;
      console.log(list);
      that.businessList = res.data.list;
    })

总结：以上介绍了三种使用mock数据的方式，方便前端开发在本地开发环境下开发项目，使前后端分离，加快了开发效率，个人建议使用方式一（使用方便、灵活）。