mockJs基礎用法

ps:案例在最下方
學習於：https://www.bilibili.com/video/BV1v741197q2

什么是mockJs

生成隨機數據，攔截 Ajax 請求

參考文檔：http://mockjs.com/examples.html

為什么使用mockJs

如果后端接口還未開發完成，我們自己手動模擬后端接口返回隨機數據完成交互功能

1. 采用json數據模擬，生成數據比較繁瑣，也比較有局限性，沒辦法達到增刪改查
2. 采用mockJs進行模擬數據，可以模擬各種場景（get、post）生成接口，並且隨機生成所需數據，還可以對數據進行增刪改查

使用mockJs

通過vue-cli創建基本項目

• 在項目中安裝mock

  npm install mockjs
  

• 在項目中新建mock文件夾，在mock文件夾中創建index.js

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

• 將mock文件夾的index.js文件在main.js中導入

  import Vue from 'vue'
  import App from './App.vue'
  import './mock/index.js'
  
  
  new Vue({
    render: h => h(App),
  }).$mount('#app')
  

mock語法

生成字符串

• 生成指定次數字符串

  const data = Mock.mock({
      "string|4": "yx！"
  })
  console.log(data)
  

• 生成指定范圍長度字符串

  const data = Mock.mock({
      "string|1-8": "yx"
  })
  console.log(data)
  

生成文本

• 生成一個隨機字符串

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

• 生成指定長度和范圍

  const data = Mock.mock({
      string: "@cword(1)",
      str: '@cword(10,15)'
  })
  console.log(data)
  

生成標題和句子

• 生成標題和句子

  const data = Mock.mock({
      title: "@ctitle",
      sentence: '@csentence'
  })
  console.log(data)
  

• 生成指定長度的標題和句子

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

• 生成指定范圍的

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

生成段落

• 隨機生成段落

  const data = Mock.mock({
      content: '@cparagraph()' 
  })
  console.log(data)
  

生成數字

• 生成指定數字

  const data = Mock.mock({
      "number|80": 1
  })
  console.log(data)
  

• 生成范圍數字

  const data = Mock.mock({
      "number|1-999": 1
  })
  console.log(data)
  

生成增量id

• 隨機生成標識

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

生成姓名-地址-身份證號

• 隨機生成姓名-地址-身份證號

  const data = Mock.mock({
      name: '@cname()',
      idCard: '@id()',
      address: '@city(true)' // 如果@city(),只會生成市，如果@city(true)會生成省和市
  })​
  console.log(data)
  

隨機生成圖片

• 生成圖片：

• 參數1：圖片可選大小

• 參數2：圖片背景色

• 參數3：圖片前景色

• 參數4：圖片格式

• 參數5：圖片文字

    const data = Mock.mock({
        image: "@image('300x300', '#50B347', '#FFF', 'Mock.js')"
    })
    console.log(data)
  

生成時間

• @Date

• 生成指定格式時間：@date(yyyy-MM-dd hh:mm:ss)

  const time = Mock.mock({
      time1: '@date()', // 只有年月日
      time2: '@date(yyyy-MM-dd hh:mm:ss)'
  })
  console.log(time) 
  

指定數組返回的條數

• 指定長度：'data|5'

• 指定范圍：'data|5-10'

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

mock攔截請求

• 在項目中安裝axios

  npm install axios
  

• 在 main.js 文件引入

  import axios from 'axios'
  

• 在mock文件夾的index.js文件中寫mock語法

定義不攜帶參數的get請求

Mock.mock('/api/get/user','get',()=>{
    return {
        status: 200,
        message: '獲取新聞列表數據成功'
    }
})

定義post請求

Mock.mock('/api/post/user','post',()=>{
    return {
        status: 200,
        message: '添加新聞列表數據成功'
    }
})

• 在 App.vue 文件發送請求

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
  created() {
        axios.get('/api/get/user')
          .then(function (response) {
          console.log(response);
       }),

        axios.post('/api/post/user')
          .then(res => console.log(res)),
    }
}
</script>

<style lang="less" scoped>

</style>

案例：運用element-ui實現含分頁數據的請求；增加；刪除等

mockjs文件夾的index.js

import Mock from 'mockjs'

const data = Mock.mock({
  "list|20-60": [
    {
      "id": '@increment(1)',
      "title": "@ctitle",
      "content": "@cparagraph",
      "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
    }
  ]
})

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

// 添加
Mock.mock('/api/add/news', 'post', (options) => {
  let body = JSON.parse(options.body)
  
  data.list.push(Mock.mock({
    "id": '@increment(1)',
    "title": body.title,
    "content": body.content,
    "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
  }))

  return {
    status: 200,
    message: '添加成功',
    list: data.list
  }
})


// 含有分頁的數據列表,有需要接受的參數要使用正則匹配
// /api/get/news?pagenum=1&pagesize=10
Mock.mock(/\/api\/get\/news/, 'get', (options) => {
  console.log(options)
  // 獲取傳遞的參數pageindex
  const pagenum = getQuery(options.url,'pagenum')
  // 獲取傳遞的參數pagesize
  const pagesize = getQuery(options.url,'pagesize')
  // 截取數據的起始位置
  const start = (pagenum-1)*pagesize
  // 截取數據的終點位置
  const end = pagenum*pagesize
  // 計算總頁數
  const totalPage = Math.ceil(data.list.length/pagesize)
  // 數據的起始位置：(pageindex-1)*pagesize  數據的結束位置：pageindex*pagesize
  const list = pagenum>totalPage?[]:data.list.slice(start,end)

  return {
    status: 200,
    message: '獲取新聞列表成功',
    list: list,
    total: data.list.length
  }
})

const getQuery = (url,name)=>{
  const index = url.indexOf('?')
  if(index !== -1) {
    const queryStrArr = url.substr(index+1).split('&')
    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
}

App.vue

<template>
  <div id="app">
    <!-- 頭部 -->
    <h3 style="text-align: center">數據展示</h3>

    <!-- 添加 -->
    <el-row :gutter="20">
      <el-col :span="8"
        ><el-input v-model="title" placeholder="請輸入標題"></el-input
      ></el-col>
      <el-col :span="8"
        ><el-input v-model="content" placeholder="請輸入內容"></el-input
      ></el-col>
      <el-col :span="8"
        ><el-button type="primary" @click="handelAdd">添加</el-button></el-col
      >
    </el-row>

    <!-- 表格 -->
    <template>
      <el-table :data="tableData" style="width: 100%">
        <!-- <el-table-column label="圖片" width="120">
          <template v-if="tableData[0]"
            ><img :src="tableData[0].img_url" width="100" height="100"
          /></template>
        </el-table-column> -->
        <el-table-column prop="title" label="標題" width="160">
        </el-table-column>
        <el-table-column prop="content" label="內容"> </el-table-column>
        <el-table-column prop="add_time" label="時間" width="160">
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button @click="handleDelete(scope.row.id)" type="danger"
              >刪除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-button type="primary" @click="prev">上一頁</el-button>
    <el-button type="primary" @click="next">下一頁</el-button>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      title: "",
      content: "",
      pagenum: 1,
      pagesize: 10,
      total: 0
    };
  },
  methods: {
    // 獲取數據列表
    async getList() {
      // axios.get("/api/get/news").then(res => (this.tableData = res.data.list));
      const result = await axios.get("/api/get/news",{params: {pagenum: this.pagenum, pagesize: this.pagesize}})
      this.tableData = result.data.list
      this.total = result.data.total
    },

    // 刪除
    async handleDelete(id) {
      const result = await axios.post("/api/delete/news", { id });
      this.getList();
    },

    // 添加數據
    async handelAdd() {
      if (!this.title || !this.content) {
        alert("請輸入內容");
        return;
      }

      const result = await axios.post("/api/add/news", {
        title: this.title,
        content: this.content
      });
      this.getList();
      this.title = "";
      this.content = "";
    },

    prev(){
      if(this.pagenum > 1){
        this.pagenum --
      this.getList()
      }
    },

    next(){
      if(this.pagenum * this.pagesize < this.total ){
        this.pagenum ++
        this.getList()
      }else{
        alert('沒有更多的數據')
      }
    }
  },
  created() {
    this.getList();
  }
};
</script>

main.js

import './mockjs/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);