Article Directory
1. What is mockjs
In a development environment where the front and back ends are separated, the front end needs to wait for the interface document given by the back end before continuing to develop. And MockJS allows the front-end to be developed independently of the back-end. Simply put, front-end development no longer depends on the back-end. The front-end can sort out the interface documents according to the business and use MockJS to simulate the back-end interface. MockJS simulates the interface data returned by the backend by intercepting specific AJAX requests and generating simulated data of a given data type. In layman's terms, the role of mockjs is to intercept requests and return specific data types.
`Hint: The following is the text of this article
Two, install mockj
Project installation mock
npm install mockjs
Create a new mock file in the project
//引入mock模块
import Mock from 'mockjs'
Import the mock file in main.js
import Vue from 'vue'
import App FROM './App.vue'
import './mock/index.js'
Vue.config.productionTip = false
new Vue({
render:h => h(App),
}).$mount('#app')
3. Mock syntax
generate string
- Generate a specified number of strings
import Mock from 'mockjs'
const data = Mock.mock({
"string|4":"哈哈"
})
- Generate a string of specified range length
const data = Mock.mock({
"string|1-8":"哈哈"
})
generate text
- generate a random string
const data = Mock.mock({
"string":"@cword"
})
- Generate specified length and range
const data = Mock.mock({
string:"@cword(1)"
str :"@cword(10,15)"
})
generate headlines and sentences
- generate headlines and sentences
const data = Mock.mock({
title:"@ctitle(8)"
sentence:"@csentence"
})
- Generate headlines and sentences of specified length
const data = Mock.mock({
title:"@ctitle(8)"
sentence:"@csentence(50)"
})
- Generate a specified range of
const data = Mock.mock({
title:"@ctitle(5,8)"
sentence:"@csentence(50,100)"
})
generate paragraph
- Randomly generate paragraphs
const data = Mock.mock({
content:"@cparagraph()"
})
generate numbers
- Generate the specified number
const data = Mock.mock({
"number|80":1
})
- generate range numbers
const data = Mock.mock({
"number|1-99":1
})
Generate auto-increment id
- randomly generated logo
const data = Mock.mock({
id:"@increment"
})
Generate Name-Address-ID
- Randomly generate name-address-ID card
const data = Mock.mock({
name:"@cname()"
idCard:"@id()"
address:"@city(true)"
})
Generate random images
- Generate image: @image("300*200", '#ff0000', '#fff', 'gif', 'Kun Kun')
- Parameter 1: image size
[
'300*250','250*250','240*400','336*280'
'180*150','720*300','468*60','234*60'
'388*31','250*250','240*400','120*40'
'125*125','250*250','240*400','336*280'
]
-
Parameter 2: Image background color
-
Parameter 3: Image foreground color
-
Parameter 4: Image format
-
Parameter 5: picture text
build time
- @Date
- Generate time in specified format: @date(yyyy-MM-dd hh:mm:ss)
Specifies the parameters returned by the array
- Specified length: 'date|5'
- Specified range: 'data|5-10'
const data = Mock.mock({
'list|50-99':[
{
name:'@cname'
address:'@city(true)'
id:'@increment()'
}
]
})
mock interception request
Define the get request
Mock.mock('api/get/news','get',()=>{
return{
status:200,
message:"获取数据成功"
}
})
Define post request
Mock.mock('api/post/news','post',()=>{
return{
status:200,
message:"获取数据成功"
}
})
4. Realizing news management case
retrieve data
Interface address:: /api/get/news
Interface parameters:
pageindex：页码
pagesize:每页的条数
Request type: get
Returned data:
{
status:200,
message:"获取新闻列表成功",
list:[
{
"id":1,
"title":"解忧杂货店",
"content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
"img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
"add_time":"1984-04-03 11:43:37"}
],
total:50
}
}
add news
Interface address:: /api/add/news
Interface parameters:
title：'标题'
content：内容
Request type: post
Returned data:
{
status:200,
message:"获取新闻列表成功",
list:[
{
"id":1,
"title":"解忧杂货店",
"content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
"img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
"add_time":"1984-04-03 11:43:37"}
],
total:50
}
}
delete news
Interface address:: /api/delete/news
Interface parameters:
id；新闻id
Request type: post
Returned data:
{
status:200,
message:"获取新闻列表成功",
list:[
{
"id":1,
"title":"解忧杂货店",
"content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
"img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
"add_time":"1984-04-03 11:43:37"}
],
total:50
}
}