一、在vue项目中使用mock.js（详解）

步骤1.搭建测试项目

步骤1.1创建项目

命令：
vue create mock-demo

步骤1.2安装依赖

命令：

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

步骤2.学习mockjs

新建mock文件夹，新建testMockis.js
mockjs语法定义:http://mockjs.com/examples.html
在这里插入图片描述

const Mock = require('mockjs')let id = Mock.mock('@id')
// console.log(id)let obj = Mock.mock({id: '@id'
})
// console.log(obj)var userInfo = Mock.mock({id: "@id()", //得到随机的idusername: "@cname()", //随机生成中文名字date: "@date()", //随机生成日期avator: "@image('200x200','#50B347','#fff','avatar')", //生成图片，参数：size,background,foreground,textdescription: "@paragraph()", //描述ip: "@ip()", //IP地址email: "@email()" //email
})
console.log(userInfo)

在这里插入图片描述

步骤3 学习JSON5

步骤3.1 在mock文件夹下创建userInfo.json5文件

userInfo.json5:

{id: "@id()", //得到随机的idusername: "@cname()", //随机生成中文名字date: "@date()", //随机生成日期avator: "@image('200x200','#50B347','#fff','avatar')", //生成图片，参数：size,background,foreground,textdescription: "@paragraph()", //描述ip: "@ip()", //IP地址email: "@email()" //email
}

在这里插入图片描述

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

在mock文件夹下，新建testJSON5.js
在这里插入图片描述

const fs = require('fs')
const path = require('path')
const JSON5 = require('json5')var json = fs.readFileSync(path.join(__dirname, './userInfo.json5'),'utf-8')
console.log(json)var obj = JSON5.parse(json) //parse 将字符串转换成对象
console.log(obj)

在这里插入图片描述

步骤4.mock和vue-cli结合

步骤4.1新建index.js

在mock文件夹下，新建index.is
在这里插入图片描述

const fs = require('fs')
const path = require('path')
const Mock = require('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(req,res) {// 每次响应请求时读取mock data的json文件// getJsonFile方法定义了如何读取json文件并解析成数据对象var json = getJsonFile('./userInfo.json5')// 将json传入Mock.mock方法中，生成数据返回给浏览器res.json(Mock.mock(json))})
}

步骤4.2 了解在vue-cli中如何利用webpack的devServer启动一个后端服务器

在这里插入图片描述

我们下面借助vue-cli 里面的 webpack的devServer来启动一个后端服务器

参考vue-cli文档:https://cli.vuejs.org/zh/config/#devserver
在这里插入图片描述

webpack官方文档：https://webpack.js.org/configuration/dev-server/#devserverbefore

步骤4.3 在项目根路径下创建vue.config.js文件

在这里插入图片描述

步骤4.4 运行我们的项目

命令： npm run server
在这里插入图片描述

步骤4.5 在HelloWorld中编写发送请求的代码

在这里插入图片描述

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