mockJs企业级应用工具，实现先后端分离

时间 2020-06-23 标签 mockjs 企业应用工具实现后端分离

mockJs

配套视频：
视频学习地址前端

mockJs生成随机数据语法
mockJs拦截请求
vue结合mockJs实现新闻管理案例

什么是mockJs

文档vue

生成随机数据，拦截 Ajax 请求web

为何使用mockJs

在工做开发中，若是后端接口还未开发完成，难道咱们就只能写静态页面了吗？因此前端为了避免影响工做效率，咱们本身手动模拟后端接口返回随机数据。vue-cli

采用json数据模拟，生成数据比较繁琐，也比较有局限性，没办法达到增删改查
采用mockJs进行模拟数据，能够模拟各类场景（get、post）生成接口，而且随机生成所需数据，还能够对数据进行增删改查

使用mockJs

经过vue-cli建立基本项目npm

在项目中安装mockjson
```
npm install mockjs
```

在项目中新建mock文件后端

//引入mock模块
import Mock from 'mockjs';

将mock文件在main.js中导入api

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": "哎呦！"
})

生成指定范围长度字符串app

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",
    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-999": 1
})

生成增量id

随机生成标识

const data = Mock.mock({
    id: '@increment()'
})

生成姓名-地址-身份证号

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

const data = Mock.mock({
    name: '@cname()',
    idCard: '@id()',
    address: '@city(true)'
})

随机生成图片

生成图片：@image(“300x250”,"#ff0000","#fff",“gif”,“坤坤”)

参数1：图片大小

[
    '300x250', '250x250', '240x400', '336x280', 
    '180x150', '720x300', '468x60', '234x60', 
    '88x31', '120x90', '120x60', '120x240', 
    '125x125', '728x90', '160x600', '120x600', 
    '300x600'
]

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

生成时间

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

指定数组返回的条数

指定长度：‘data|5’

指定范围：‘data|5-10’

const data = Mock.mock({
    'list|50-99':[
        {
            name: '@cname()',
            address: '@city(true)',
            id: '@increment()'
        }
    ]
})

mock拦截请求

定义get请求

Mock.mock('/api/get/news','get',()=>{
    return {
        status: 200,
        message: '获取新闻列表数据成功'
    }
})

定义post请求

Mock.mock('/api/post/news','post',()=>{
    return {
        status: 200,
        message: '添加新闻列表数据成功'
    }
})

实现新闻管理案例

定义获取数据的接口

const data = Mock.mock({
    'newsList|50-70': [
        {
            id: '@increment()',
            title: '@ctitle(10,15)',
            content: '@cparagraph(5,15)',
            img_url: '@image("100x100","#FFE4B5","#fff","暂无图片")',
            add_time: '@date(yyyy-MM-dd hh:mm:ss)'
        }
    ]
})

// 定义获取新闻列表的接口
Mock.mock('/api/get/news','get',() => {
    const {newsList} = data
    return {
        status: 200,
        message: '获取新闻列表成功',
        list: data,
        total: newsList.length
    }
})

定义分页功能

const data = Mock.mock({
    'newsList|50-70': [
        {
            id: '@increment()',
            title: '@ctitle(10,15)',
            content: '@cparagraph(5,15)',
            img_url: '@image("100x100","#FFE4B5","#fff","暂无图片")',
            add_time: '@date(yyyy-MM-dd hh:mm:ss)'
        }
    ]
})

// 获取参数
const getSearchUrl =  (url,name) => {
    const index = url.indexOf('?')
    if(index>-1){
        const searchStr = url.substr(index+1)
        const searchArr = searchStr.split('&')
        for(var i=0;i<searchArr.length;i++){
            const itemArr = searchArr[i].split('=')
            console.log(name,itemArr[0])
            if(name === itemArr[0]){
                return itemArr[1]
            }
        }
    }
}
// 定义获取新闻列表的接口
Mock.mock(/\/api\/get\/news/,'get',(options) => {
  // 获取页码
  const pageindex = getUrlQuery(options.url,'pageindex')
  // 获取每页条数
  const pagesize = getUrlQuery(options.url,'pagesize')
  // 数据总条数
  const total = data.list.length
  // 数据总页数
  const totalPage = Math.ceil(total/pagesize)
  // 截取的开始位置
  const start = (pageindex - 1)*pagesize
  // 截取的结束位置
  const end = pageindex*pagesize
  // 数据截取
  const list = pageindex<=totalPage?data.list.slice(start,end):[]
  return {
    status: 200,
    message: '获取新闻列表成功',
    list: list,
    total: total
  }
})

实现添加的接口

// 添加新闻
Mock.mock('/api/add/news','post',(options) => {
    const body = JSON.parse(options.body)
    const {newsList} = data
    newsList.unshift(Mock.mock({
        id: '@increment()',
        title: body.title,
        content: body.content,
        img_url: '@image("100x100","#FFE4B5","#fff","暂无图片")',
        add_time: '@date(yyyy-MM-dd hh:mm:ss)'
    }))
    return {
        status: 200,
        message: '添加成功',
        list: newsList
    }
})

实现删除

// 删除接口
Mock.mock('/api/delete/news','post',(options)=>{
    var body = JSON.parse(options.body)
    const {newsList} = data
    const index = newsList.findIndex(item=>{
        return item.id === body.id
    })
    newsList.splice(index,1)
    return {
        status: 200,
        message: '删除成功',
        list: newsList
    }
})

接口文档

获取数据

接口地址：/api/get/news

接口参数：

pageindex: 页码
pagesize：每页的条数

请求类型：GET

返回的数据:

{
  status: 200,
  message: '获取新闻列表成功',
  list: [
    {
      "id":1,
      "title":"办证先许严六统百几住",
      "content":"着要去石金热具采重林包好。金改电自线育适称平山现精利。每大例查满开制得命也之们实专提温。深出清气边得因选自分入温型干级。别需压五级转据道象也却必质程。员种最空的满六气量别住叫山。近起常需十种每铁由性我过府式家油支压。那米水出低料几老数布强命。",
      "img_url":"http://dummyimage.com/100x100/FFE4B5/fff&text=暂无图片",
      "add_time":"1984-04-03 11:43:37"}
  ],
  total: 50
}

添加新闻

接口地址：/api/add/news

接口参数：

title: 标题
content：内容

请求类型：POST

返回的数据:

{
  status: 200,
  message: '添加成功',
  list: [
    {
      "id":1,
      "title":"办证先许严六统百几住",
      "content":"着要去石金热具采重林包好。金改电自线育适称平山现精利。每大例查满开制得命也之们实专提温。深出清气边得因选自分入温型干级。别需压五级转据道象也却必质程。员种最空的满六气量别住叫山。近起常需十种每铁由性我过府式家油支压。那米水出低料几老数布强命。",
      "img_url":"http://dummyimage.com/100x100/FFE4B5/fff&text=暂无图片",
      "add_time":"1984-04-03 11:43:37"}
  ],
  total: 50
}

删除新闻

接口地址：/api/delete/news

接口参数：

id: 新闻id

请求类型：POST

返回的数据:

{
  status: 200,
  message: '删除成功',
  list: [
    {
      "id":1,
      "title":"办证先许严六统百几住",
      "content":"着要去石金热具采重林包好。金改电自线育适称平山现精利。每大例查满开制得命也之们实专提温。深出清气边得因选自分入温型干级。别需压五级转据道象也却必质程。员种最空的满六气量别住叫山。近起常需十种每铁由性我过府式家油支压。那米水出低料几老数布强命。",
      "img_url":"http://dummyimage.com/100x100/FFE4B5/fff&text=暂无图片",
      "add_time":"1984-04-03 11:43:37"}
  ],
  total: 50
}