1.mock.js官网：Mock.js (mockjs.com)
2.创建mock-demo:vue create mock-demo
选择：
Default ([Vue 2] babel, eslint)
3.进入mock-demo：cd mock-demo
4.安装依赖：
cnpm install axios --save #安装axios,使用axios发送ajax请求
cnpm intall mockjs --save-dev #安装mockjs ,使用mockjs产生随机数据
cnpm install json5 --save-dev #安装json5,使用json5解决json文件，无法添加注释问题
或者
npm install axios --save #安装axios,使用axios发送ajax请求
npm intall mockjs --save-dev #安装mockjs ,使用mockjs产生随机数据
npm install json5 --save-dev #安装json5,使用json5解决json文件，无法添加注释问题
5.可以在 package.json 中看安装的依赖
6.使用mock:
1.在mock-demo中新建文件夹mock 2.在mock文件夹下新建testMock.js 3.在testMock.js中添加内容： const Mock=require('mockjs') //引入mockjs let id = Mock.mock('@id') //定义一个变量id,用来接收 通过 Mock.mock('@id') 生成的id内容 console.log(id) //打印id 4.使用： cd mock node testMock.js 运行testMock.js文件 5.可以看到打印的变量值：350000197608045955
7.打印一个对象代码:testMock.js
const Mock=require('mockjs') //引入mockjs
let id = Mock.mock('@id') //定义一个变量id,用来接收 通过 Mock.mock('@id') 生成的id内容
console.log(id) //打印id
let obj = Mock.mock({
id:'@id'
})
console.log(obj) //对象就是在json中所需要的内容
8.打印多个字段的对象代码：testMock.js
const Mock=require('mockjs') //引入mockjs let id = Mock.mock('@id') //定义一个变量id,用来接收 通过 Mock.mock('@id') 生成的id内容 console.log(id) //打印id let obj = Mock.mock({ id:'@id()', //得到随机的id 对象 username:'@cname()', //随机生成中文名字 date:'@date()', //随机生成日期 avatar:'@image("200x200","red","#fff","avatar")', //随机生成一个图片的url，宽和高为200，背景色为红色，字体颜色为#fff,文字内容为avatar description:'@paragraph()', //随机生成一些描述 ip:'@ip()', //随机生成IP地址 email:'@email()' //随机生成email }) console.log(obj) //对象就是在json中所需要的内容
9.将对象单独保存为一个文件
1.在mock文件夹下新建userinfo.json 2.在userinfo.json文件中输入内容： { id:'@id()', //得到随机的id 对象 username:'@cname()', //随机生成中文名字 date:'@date()', //随机生成日期 avatar:'@image("200x200","red","#fff","avatar")', //随机生成一个图片的url，宽和高为200，背景色为红色，字体颜色为#fff,文字内容为avatar description:'@paragraph()', //随机生成一些描述 ip:'@ip()', //随机生成IP地址 email:'@email()' //随机生成email } 3.在userinfo.json会出现一些问题： 问题1：不能使用中文注释 问题2：变量名必须用两个引号来表示，如：“id”:"@id()" 4.用json5可以解决这些问题： 解决方法： 第一步：将“userinfo.json”修改为“userinfo.json5”，即后缀修改为json5 第二步：在mock文件夹下新建一个测试JSON5的js文件叫：testJSON5.js
10.testJSON5.js的内容：
const fs = require('fs') //定义一个fs ,fs模块为nodejs的核心模块之一，主要处理文件的读写、复制、S删除、重命名等操作 const path = require('path') //定义一个path,path模块为nodejs的一个模块，在这个模块中，提供了许多使用的，可被用来处理与转换路径的方法和属性 const JSON5 = require('json5') //引入json5 模块 //fs.readFileSync同步读取文件，第一个参数代表文件路径（不可省略），第二个参数代表读出文件的编码方式（可省略，省略后读出的数据是buffer数据格式） //path.join,将 以逗号分隔的一系列路径，这些路径将连接在一起以构成最终路径 //__dirname,表示当前文件所在目录 var json = fs.readFileSync(path.join(__dirname,'/userinfo.json5'),'utf-8') //将获取到内容保存到变量json中 console.log(json) //打印json var obj = JSON5.parse(json) //用JSON5来解析读取到的json console.log(obj)
11.devServer:作为拦截器，来监听请求和响应，官网：https://webpack.js.org/configuration/dev-server/
12.使用devServer中的before，这个拦截键来拦截
13.使用webpack中的devServer
1.在mock-demo中创建vue.config.js文件 2.vue.config.js中的内容为：
module.exports={
devServer: {
before: require('./mock/index.js') //用before的属性来拦截处理mock中的index.js文件，需要在mock文件夹下新建一个index.js
}
}
14. 在mock文件夹下新建一个index.js，index.js的内容：
const fs = require('fs') //定义一个fs ,fs模块为nodejs的核心模块之一，主要处理文件的读写、复制、S删除、重命名等操作
const path = require('path') //定义一个path,path模块为nodejs的一个模块，在这个模块中，提供了许多使用的，可被用来处理与转换路径的方法和属性
const JSON5 = require('json5') //引入json5 模块
const Mock = require('mockjs') //引入mock.js
//读取json文件
function getJsonFile(filePath){
//fs.readFileSync同步读取文件，第一个参数代表文件路径（不可省略），第二个参数代表读出文件的编码方式（可省略，省略后读出的数据是buffer数据格式）
//path.join,将 以逗号分隔的一系列路径，这些路径将连接在一起以构成最终路径
//__dirname,表示当前文件所在目录
var json = fs.readFileSync(path.join(__dirname,filePath),'utf-8') //将获取到内容保存到变量json中
console.log("nihao")
console.log(json) //打印json
var obj = JSON5.parse(json) //用JSON5来解析读取到的json
console.log(obj)
return obj
}
//返回一个函数
module.exports=function (app) { //用app这个对象来监听它的 '/user/userinfo' url,
//监听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))
});
}
15.npm run serve :运行程序
16.在mock-demo文件夹下的src文件夹下的components文件夹下的HelloWorld.vue文件中的 export default 中的props下新建mounted:function(){}
<script> import axios from 'axios' //引入axios export default { name: 'HelloWorld', props: { msg: String }, mounted:function () { axios.get('/user/userinfo').then( //使用axios发送get请求 res=>{ console.log(res) //打印响应结果 } ) } } </script>
17.在vue中使用mock.js，移除mock
1.在index.js中设置一个MOCK变量，只有当MOCK变量为true的时候，再监听http请求
其中index.js内容变为：
const fs = require('fs') //定义一个fs ,fs模块为nodejs的核心模块之一，主要处理文件的读写、复制、S删除、重命名等操作
const path = require('path') //定义一个path,path模块为nodejs的一个模块，在这个模块中，提供了许多使用的，可被用来处理与转换路径的方法和属性
const JSON5 = require('json5') //引入json5 模块
const Mock = require('mockjs') //引入mock.js
//读取json文件
function getJsonFile(filePath){
//fs.readFileSync同步读取文件，第一个参数代表文件路径（不可省略），第二个参数代表读出文件的编码方式（可省略，省略后读出的数据是buffer数据格式）
//path.join,将 以逗号分隔的一系列路径，这些路径将连接在一起以构成最终路径
//__dirname,表示当前文件所在目录
var json = fs.readFileSync(path.join(__dirname,filePath),'utf-8') //将获取到内容保存到变量json中
console.log("nihao")
console.log(json) //打印json
var obj = JSON5.parse(json) //用JSON5来解析读取到的json
console.log(obj)
return obj
}
//返回一个函数
module.exports=function (app) { //用app这个对象来监听它的 '/user/userinfo' url,
if(process.env.MOCK == 'true'){ //只有当Mock值为true时，才进行http请求监听
console.log("进行监听")
//监听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))
});
}
}
process.env.MOCK == 'true' 就是设置的条件，注意此处env.后面的MOCK需要与.env.development文件中定义的MOCK一样，需要一模一样，大小写表示不一样
2.看网址：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F
中的.env.[mode] # 只在指定的模式中被载入 的使用
3.指定模式为：development模式用于vue-cli-service serve
4.在项目根目录下新建.env.development文件，文件内容为：
.env.development文件内容如下： MOCK=true
5.重启服务器：npm run serve
6.当后端开发完成后，就可以把 .env.development文件内容如下：的 MOCK=true 修改为 MOCK=false
7.然后重启服务器：npm run serve
8.此时，mock便不可用了
18.