目录
axios安装：
npm install axios
// main.js 文件夹
import axios from 'axios'
Vue.prototype.$axios = axiosmockjs安装：
npm install mockjs
（mockjs虽然可以模拟后端发送数据，前提是没有刷新页面，刷新页面后还是会回到本来的原始数据）
// 在main.js 中引入mock的文件
import './mock/index'创建一个文件夹 mock 文件 index.js
import mock from 'mockjs'
// 就可以使用了
mock.mock('/user/mock', 'get', userlist1)mockjs可以拦截axios的请求，返回mockjs里面的数据从而实现模拟后端数据
mockjs键值解释
"data|5": [
{
"id|+1": 1,
"name|2-9":"测试",
"phone|11": "1",
"point|200-10000": 0,
"money|300-800.2": 0,
"money2|100-1000.2-4": 0,
"status|1": true,
"detail|2":{"'id":1,"date":"2005-12-02","content":"记录"},
'detail|2-3':{'id':1,'date':'2005‐01‐01','content':'记录'},
"num|3": [1,2,3,4,5],
"num|2-3": [1,2,3,4,5],
"email":"@email",
"name1":"@string",
// 生成随机数字
"point":"@integer",
// 生成随机日期
"birthday":"@date",
// 生成随机图片地址,(块元素里面显示像素)
"img": "@image",
// 生成随机标题英文
"title": "@title",
// 生成随机标题内容，字数为20(中文)
"content":"@cword(20)",
// 中文标题
"ctitle": "@ctitle",
// 中文名称
"cname": "@cname",
// 生成中文姓氏
"cfirst": "@cfirst",
// 生成地址 "rlogin://vnkhopm.nc/vkup"
"url":"@url",
// 生成ip "163.38.121.145"
"ip": "@ip"
}
]
"data|5"：表示生成五条对象
[{},{},{},{},{}]
"id|+1": 表示生成五条对象中id会自增
[
{id:1},
{id:1},
{id:1},
{id:1},
{id:1}
]
"name|2-9": 表示随机后面如果是字符串的话随机2-9次
[
{name:"测试测试测试测试测试"},
{name:"测试"},
{name:"测试测试测试"},
{name:"测试测试"},
{name:"测试测试测试测试"}
]
"point|200-10000": 因为后面是数字所以会实际200-10000，之间一个数字
[
{point:369},
{point:986},
{point:3698},
{point:3698},
{point:9986}
]
"money|300-800.2": 随机生成300-800之间的数字，保留朗威小数
[
{money:369.32},
{money:986.58},
{money:3698.69},
{money:3698.32},
{money:7986.32}
]
"money2|100-1000.2-4": 随机生成100-1000之间的数字，小数保留2-4位
[
{money2:369.322},
{money2:986.5837},
{money2:3698.649},
{money2:3698.321},
{money2:7986.32}
]
"status|1": 表示因为后面是一个布尔值，所以随机生成一个true或false
[
{status:true},
{status:false},
{status:false},
{status:true},
{status:false}
]
"detail|2": 表示从对象中随机选取两个属性进行展示
[
{"id":1,"date":"2005-12-02"},
{"date":"2005-12-02","content":"记录"},
{"id":1,"content":"记录"},
{"id":1,"date":"2005-12-02"},
{"id":1,"content":"记录"}
]
'detail|2-3': 同理展示两到三个属性
"num|3":当为数组是表示几倍的意思
[
1,2,3,4,5,1,2,3,4,5,1,2,3,4,5
]
"num|2-3": 同上2-3倍的意思,
"email": 后面的@email会随机生成一个email
[
{email:"o.eyrj@aigaww.td"},
{status:"h.tgvmygh@jytyk.bd"},
{status:"h.tgvmygh@jytyk.bd"},
{status:"h.tgvmygh@jytyk.bd"},
{status:"h.tgvmygh@jytyk.bd"}
]
"name1":@string表示生成随机字符串
[
{name1:"68K50"},
{name1:"7bW"},
{name1:"7bW"},
{name1:"7bW"},
{name1:"7bW"}
]
个人学习
关于mockjs添加数据后动态数据不显示问题
对于mockjs获取的数据一定要json.parse转换不然得不到想要的效果
得到的结果：
就会发现动态数据少了
添加完之后
动态数据就可以正常显示
模拟增删改查功能：
原数据：
定义在mock.js文件中
const userlist1 = {
status: 200,
data: [
{ // 商品管理数据
id: 1,
nameof: 'ui部门',
code: 'code-floor',
timer: '2021-03-14 14:12:01',
modifier: '汤姆逊',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
nameof: 'web前端部门',
code: 'code-son',
timer: '1903-07-14 14:12:01',
modifier: '爱德华',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 3,
nameof: 'java部门',
code: 'code-java',
timer: '1798-11-14 14:12:01',
modifier: '马丽娟',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 4,
nameof: 'php部门',
code: 'code-php',
timer: '2013-11-14 14:12:01',
modifier: '张飞',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 5,
nameof: 'python部门',
code: 'code-python',
timer: '2015-02-14 14:12:01',
modifier: '刘邦',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 6,
nameof: 'go部门',
code: 'code-go',
timer: '2018-06-14 14:12:01',
modifier: '韩金森',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 7,
nameof: 'c++部门',
code: 'code-c++',
timer: '2022-07-14 14:12:01',
modifier: '李白',
address: '上海市普陀区金沙江路 1518 弄'
}
]
}1.获取数据:
mock.mock('/user/mock', 'get', userlist1)
async getuserlist () {
const { data } = await this.$axios.get('/user/mock')
// console.log(data)
if (data.status === 200) {
this.tableData = data.data
}
},2.添加数据：
mock.mock('/user/mock/add', 'post', function (param) {
const body = JSON.parse(param.body)
// const body = param.body
const id = body.id
let flag = true
for (const item of userlist1.data) {
if (item.id === id) flag = false
}
if (flag) {
userlist1.data.push({
id: body.id,
nameof: body.nameof,
code: body.code,
timer: '2021-03-14 14:12:01',
modifier: '杰克',
address: '上海市普陀区金沙江路 1518 弄'
})
return {
userlist1,
status: 200,
msg: '添加成功'
// body
}
} else {
return {
userlist1,
status: 400,
msg: '添加失败'
}
}
})
async adddata () {
this.addform.id = this.tableData.length + 1
// console.log(this.addform)
const { data } = await this.$axios.post('/user/mock/add', this.addform)
console.log(data)
if (data.status === 200) {
this.tableData = data.userlist1.data
}
this.adddialogVisible = false
}3.修改数据：
mock.mock('/user/mock/change', 'post', function (param) {
const body = JSON.parse(param.body)
const id = body.id
let flag = false
let index = 0
for (const i in userlist1.data) {
if (userlist1.data[i].id === id) {
flag = true
index = i
}
}
if (flag) {
userlist1.data[index].nameof = body.nameof
userlist1.data[index].code = body.code
return {
userlist1,
status: 200,
msg: '修改成功'
}
} else {
return {
userlist1,
status: 400,
msg: '添加失败'
}
}
})
async changedata () {
// console.log(this.changeform)
const { data } = await this.$axios.post('/user/mock/change', this.changeform)
// console.log(res)
if (data.status === 200) {
this.tableData = data.userlist1.data
this.changedialogVisible = false
}
}4.删除数据：
mock.mock('/user/mock/del', 'post', function (param) {
const body = JSON.parse(param.body)
const id = body.id
let flag = false
let index = 0
for (const i in userlist1.data) {
if (userlist1.data[i].id === id) {
flag = true
index = i
}
}
if (flag) {
userlist1.data.splice(index, 1)
return {
userlist1,
status: 200,
msg: '删除成功'
}
} else {
return {
userlist1,
status: 400,
msg: '删除失败'
}
}
})
delchange (e) {
// console.log(e)
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async (res) => {
// console.log(res)
if (res === 'confirm') {
const { data } = await this.$axios.post('/user/mock/del', e)
// console.log(data)
if (data.userlist1.status === 200) {
this.tableData = data.userlist1.data
this.$message({
type: 'success',
message: '删除成功!'
})
}
}
}).catch((res) => {
// console.log(res, '1')
if (res === 'cancel') {
// console.log(res)
this.$message({
type: 'info',
message: '已取消删除'
})
}
})
}5.查询数据：
mock.mock('/user/mock/search', 'post', function (param) {
const body = JSON.parse(param.body)
let list = []
let flag = false
if (body.nameof || body.code) {
flag = true
if (body.nameof) {
list = userlist1.data.filter(e => {
return e.nameof === body.nameof
})
}
if (body.code) {
list = userlist1.data.filter(e => {
return e.code === body.code
})
}
}
if (flag) {
return {
list,
status: 200,
msg: '搜索成功'
}
} else {
return {
userlist1,
status: 400,
msg: '搜索失败'
}
}
})
async searchs () {
// console.log('1')
const { data } = await this.$axios.post('/user/mock/search', this.formInline)
// console.log(data)
if (data.status === 200) {
this.tableData = data.list
} else {
this.tableData = data.userlist1.data
}
}6.实现翻页功能
const courselist = []
for (let i = 0; i < 30; i++) {
const newObject = {
title: Random.csentence(5, 10),
name: Random.cname(),
url: Random.url(),
data: Random.date() + ' ' + Random.time()
}
courselist.push(newObject)
}
mock.mock('/api/courselist', 'get', courselist) // 获取数据
// 实现翻页
mock.mock('/api/courselist/page', 'post', (params) => {
const body = JSON.parse(params.body)
const [index, size, total] = [body.pageCurent, body.pageSize, courselist.length]
// const len = total / size
// const totalages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
const newproducenewsdate = courselist.slice((index - 1) * size, index * size)
return {
code: '0',
message: 'success',
data: {
page: index,
size: size,
list: newproducenewsdate,
totalages: total
}
}
}) async getdatapost () {
const res = await this.$axios.post('/api/courselist/page', this.page)
console.log(res.data)
if (res.data.code === '0') {
this.tablelist = res.data.data.list
this.page.total = res.data.data.totalages
}
// this.tablelist = res.data
},
handleSizeChange (val) {
this.page.pageSize = val
this.getdatapost()
// console.log(`每页 ${val} 条`)
},
handleCurrentChange (val) {
this.page.pageCurent = val
this.getdatapost()
// console.log(`当前页: ${val}`)
}翻页数据
page: {
pageSize: 3, // 每页多少条
total: 0, // 总条数
pageCurent: 1, // 第几页
pagenum: 0
}
本文含有隐藏内容，请 开通VIP 后查看