Mock.js简单使用｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第12天什么是Mock.js Get

这是我参与「第四届青训营」笔记创作活动的的第12天

什么是Mock.js

Getting Started · nuysoft/Mock Wiki · GitHub

作用：生成随机数据，拦截Ajax请求

为什么使用mockJs

在工作开发中，如果后端接口还未开发完成，难道我们就只能写静态页面了吗？所以前端为了不影响工作效率，我们自己手动模拟后端接口返回随机数据。

采用json数据模拟，生成数据比较繁琐，也比较有局限性，没办法达到增删改查
采用mock]s进行模拟数据，可以模拟各种场景（get、post）生成接口，并且随机生成所需数据，还可以对数据进行增删改查

导入Mock.js

项目安装mock

npm install mockjs

项目中新建mock文件

//引入mock模块 记得在package.json 里添加 "type": "module"，才能使用模块化语法
import Mock from 'mockjs'

将mock文件在main.js中导入

import Vue from 'vue'
import App from './App.vue'
import './mock/index.js'

Vue.config.productionTip = false

new Vue({
	render:h => h(App),
}).$mount('#app')

Mock语法

生成字符串 |

因为其中包含了| 所以在键名里要加 '' 引号

生成指定次数字符串

import Mock from 'mockjs'
const data = Mock.mock({
	'string|4':"哈哈!"
})
// "哈哈!哈哈!哈哈!哈哈!"

生成随机次数字符串

const data = Mock.mock({
	'string|1-8':"哈哈!"
})
// 1到8次都有可能

生成文本 @cword(n，m)

虽然键不用加引号，但键值对的值，是必须要加 '' 引号的

生成一个随机中文

const data = Mock.mock({
	string:"@cword"
})

指定生成的字数

const data = Mock.mock({
    string:"@cword(3)"	
    str :"@cword(10,15)"
})

生成标题和句子 @ctitle()、@csentence()

生成标题和句子

const data = Mock.mock({
    title:"@ctitle(8)"
    sentence:"@csentence"
})

生成指定长度的标题和句子

const data = Mock.mock({
    title:"@ctitle(8)"
    sentence:"@csentence(50)"
})

生成指定范围的

const data = Mock.mock({
    title:"@ctitle(5,8)"
    sentence:"@csentence(50,100)"
})

生成段落 @cparagraph()

随机生成段落

const data = Mock.mock({
  content:"@cparagraph(5)"  // 代表这个段落有5句话
})

生成数字

生成指定数字

const data = Mock.mock({
	"number|80":1
})
// 这样生成的数字固定是80

Mock.mock({
  "number|1-100": 1
})
// 1-100 的随机数

生成范围数字

const data = Mock.mock({
	"number|1-100.1-10": 1
})
/*
{  "number": 81.7134620755  }
*/

生成自增id @increment(1)

随机生成标识

const data = Mock.mock({
	id:"@increment(1)"
})
// 函数里的数字代表每次增加多少

生成姓名-地址-身份证

随机生成姓名-地址-身份证

const data = Mock.mock({
	name:"@cname()", // 可能是2字人名、可能是3字人名
    address:"@city(true)", // true 代表生成省份+城市，如果不加，则只生成城市
	idCard:"@id()",
})
// { name: '孙艳', address: '天津 天津市', idCard: '210000201108019417' }

随机生成图片 "@image('','')"

import Mock from 'mockjs';
const data = Mock.mock({
  name: "@image('300x200','#ff0000','#fff','gif','哈哈')",
});
// 注意里外的单引号和双引号要不同

参数1：图片大小 （注意是x而不是*）

	'300x250','250x250','240x400','336x280'
	'180x150','720x300','468x60','234x60'
	'388x31','250x250','240x400','120x40'
	'125x125','250x250','240x400','336x280'

参数2：图片背景色
参数3：图片前景色
参数4：图片格式
参数5：图片里面的文字

生成时间 @date(yyyy-MM-dd hh:mm:ss)

import Mock from 'mockjs';
const data = Mock.mock({
  name: '@date(yyyy-MM-dd hh:mm:ss)',
});
// { name: '2017-11-10 02:44:53' }

生成数组

指定范围:'data|5-10' 生成 5 - 10 个元素的数组，每个元素是一个以下形式的对象

// 注意此处应解构赋值，因为该数组是在包含在对象里面的！
const {data} = Mock.mock({
'list|5-10':[
        {
            name:'@cname',
            address:'@city(true)',
            id:'@increment()',
        }	
    ]
})

▲Mock拦截请求

定义get请求

Mock.mock('/api/get/news','get',()=>{
    return{
        status:200,
        message:"get数据成功"
    }
})

如果发起的GET请求里需要传递参数，ajax的请求url则会发生改变，所以需要把mock.js 里接收的url改成正则表达式

（POST请求的参数是在res.body里的，所以不会改变ajax的请求url）

import Mock from 'mockjs';
// 自己mock的数据
const { newsList } = Mock.mock({
  'newsList|75': [
    {
      id: '@increment',
      title: '@ctitle()',
      content: '@cparagraph(5,10)',
      img_url: "@image('50*50','#FF83FA','#FCFCFC','png','mono')",
      add_time: '@date(yyyy-MM-dd hh:mm:ss)',
    },
  ],
});

// 传参的话URL会变成类似这样：/api/get/news?pageindex=1&pagesize=10
// 下面的正则表示 包含/api/get/news 的都可以接收
Mock.mock(/\/api\/get\/news/, "get", (options) => {
  // 通过传给后端的URL获取传递参数pageindex，pagesize
  const pageindex = getQuery(options.url, "pageindex");
  const pagesize = getQuery(options.url, "pagesize");
  // pageindex:1 pagesize:10 返回0-9条数据  2-10-（10-19） 3-10（20-29）
  // 数据的起始位置：（pageindex-1）*pagesize 结束位置：pageindex*pagesize 
  // 【.slice()第二个参数序号不截取，所以结束位置不是 pageindex*pagesize-1 】
  const start = (pageindex - 1) * pagesize;
  const end = pagesize * pageindex;
  const totalPage = Math.ceil(newsList.length / pagesize); //Math.ceil() 向上取整求总页数

  const list = pageindex > totalPage ? [] : newsList.slice(start, end);
  return {
    status: 200,
    message: "获取新闻列表成功",
    list: list,
    total: totalPage,
  };
});

// 从url获取参数值的方法
var getQuery = (url, name) => {
  // console.log(url, name);
  const index = url.indexOf("?"); // 获取url 问号的索引
  if (index !== -1) {
    const queryStrArr = url.substring(index + 1).split("&"); //获得一个数组['pageindex=1','pagesize=10']
    for (var i = 0; i < queryStrArr.length; i++) {
      const itemArr = queryStrArr[i].split("=");
      // console.log(itemArr);
      if (itemArr[0] === name) {
        return itemArr[1];
      }
    }
  }
  return null;
};

定义post请求

Mock.mock('/api/post/news','post',()=>{
    return{
        status:200,
        message:"post数据成功"
    }
})

POST请求的参数是在res.body里的，所以不会改变ajax的请求url

// 定义添加新闻的数据
Mock.mock('/api/add/news', 'post', (options) => {
  const body = JSON.parse(options.body);
  console.log(body);
  newsList.push(
    Mock.mock({
      id: '@increment',
      title: body.title,
      content: body.content,
      img_url: "@image('50*50','#FF83FA','#FCFCFC','png','mono')",
      add_time: '@date(yyyy-MM-dd hh:mm:ss)',
    })
  );
  return {
    status: 200,
    message: '添加成功',
    list: newsList,
    total: newsList.length,
  };
});

// 定义删除新闻
Mock.mock('/api/delete/news', 'post', (options) => {
  console.log(options);
  const body = JSON.parse(options.body);
  console.log(body);
  const index = newsList.findIndex((item) => {
    return item.id === body.id;
  });
  newsList.splice(index, 1);
  console.log(index);
  return {
    status: 200,
    message: '添加成功',
    list: newsList,
    total: newsList.length,
  };
});
console.log(Mock);

新闻管理案例--接口文档

获取数据

接口地址：：/api/get/news

接口参数：

pageindex：页码
pagesize:每页的条数

请求类型：get

返回的数据：

{
    status:200,
    message:"获取新闻列表成功",
    list:[
        {
            "id":1,
            "title":"解忧杂货店",
            "content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
            "img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
            "add_time":"1984-04-03 11:43:37"}
    ],
    total:50
    }
}

添加新闻

接口地址：：/api/add/news

接口参数：

title：'标题'
content：内容

请求类型：post

返回的数据：

{
    status:200,
        message:"获取新闻列表成功",
        list:[
        {
            "id":1,
            "title":"解忧杂货店",
            "content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
            "img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
            "add_time":"1984-04-03 11:43:37"}
        ],
        total:50
    }
}

删除新闻

接口地址：：/api/delete/news

接口参数：

id；新闻id

请求类型：post

返回的数据：

{
    status:200,
        message:"获取新闻列表成功",
        list:[
        {
            "id":1,
            "title":"解忧杂货店",
            "content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
            "img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
            "add_time":"1984-04-03 11:43:37"}
        ],
        total:50
    }
}

Mock.js简单使用 ｜ 青训营笔记

什么是Mock.js

为什么使用mockJs

导入Mock.js

Mock语法

生成字符串 |

生成文本 @cword(n，m)

生成标题和句子 @ctitle()、@csentence()

生成段落 @cparagraph()

生成数字

生成自增id @increment(1)

生成姓名-地址-身份证

随机生成图片 "@image('','')"

生成时间 @date(yyyy-MM-dd hh:mm:ss)

生成数组

▲Mock拦截请求

定义get请求

定义post请求

新闻管理案例--接口文档

获取数据

添加新闻

删除新闻

Mock.js简单使用｜青训营笔记