vue2 -mock使用

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一样，需要一模一样，大小写表示不一样

.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.