序文：

開発中、バックエンドインターフェイスが完成していない場合、作業効率に影響を与えないように、フロントエンドはバックエンドインターフェイスを手動でシミュレートします。

import Mock from 'mockjs'

// 设置响应延时
Mock.setup({
  timeout: '200-600'//可以是整数，也可以是‘-’字符串
})

let configArray = []

//使用webpack的require.context()遍历所有的mock文件
const files = require.context('.', true, /\.js$/)
files.keys().forEach((key) => {
  if (key === './index.js') return
  configArray = configArray.concat(files(key).default)
})

//注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|')
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target)
  }
})

モックフォルダーに新しいuser.jsを作成します

// 获取用户信息
let userInfoData = {
  code: 15200,
  message: 'ok',
  'data|1': [
    {
      'id': 1,
      'teacherName': '张老师',
      teacherPhone: '15000000099',
      'schoolName': '@cname(1,4)',
      'cityName': '@city(true)',// 如果@city(),只会生成市，如果@city(true)会生成省和市
      'role': 2,
      'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1,
        'count': '@natural(1, 30)'
      }],
      
    }
  ]
}

export default {
  'post|/teacher/view-query-teacher': userInfoData
}

3.モックバックエンドにアクセスします

axios.post(`/teacher/view-query-teacher`).then(res=>{
//看res就是拿到的数据
debugger
})

mock.jsの詳細

api：

1.属性値は文字列です

'name|min-max': string

string生成を繰り返すことにより、繰り返しの文字列はmin、以上、または以下になりmaxます。
'name|count': string

string同等の時間の文字列の生成を繰り返すことによってcount。

2.属性値はNumberです

'name|+1': number

属性値は自動的に1ずつ増加し、初期値はnumberです。
'name|min-max': number

より大きいmin、より小さい、または等しいmax整数を生成する属性値numberは、タイプを判別するためにのみ使用されます。
'name|min-max.dmin-dmax': number

ビットの小数部分を保持するために、整数以上または等しい部分min、またはそれ以下の浮動小数点を生成します。maxdmindmax

3.属性値はブール値です

'name|1': boolean

ブール値がランダムに生成されます。trueの値の確率は1/2であり、falseの値の確率も1/2です。
'name|min-max': value

ランダムにブール値の値を生成valueする確率min / (min + max)の値!value確率はあるがmax / (min + max)。

4.プロパティ値はObjectです

'name|count': object

属性でobjectランダムに選択された属性値count。
'name|min-max': object

objectランダムに選択されminたmax属性から属性までの属性値。

5.プロパティ値は配列です

'name|1': array

array最終値として、ランダムに選択された1つの要素からの属性値。
'name|+1': array

array要素の順に選択された属性値から、最終値として。
'name|min-max': array

属性値arrayを繰り返して新しい配列を生成することにより、繰り返し回数は、以上min、または以下になりmaxます。
'name|count': array

属性値arrayを繰り返して新しい配列を生成することにより、繰り返し回数count。

6.属性値は関数です

'name': function

関数が実行されます。function属性関数コンテキスト'name'オブジェクトの最終的な属性値が見つかったときの戻り値のいずれかです。

7.属性値は正規表現RegExpです

'name': regexp

正規表現のregexp逆生成は、その文字列と一致する可能性があります。カスタム形式で文字列を生成するために使用されます。

Mock.mock({
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
})
// =>
{
    "regexp1": "pJ7",
    "regexp2": "F)\fp1G",
    "regexp3": "561659409"
}

8.モックは具体的にさまざまなタイプを生成します

文字列を生成する

指定された時間の文字列を生成します

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)

名前-住所-ID番号を生成する

名前-住所-ID番号をランダムに生成します

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（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
        }
    ]
})

モックインターセプトリクエスト

プロジェクトにaxiosをインストールします
```
npm install axios
```
main.jsファイルで紹介されています
```
import axios from 'axios'
```
モックフォルダのindex.jsファイルにモック構文を記述します

パラメータなしでgetリクエストを定義する

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

ポストリクエストを定義する

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>

1つは、mockjsのデータ型と文法仕様です。

1、Mock.Random

Mock.Randomは、さまざまなランダムデータを生成するために使用されるツールクラスです。
Mock.Randomのメソッドは、データテンプレートでは「プレースホルダー」と呼ばれ、書き込み形式は@Placeholder（parameter [、parameter]）です。

2Mock.Randomが提供する完全なメソッド（プレースホルダー）は次のとおりです。

の種類	方法
基本	boolean、natural、integer、float、character、string、range、date、time、datetime、now
画像	画像、dataImage
色	色
テキスト	段落、文、単語、タイトル、cparagraph、csentence、cword、ctitle
名前	最初、最後、名前、cfirst、clast、cname
ウェブ	URL、ドメイン、メール、IP、TLD
住所	エリア、地域
ヘルパー	大文字、上、下、ピック、シャッフル
その他	guid、id

3.データ型を定義します。詳細については、公式ドキュメントを参照してください

// 引入 Mock
var Mock = require('mockjs')

// 定义数据类型
var data = Mock.mock({
  // 20条数据
  "data|3": [{
    // 商品种类
    "goodsClass": "女装",
    // 商品Id
    "goodsId|+1": 1,
    //商品名称
    "goodsName": "@ctitle(10)",
    //商品地址
    "goodsAddress": "@county(true)",
    //商品等级评价★
    "goodsStar|1-5": "★",
    //商品图片
    "goodsImg": "@Image('100x100','@color','小甜甜')",
    //商品售价
    "goodsSale|30-500": 30,

    // 邮箱：
    "email": "@email",
    // 颜色
    "color": "@color",

    // name
    "name": "@name",

    //img,参数1：背景色，参2：前景色，参3：图片的格式，默认png，参4：图片上的文字

    "img": "@image('100*100','@color')",
    //英文文本(句子)参1：句子的个数，参2：句子的最小个数  参3：句子的最大个数，没有参1时，参2参3才会生效
    "Etext":"@paragraph(1,1,3)",

    //中文文本(句子)参1：句子的个数，参2：句子的最小个数  参3：句子的最大个数，没有参1时，参2参3才会生效
    "Ctext":"@cparagraph(1,1,3)",

    //中国大区
    "cregion":"@region",
    // 省
    "cprovince":"@province",
    //市
    "ccity":"@city",
    //省 + 市
    "ss":"@city(true)",
    //县
    "country":"@county",
    //省市县
    "countrysx":"@county(true)",
    //邮政编码
    "code":"@zip"

  }]
})

// 输出结果
// console.log(data);

4.Mockjs文法仕様

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意：
属性名 和 生成规则 之间用竖线 | 分隔。 
生成规则 是可选的。 
生成规则 有 7 种格式： 'name|min-max': value 'name|count': value 'name|min-max.dmin-dmax': value 'name|min-max.dcount': value 'name|count.dmin-dmax': value 'name|count.dcount': value
//属性值自动加 1，初始值为 `number` 'name|+step': value    

生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。
---------------------------------------------

二、Mock.setup（）

Mock.setup（設定）

Ajaxリクエストをインターセプトするときの動作を設定します。サポートされている構成項目は次のとおりです。timeout
は、インターセプトされたAjaxリクエストの応答時間をミリ秒単位で指定します。
値は、400ミリ秒後に応答コンテンツが返されることを意味する400などの正の整数にする
ことができます。また、「200-600」などの水平バーのスタイルの文字列にすることもできます。応答時間は200〜600ミリ秒です。デフォルト値は「10-100」です。

  Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})
目前，接口 Mock.setup( settings ) 仅用于配置 Ajax 请求，将来可能用于配置 Mock 的其他行为。

3、Mock.Random拡張メソッド

// 引入 Mock
var Mock = require('mockjs')

var random = Mock.Random;

//扩展数据模板
random.extend({
  type: function (index:number) {
    const types = ['products', 'industryApp', 'solution', 'experts'];
    return this.pick(types[index])
  }
});

// 定义数据类型
const  menuSource:Array<any> = [];
 menuSource[0] = Mock.mock({
  "type": "@type(0)",
   'data|3-4':[{
     'id|+1': 1,
     name: "@ctitle( 4,6)",
     "childs|5-10": [{
       'id|+1': 1,
       name: "@ctitle(4,6)",
     }]
   }]
});
// 输出结果
 console.log(data);

4つ目は、mockjsがフロントエンドから渡されたデータを取得することです。

axios({
      method: "get",
      url: "/getGoods",
      data: {
        id:2
      }
    }).then(data => {
      //成功的回调函数，返回的是增加的数据
      console.log(data.data.data);
      this.url = data.data.data[0].goodsImg
    });
  }

  Mock.mock("/getGoods", "get", (config) => {
  console.log(config);
  return data;
})

###mockjs可以通过option.body获取前端传递的数据

要素フォームを追加、削除、変更する場合：

ケース：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
}

アプリを見る

<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);

vueでmock.jsを使用して、背景をシミュレートします

序文：