前言
為休寧縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及休寧縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都做網(wǎng)站、休寧縣網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
關(guān)于mockjs,官網(wǎng)描述的是
1.前后端分離
2.不需要修改既有代碼,就可以攔截 Ajax 請(qǐng)求,返回模擬的響應(yīng)數(shù)據(jù)。
3.數(shù)據(jù)類型豐富
4.通過隨機(jī)數(shù)據(jù),模擬各種場(chǎng)景。
5 項(xiàng)目不背鍋(等后端給接口的話可能會(huì)背鍋)
等等優(yōu)點(diǎn),最后一條我加的。
第一步先安裝mock.js
npm install mockjs --save-dev
第二步使用 mock.js
import Mock from 'mockjs'
哪里用就在哪里引入。我是在項(xiàng)目src/mock/index.js里面使用mock.js
詳細(xì)請(qǐng)看官方文檔
關(guān)鍵點(diǎn)1:Mock.mock()
Mock.mock( rurl?, rtype?, template|function( options ) )
這里的參數(shù)都是可選:
關(guān)鍵點(diǎn)2:模板生成語法:
數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成:屬性名、生成規(guī)則、屬性值:
// 屬性名 name // 生成規(guī)則 rule // 屬性值 value 'name|rule': value 屬性名 和 生成規(guī)則 之間用豎線 | 分隔。 生成規(guī)則 是可選的。 生成規(guī)則 有 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 'name|+step': value`
生成規(guī)則 的 含義 需要依賴 屬性值的類型 才能確定。
屬性值 中可以含有 @占位符。
屬性值 還指定了最終值的初始值和類型。
舉個(gè)栗子:
栗子1:
//string表示屬性名 //3表示后面屬性值重復(fù)次數(shù) Mock.mock({ "string|3": "★" })
結(jié)果:
//星星數(shù)量為3
{
"string": "★★★"
}
栗子2:
// num為屬性名 // 生成一個(gè)大于等于1,小于等于100 的整數(shù),屬性值100只是用來確定類型 Mock.mock({ "num|1-100": 100 })
結(jié)果
{
"number": 8
}
其他設(shè)置
// 設(shè)置全局延時(shí) 沒有延時(shí)的話有時(shí)候會(huì)檢測(cè)不到數(shù)據(jù)變化 建議保留 Mock.setup({ timeout: '300-600' })
模擬登錄
// 模擬登錄user/login接口,對(duì)應(yīng)的函數(shù)是loginByUsername Mock.mock(/\/user\/login/, 'post', loginByUsername)
當(dāng)調(diào)用登錄接口user/loign時(shí)候會(huì)自動(dòng)對(duì)應(yīng)到loginByUsername這個(gè)函數(shù)執(zhí)行這個(gè)函數(shù),
這個(gè)函數(shù)會(huì)返回是否登錄成功數(shù)據(jù)。返回成功的數(shù)據(jù),就是登錄成功了,否則相反。
mock模擬登錄ok
接下來介紹模擬表格增刪改查。
其實(shí)也是差不多的
// 用戶相關(guān) Mock.mock(/\/user\/listpage/, 'get', getUserList) //模擬分頁查詢用戶信息接口 Mock.mock(/\/user\/remove/, 'get', deleteUser) //模擬刪除用戶信息接口 Mock.mock(/\/user\/add/, 'get', createUser) //模擬添加用戶信息接口 Mock.mock(/\/user\/edit/, 'get', updateUser) //模擬編輯用戶信息接口
就是返回條件查詢后的集合假數(shù)據(jù)而已,假數(shù)據(jù)是mock.js模擬的。
先循環(huán)添加60個(gè)假用戶
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) })) }
我們?cè)賮砜磄etUserList這個(gè)函數(shù),就是返回分頁條件查詢的假數(shù)據(jù)。
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 } } }
關(guān)于增加,刪除和修改都只需要返回一個(gè)數(shù)據(jù)message="操作成功"即可。
第三步在main.js里面引入剛剛我們寫好的src/mock/index.js
import './mock' // simulation data 路徑index.js可省略
至此整合完畢 源碼地址
總結(jié)
以上所述是小編給大家介紹的Vue+Mock.js模擬登錄和表格的增刪改查功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
名稱欄目:Vue+Mock.js模擬登錄和表格的增刪改查功能
新聞來源:http://bm7419.com/article20/gipdco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、、網(wǎng)站改版、網(wǎng)站制作、App開發(fā)、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)