猿创征文|Mock.js概述及模块化开发实践(一文足矣)

Posted 欧阳呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了猿创征文|Mock.js概述及模块化开发实践(一文足矣)相关的知识,希望对你有一定的参考价值。

Mock.js概述及模块化开发实践


1. 为什么要用mock.js?

  • 在实际开发过程中,后端开发人员编写的接口往往都是更后才会编写完成,并且他们还需要编写对应的接口文档,调试,环境配置等等一系列操作。
  • 此时,作为前端开发人员,一直等待后台开发人员的接口与接口文档才做页面的调试,项目整体进度将会推迟。
  • 所以,我们前端开发人员需要自力更生,模拟后台返回的数据 => 缩短前端项目的研发周期,让前端不用等待后台接口

2. 什么是 Mock.js

  • 一个用于 生成随机数据拦截 Ajax请求第三方包
  • 基于node平台的一款生成随机数据的资源包。
  • 前后端分离(mvvm)过程中优秀的模拟接口API的工具

3. 在 vue 中使用 Mock.js的准备工作

  • 项目安装
npm install mockjs
  • 项目中新建mock/index.js文件
//引入mock模块
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生成随机数据

4. Mock.js 生成不同数据类型(常用的)

  • 生成指定次数字符串
import Mock from 'mockjs'

const data = Mock.mock(
	"string|4": "哈哈"
)
  • 生成指定范围长度字符串
const data = Mock.mock(
 "string|1-8":"哈哈"
)
  • 生成一个随机字符串
const data = Mock.mock(
	"string":"@cword"
)
  • 生成指定长度和范围
const data = Mock.mock(
    string:"@cword(1)"
    str :"@cword(10,15)"
)
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)"
)
  • 随机生成段落
const data = Mock.mock(
  content:"@cparagraph()"
)
  • 生成指定数字
const data = Mock.mock(
	"number|80":1
)
  • 生成范围数字
const data = Mock.mock(
	"number|1-99":1
)
  • 随机生成标识(自增id)
const data = Mock.mock(
	id:"@increment"
)
  • 随机生成姓名-地址-身份证
const data = Mock.mock(
	name:"@cname()"
	idCard:"@id()"
	address:"@city(true)"
)

5. 随机生成图片,时间

  • 生成图片:@image('200x100', '#50B347', '#FFF', '张三')
  • 参数1:图片大小
[
	'300*250','250*250','240*400','336*280'
	'180*150','720*300','468*60','234*60'
	'388*31','250*250','240*400','120*40'
	'125*125','250*250','240*400','336*280'
]
  • 参数2:图片背景色

  • 参数3:图片前景色

  • 参数4:图片格式

  • 参数5:图片文字

时间生成

  • @Date
  • 生成指定格式时间:@date(yyyy-MM-dd hh:mm:ss)

指定数组返回的参数

  • 指定长度:‘date|5’
  • 指定范围:‘data|5-10’
const data = Mock.mock(
'list|50-99':[
        
            name:'@cname'
            address:'@city(true)'
            id:'@increment()'
        	
    ]
)

6. 拓展(extend)

  • 如果上面的这些类型还不能满足你的需要,我们可以使用extend进行扩展,diy你想要的数据,如下:
Mock.Random.extend(
  status: function () 
    const status = ['男', '女', '未知']
    return this.pick(status)
  
)


let myStatus = Mock.Random.status();

let yourStatus = Mock.mock(“@sex”)

7. Mock.js 定义get与post请求

  • 定义get请求
Mock.mock('/api/news', 'get', () => 
  return 
    code: 0,
    msg: '发起get请求成功,但数据是mock返回的'
  
)
  • 定义post请求
Mock.mock('/api/news', 'post', () => 
  return 
    code: 0,
    msg: '发起post请求成功,但数据是mock返回的'
  
)
  • 测试代码
import axios from 'axios'

export default 
  async created () 
    const res = await axios.get('/api/news')
    console.log(res)

    const res1 = await axios.post('/api/news')
    console.log(res1)
  

8. 使用Mock.js拦截和返回随机数据

import Mock from 'mockjs'

// 1. 生成总的随机数据
const  list  = Mock.mock(
  'list|40': [
    id: '@increment',
    title: '@ctitle',
    content: '@cparagraph(5, 20)',
    img_url: "@image('200x200', '#CCCCCC', '#FFFFFF', 'NEWS ITEM')"
  ]
)

console.log(list)

function getQueryParmas (url, key) 
  const queryString = url.split('?')[1]
  const params = queryString.split('&')
  for (let i = 0; i < params.length; i++) 
    const param = params[i]
    const [key1, value] = param.split('=') // ['page', 1]
    if (key1 === key) 
      return value
    
  
  return null


// 2. 拦截网络请求
//  /api/news?page=1&pagesize=10
Mock.mock(/\\/api\\/news/, 'get', (options) => 
  const page = parseInt(getQueryParmas(options.url, 'page'))
  const pagesize = parseInt(getQueryParmas(options.url, 'pagesize'))
  const start = (page - 1) * pagesize

  return 
    code: 0,
    message: '获取新闻列表成功',
    list: list.slice(start, start + pagesize),
    total: list.length
  
)

9. Mock.js 模块化开发

1. 在mock文件夹下新建modules文件夹,并在文件夹下 新建 users.js 和 books.js

  • books.js的代码如下:
   export default 
     '/api/books|get': (options) => 
       return 
         code: 0,
         message: '获取书本列表成功'
       
     ,
     '/api/books|post': (options) => 
       return 
         code: 0,
         message: '新增书本成功'
       
     
   
  • users.js的代码如下:
   export default 
     '/api/users|get': (options) => 
       return 
         code: 0,
         message: '获取用户列表成功'
       
     ,
     '/api/users|post': (options) => 
       return 
         code: 0,
         message: '新增用户成功'
       
     
   

2. 修改mock/index.js中的代码,如下:

// 1. 导入Mock核心模块对象
import Mock from 'mockjs'

// 2. 基础设置,如设置超时时间
Mock.setup(
  timeout: 400
)

// 3. 通过webpack提供的require.context方法集成其他模块
const files = require.context('./modules', true, /\\.js$/)
files.keys().forEach(key => 
  const item = files(key).default
  for (const [protocal, handler] of Object.entries(item)) 
    // console.log(protocal, cb)
    const [url, method] = protocal.split('|')
    Mock.mock(new RegExp(url), method, handler)
  
)

3. 测试代码

const res3 = await axios.get('/api/books?a=1')
console.log(res3)

const res4 = await axios.post('/api/books')
console.log(res4)

const res5 = await axios.get('/api/users')
console.log(res5)

const res6 = await axios.post('/api/users')
console.log(res6)

1. 希望本文能对大家有所帮助,如有错误,敬请指出

2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
3. 拜谢各位!后续将继续奉献优质好文
4. 如果存在疑问,可以私信我(主页有Q)

以上是关于猿创征文|Mock.js概述及模块化开发实践(一文足矣)的主要内容,如果未能解决你的问题,请参考以下文章

猿创征文|Mock.js概述及模块化开发实践(一文足矣)

猿创征文|Mock.js概述及模块化开发实践(一文足矣)

猿创征文|一文带你了解前端开发者工具

猿创征文|vue中使用Axios最佳实践

猿创征文|TensorFlow部署及最佳实践

猿创征文|Linux环境Redis部署及最佳实践