This article introduces you to the article about Vue and Mock.js working together to simulate login and implement addition, deletion, modification and query of tables. It has a good reference value and I hope it can help friends in need.
1. Front-end and back-end separation
2. Ajax can be intercepted without modifying the existing code Request, return simulated response data.
3. Rich data types
4. Simulate various scenarios through random data.
5 The project does not take the blame (you may take the blame if you wait for the backend to provide an interface)
and other advantages, I added the last one.
npm install mockjs --save-dev
import Mock from 'mockjs'
Introduce it wherever you use it. I use mock.js in project
src/mock/index.js
Please see the official documentation for details
Mock.mock( rurl?, rtype?, template|function( options ) )
The parameters here are all optional:
rurl (optional).
represents the URL that needs to be intercepted, which can be a URL string or a URL regular pattern. For example //domain/list.json/, '/domian/list.json'.
rtype (optional).
indicates the type of Ajax request that needs to be intercepted. For example GET, POST, PUT, DELETE, etc.
template (optional).
represents the data template, which can be an object or a string. For example { 'data|1-10':[{}] }, '@EMAIL'.
function(options)(optional).
represents the function used to generate response data.
options: Points to the Ajax option set for this request.
Each attribute in the data template consists of 3 parts: attribute name, generation rules, Attribute value:
// Attribute name name
Chestnut 1:
//string表示属性名 //3表示后面属性值重复次数 Mock.mock({ "string|3": "★" })
//星星数量为3 { "string": "★★★" }
// num为属性名 // 生成一个大于等于1,小于等于100 的整数,属性值100只是用来确定类型 Mock.mock({ "num|1-100": 100 })
{ "number": 8 }
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留 Mock.setup({ timeout: '300-600' })
user/login interface, the corresponding function is
loginByUsername
Mock.mock(/\/user\/login/, 'post', loginByUsername)
user/loign is called, it will automatically correspond to the
loginByUsername function to execute this function.
This function will return data on whether the login is successful. Returning successful data means that the login is successful, otherwise it is the opposite.
In fact, it’s almost the same.
// 用户相关 Mock.mock(/\/user\/listpage/, 'get', getUserList) //模拟分页查询用户信息接口 Mock.mock(/\/user\/remove/, 'get', deleteUser) //模拟删除用户信息接口 Mock.mock(/\/user\/add/, 'get', createUser) //模拟添加用户信息接口 Mock.mock(/\/user\/edit/, 'get', updateUser) //模拟编辑用户信息接口
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, which returns fake data for paging condition query.
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="Operation successful".
import './mock' // simulation data 路径index.js可省略
vue.js How to introduce Baidu Map’s jsApi? Two methods of introducing Baidu Map’s jsApi
How does vue.js implement the encapsulation of tree tables? How to implement tree table in vue.jsThe above is the detailed content of Vue and Mock.js work together to simulate login and implement addition, deletion, modification and query of tables. For more information, please follow other related articles on the PHP Chinese website!