Vue+Mock.js實作模擬表格增刪改查詳細步驟

關於mockjs，官網描述的是 1.前後端分離 2.不需要修改既有程式碼，就可以攔截 Ajax 請求，回傳模擬的回應資料。 3.資料類型豐富 4.透過隨機數據，模擬各種場景。

前言

關於mockjs，官網描述的是

1.前後端分離

2.不需要修改既有程式碼，就可以攔截Ajax請求，返回模擬的回應資料。

3.資料型態豐富

4.透過隨機數據，模擬各種場景。

5 專案不背鍋（等後端給介面的話可能會背鍋）

等等優點，最後一條我加的。

第一步先安裝mock.js

npm install mockjs --save-dev

第二步使用 mock.js

import Mock from 'mockjs'

哪裡用就在哪裡引入。我是在專案src/mock/index.js裡面使用mock.js

詳細請看官方文件

關鍵點1：Mock .mock()

Mock.mock( rurl?, rtype?, template|function( options ) )

這裡的參數都是可選：

• rurl(可選)。

表示需要攔截的 URL，可以是 URL 字串或 URL 正規。例如 //domain/list.json/、'/domian/list.json'。

• rtype(可選)。

表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。

• template(可選)。

表示資料模板，可以是物件或字串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

• function(options)(可選)。

表示用於產生回應資料的函數。

• options：指向本次請求的 Ajax 選項集。

關鍵點2：範本產生語法：

• #資料範本中的每個屬性由3 部分構成：屬性名稱、產生規則、屬性值：

• // 屬性名稱  name

• // 產生規則rule

• // 屬性值  value

• 'name|rule': value

• 屬性名稱和產生規則之間用垂直線| 分隔。

• 產生規則 是可選的。

• 產生規則有7 種格式：

• #'name|min-max':value

• 'name|count': 值

• 'name|min-max.dmin-dmax': value

• ##' name|min-max.dcount':value

• 'name|count.dmin-dmax': value

• 'name|count. dcount': value

• 'name| step': value`

• 產生規則的意義需要依賴屬性值的型別才能確定。

• 屬性值 中可以含有 @佔位符。

• 屬性值 也指定了最終值的初始值和型別。

舉個栗子：

栗子1：

//string表示属性名
//3表示后面属性值重复次数
 Mock.mock({
  "string|3": "★"
})

結果：

//星星数量为3
{
  "string": "★★★"
}

栗子2：

// num为属性名
// 生成一个大于等于1，小于等于100 的整数，属性值100只是用来确定类型
Mock.mock({
  "num|1-100": 100
})

結果

{
  "number": 8
}

其他設定

//  设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留

Mock.setup({
  timeout: '300-600'
})

模擬登入

//  模擬登入

user/login接口，對應的函數是loginByUsername

Mock.mock(/\/user\/login/, 'post', loginByUsername)

當呼叫登入介面

user/loign時候會自動對應到loginByUsername這個函數執行這個函數，這個函數會傳回是否登入成功資料。返回成功的數據，就是登入成功了，否則相反。

mock模擬登入ok

接下來介紹模擬表格增刪改查。

其實也是差不多的

// 用户相关
Mock.mock(/\/user\/listpage/, 'get', getUserList) //模拟分页查询用户信息接口
Mock.mock(/\/user\/remove/, 'get', deleteUser)   //模拟删除用户信息接口
Mock.mock(/\/user\/add/, 'get', createUser)     //模拟添加用户信息接口
Mock.mock(/\/user\/edit/, 'get', updateUser)   //模拟编辑用户信息接口

就是回傳條件查詢後的集合假資料而已，假資料是mock.js模擬的。

先循環加入60個假用戶

let List = []
const count = 60

for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    id: Mock.Random.guid(),
    name: Mock.Random.cname(),
    addr: Mock.mock(&#39;@county(true)&#39;),
    &#39;age|18-60&#39;: 1,
    birth: Mock.Random.date(),
    sex: Mock.Random.integer(0, 1)
  }))
}

我們再來看

getUserList這個函數，就是傳回分頁條件查詢的假資料。

  getUserList: config => {
    const { name, page = 1, limit = 20 } = param2Obj(config.url)

    const mockList = List.filter(user => {
      if (name && user.name.indexOf(name) === -1) return false
      return true
    })

    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))

    return {
      code: 0,
      data: {
        total: mockList.length,
        users: pageList
      }
    }
  }

關於增加，刪除和修改都只需要回傳一個資料

message="操作成功"即可。

第三步在main.js裡面引進剛剛我們寫好的src/mock/index.js

import './mock' // simulation data 路径index.js可省略

至此整合完畢 

相關文章：

MVC模式實現登入以及增刪改查之登入

XML 增、刪除、改和查範例

相關視頻：

PHP用戶註冊登入系統影片教學#

以上是Vue+Mock.js實作模擬表格增刪改查詳細步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！