mock在vue里怎么用

mock在vue里怎么用

https://github.com/nuysoft/Mock/wiki/Getting-Started
以上是官方文档，不知道mock是什么的自行查看

步骤1下载node.js 的npm 自行下载

	+ npm install -g cnpm --registry=https://registry.npm.taobao.org
     //npm的镜像
	+ npm install -g @vue/cli    //安装全局脚手架  
	    自己新建一个文件夹，并在文件夹中打开  powershell 
	+ vue create mypro(文件名可随意换)   //创建并下载一个文件夹
	+ npm install vue-router --save //启路由的插件
		--save 代表局部
	+ cd mypro
	+ npm run serve //运行 
	+ 用local 地址打开

在这里我发现在一个神奇的网站为防止网站找不到，所以我打算自己再写一遍
https://www.freesion.com/article/8564536346/

步骤1. 搭建测试项目

步骤1.1 创建项目

vue create mock-demo 

步骤1.2 安装依赖 （不懂请看上面）

vue环境搭建好后，开始安装 mock依赖

	//使用axios发送  ajax
	  	cnpm install axios --save
	//使用mockjs产生随机数据
	  	cnpm install mockjs --save-dev
	//使用json5解决json文件,无法添加注释问题
	  	cnpm install json5 --save-dev

步骤2.学习MOCKJS

新建mock文件夹,新建testMockjs.js

const Mock = require('mockjs');//mockjs 导入依赖模块
var id = Mock.mock('@id')//得到随机的id,字符串
console.log(Mock.mock('@id'), typeof id)

var obj = Mock.mock({
    id: "@id()",//得到随机的id,对象
    username: "@cname()",//随机生成中文名字
    date: "@date()",//随机生成日期
    avatar: "@image('200x200','red','#fff','avatar')",//生成图片,参数:size, background, foreground, text
    description: "@paragraph()",//描述
    ip: "@ip()",//IP地址
    email: "@email()"//email
})
console.log(obj)

步骤3.学习JSON5

json文件,中如果说存在注释文件和编辑器都会报错,我们采用json5格式来让json格式可以存在注释

报错截图:

步骤3.1 编辑器安装JSON5扩展

步骤3.2 引入JSON5库来解析JSON5格式

在mock文件夹下,新建testJSON5.js

const fs = require('fs');
const path = require('path');
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}
var json = getJsonFile('./userInfo.json5');
console.log('json', json) 

步骤4.MOCK和VUE-CLI结合

步骤4.1 新建INDEX.JS

在mock文件夹下,新建index.js

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}

//返回一个函数
module.exports = function(app){
    //监听http请求
    app.get('/user/userinfo', function (rep, res) {
        //每次响应请求时读取mock data的json文件
        //getJsonFile方法定义了如何读取json文件并解析成数据对象
        var json = getJsonFile('./userInfo.json5');
        //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
        res.json(Mock.mock(json));
    });
}

步骤4.2 新建VUE.CONFIG.JS

在项目根目录下,新建vue.config.js

module.exports = {
    devServer: {
        before: require('./mock/index.js')//引入mock/index.js
    }
}

步骤4.3 发送AJAX请求

在src\components\HelloWorld.vue中发送aja请求

import axios from 'axios'
	export default {
	  name: 'HelloWorld',
	  props: {
	    msg: String
	  },
	  mounted() {
	    axios.get('/user/userinfo')
	    .then(res => {
	      console.log(res)
	    })
	    .catch(err => {
	      console.error(err); 
	    })
	  }
	} 

步骤5.移除MOCK

在项目根路径新建.env.development

MOCK=true 

完善mock\index.js

module.exports = function(app){
    if(process.env.MOCK == 'true'){
        //监听http请求
        app.get('/user/userinfo', function (rep, res) {
            //每次响应请求时读取mock data的json文件
            //getJsonFile方法定义了如何读取json文件并解析成数据对象
            var json = getJsonFile('./userInfo.json5');
            //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
            res.json(Mock.mock(json));
        });
    }
} 

总结,MOCK-JSON5-DEVSERVER-AXIOS职责

表示这张图我没研究不是特别懂，我想一定是有用才写的