這篇文章跟大家介紹的文章內容是關於Vue和Mock.js一起模擬登入和實作表格的增刪改查，有很好的參考價值，希望可以幫助到有需要的朋友。
前言
關於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 ) )
登入後複製
這裡的參數都是可選：
表示需要攔截的 URL，可以是 URL 字串或 URL 正規。例如 //domain/list.json/、'/domian/list.json'。
表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
表示資料模板，可以是物件或字串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
表示用於產生回應資料的函數。
關鍵點2：範本產生語法：
舉個栗子：
栗子1：
//string表示属性名
//3表示后面属性值重复次数
Mock.mock({
"string|3": "★"
})登入後複製
結果：
//星星数量为3
{
"string": "★★★"
}登入後複製
栗子2：
// num为属性名
// 生成一个大于等于1，小于等于100 的整数，属性值100只是用来确定类型
Mock.mock({
"num|1-100": 100
})登入後複製
結果
其他設定
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
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('@county(true)'),
'age|18-60': 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可省略
登入後複製
相關推薦：
##vue.js下如何引入百度地圖的jsApi？引入百度地圖的jsApi的兩種方法介紹
vue.js如何實作樹形表格的封裝？ vue.js實作樹形表格的方法
以上是Vue和Mock.js一起模擬登入和實作表格的增刪改查的詳細內容。更多資訊請關注PHP中文網其他相關文章！
