mock的使用
1 安装mock npm i mockjs --save-dev
2 在src文件夹中创建mock文件夹(里面对应的需要数据列如mock.js)
3 在main引入mock.js
4 然后在页面里面使用
一:安装mock数据
使用命令 npm install mockjs --save-dev
二:在src下创建mock.js文件
三:mock.js文件内容如下图所示:
// src/mock/mock.js
const Mock = require('mockjs')
const Random = Mock.Random
const getResource = () => {
let resources = []
for (let i = 0; i < 10; i++) {
resources.push({
id: Random.date() + ' ' + Random.time(),
label: '一级' + Random.csentence(2, 5),
children: [{
label: '二级 1-1-1'
}]
})
}
return resources
}
/**
* 格式: Mock.mock(url, post/get , 返回的数据);
* 当post或get请求到路由的时候mock会拦截并返回
* 注意写全路径
**/
Mock.mock('http://localhost:8088/getResource', 'get', getResource())
// src/mock/use.js
const Mock = require('mockjs')
const Random = Mock.Random
const getuser = () => {
let List = []
const count = 100
for (let i = 0; i < count; i++) {
List.push(Mock.mock({
or:Mock.mock({
"string|1-10": "★"}),
id: Random.guid(),
name: Random.cname(),
addr: Mock.mock('@county(true)'),
'age|18-60': 1,
birth: Random.date(),
sex: Random.integer(0, 1)
}))
return List
}
}
Mock.mock('/regit', 'get', getuser())
PS:像这种使用如何使用
四:在VUE的主工程main.js里引入mock
import '../src/mock/mock.js'
五:在项目中需要使用mock的地方调用
<script>
import mock from '../../src/mock/mock'
import axios from 'axios'
export default {
created(){
this.listman()
},
methods:{
listman(){
axios.get('/user').then(res=>{
console.log(res)
})
}
}
}
</script>
mock(登录/增/删/改/查数据)
目录
api文件夹{
api.js
index.js
}
mock文件夹{
data文件夹
user.js
index.js
mock.js
这里面是使用了Axios-Mock-Adapter结合mock使用
安装配置
使用npm安装
npm i axios // 安装axios
npm i mockjs // 安装mockjs
(通过mock模拟假数据)
npm i axios-mock-adapter --save-dev //安装...你懂的
(axios-mock-adapte 即axios的模拟调试器,通过axios模拟调用后台)
然后在main.js里面配置
import Mock from './mock/mock'
目录
这些都是与src同级的
api文件夹
api.js
import axios from 'axios';
let base = '';
export const requestLogin = params => {
return axios.post(`${
base}/login`, params).then(res => res.data);
};
// 获取用户(分页)
export const getUserListPage = params => {
return axios.get(`${
base}/user/listpage`, {
params: params
});
};
// 删除
export const removeUser = params => {
return axios.get(`${
base}/user/remove`, {
params: params
});
};
// 批量删除
export const batchRemoveUser = params => {
return axios.get(`${
base}/user/batchremove`, {
params: params
});
};
// 编辑
export const editUser = params => {
return axios.get(`${
base}/user/edit`, {
params: params
});
};
// 添加
export const addUser = params => {
return axios.get(`${
base}/user/add`, {
params: params
});
};
index.js
import * as api from './api';
export default api;
mock文件夹
index.js文件
import mock from './mock';
export default mock;
mock.js文件
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import {
LoginUsers,
Users
} from './data/user';
let _Users = Users;
export default {
bootstrap() {
let mock = new MockAdapter(axios);
// mock success request
mock.onGet('/success').reply(200, {
msg: 'success'
});
// mock error request
mock.onGet('/error').reply(500, {
msg: 'failure'
});
//登录
mock.onPost('/login').reply(config => {
let {
username,
password
} = JSON.parse(config.data);
return new Promise((resolve, reject) => {
let user = null;
setTimeout(() => {
let hasUser = LoginUsers.some(u => {
if (u.username === username && u.password === password) {
user = JSON.parse(JSON.stringify(u));
user.password = undefined;
return true;
}
});
if (hasUser) {
resolve([200, {
code: 200,
msg: '请求成功',
user
}]);
} else {
resolve([200, {
code: 500,
msg: '账号或密码错误'
}]);
}
}, 500);
});
});
//获取用户列表(分页)
mock.onGet('/user/listpage').reply(config => {
let {
page,
name
} = config.params;
let mockUsers = _Users.filter(user => {
if (name && user.name.indexOf(name) == -1) return false;
return true;
});
let total = mockUsers.length;
mockUsers = mockUsers.filter((u, index) =>
index < 20 * page && index >= 20 * (page - 1)
);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
total: total,
users: mockUsers
}]);
}, 500);
});
});
// 删除用户
mock.onGet('/user/remove').reply(config => {
let {
id
} = config.params;
_Users = _Users.filter(u => u.id !== id);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
code: 200,
msg: '删除成功'
}]);
}, 500);
});
});
// 批量删除用户
mock.onGet('/user/batchremove').reply(config => {
let {
ids
} = config.params;
ids = ids.split(',');
_Users = _Users.filter(u => !ids.includes(u.id));
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
code: 200,
msg: '删除成功'
}]);
}, 500);
});
});
//编辑用户
mock.onGet('/user/edit').reply(config => {
let {
id,
name,
addr,
age,
birth,
sex
} = config.params;
_Users.some(u => {
if (u.id === id) {
u.name = name;
u.addr = addr;
u.age = age;
u.birth = birth;
u.sex = sex;
return true;
}
});
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
code: 200,
msg: '编辑成功'
}]);
}, 500);
});
});
//新增用户
mock.onGet('/user/add').reply(config => {
let {
id,
name,
addr,
age,
birth,
sex
} = config.params;
_Users.push({
id: id,
name: name,
addr: addr,
age: age,
birth: birth,
sex: sex
});
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
code: 200,
msg: '新增成功'
}]);
}, 500);
});
});
}
}
data文件夹
{ user.js}
import Mock from 'mockjs';
const LoginUsers = [{
id: 1,
username: 'admin',
password: '123456',
name: '张某某'
}];
const Users = [];
for (let i = 0; i < 100; i++) {
Users.push(Mock.mock({
id: Mock.Random.guid(),
name: Mock.Random.cname(),
sex: Mock.Random.integer(0, 1),
'age|18-60': 1,
birth: Mock.Random.date(),
addr: Mock.mock('@county(true)'),
}));
}
export {
LoginUsers,
Users
};
PS // 这个是模拟的登录 增删改查带分页的 // 内部的查mock定义好的可以直接用
vue中Mock及Axios-Mock-Adapter模拟调试器的使用
对应的页面效果
如果看更仔细的前往我的码云
!<template>
<div class="main">
<div style="display: flex; justify-content:space-between;">
<div style="width:100px !important; margin:30px 130px">
<el-button type="primary" @click="btnreturn">增加</el-button>
</div>
<!-- 添加==编辑 页面 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="btnAdd">
<el-form ref="editForm" :model="userform" :rules="editFormRules">
<!-- 定义验证的时候必填prop的值 -->
<!--
表单验证数字
onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"-->
<el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
<el-input v-model="userform.name" maxlength="6" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth">
<el-input
v-model="userform.age"
@input="e => userform.age = validForbid(e)"
maxlength="3"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth">
<el-input v-model="userform.sex" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth">
<el-input v-model="userform.addr" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="生日" :label-width="formLabelWidth">
<el-input v-model="userform.birth" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="btnAdd = false">取 消</el-button>
<el-button type="primary" v-if="dialogStatus=='create'" @click="btnagree">添加</el-button>
<el-button type="primary" v-else @click="updateData">修改</el-button>
</div>
</el-dialog>
<div style="margin: 30px">
<el-input
clearable
style="width:200px; margin-right:30px;"
v-model="name"
placeholder="请输入内容"
></el-input>
<el-button type="warning" @click="getList">查询</el-button>
</div>
</div>
<!-- right -->
<div class="table-right">
<div class="right-one"></div>
<!-- 使用elem的table -->
<div class="right-two">
<span class="footer-sp">总数{
{
total}}个</span>
<el-table
ref="multipleTable"
v-loading="loading"
class="elTable"
:data="tableList"
stripe
style="width: 100%"
@selection-change="selschange"
>
<el-table-column type="selection" width="130" prop="id" label="ID"></el-table-column>
<el-table-column width="130" prop="name" label="姓名"></el-table-column>
<el-table-column width="130" prop="age" label="年龄"></el-table-column>
<el-table-column width="130" prop="addr" label="地址"></el-table-column>
<el-table-column width="130" prop="sex" label="性别"></el-table-column>
<el-table-column width="130" prop="birth" label="生日"></el-table-column>
<el-table-column class="editD" width="130" label="编辑">
<template slot-scope="scope">
<el-button type="success" @click="handleEdit(scope.$index,scope.row)" size="mini">编辑</el-button>
<el-button type="info" @click="handleDel(scope.$index,scope.row)" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 分页 -->
<div>
<!-- :disabled 禁用 -->
<el-button
class="batch"
type="danger"
@click="batchRemove"
:disabled="this.sels.length===0"
>批量删除</el-button>
<el-pagination
@current-change="handleCurrentChange"
background
layout="prev, pager, next"
:total="200"
></el-pagination>
</div>
</div>
</template>
<script>
import axios from "axios";
import FileSaver from "file-saver";
import {
getUserListPage, //列表
removeUser, //删除
batchRemoveUser, //批量删除
editUser, //更新
addUser //添加
} from "../api/api";
import XLSX from "xlsx";
export default {
data() {
return {
sels: [], //列表选中列
name: "", //查询的input 这个查询过滤咋回事是mock那边写好了这边直接这样来写就可
editFormRules: {
name: [{
required: true, message: "请输入姓名", trigger: "blur" }]
},
dialogStatus: "",
textMap: {
update: "编辑",
create: "新增"
},
loading: false,
input: "",
oldtime: 3,
total: "", //定义总数
page: 1, //页码
limit: "", //页数 因为mock这定义好了 这边定义空
disable: false,
btnAdd: false,
userform: {
name: "",
age: "",
sex: "",
addr: "",
birth: ""
},
formLabelWidth: "120px",
guide: null,
tableList: []
// 验证必填提示
};
},
created() {
this.getList(this.page);
},
methods: {
// 点击批量删除
batchRemove() {
let ids = this.sels.map(item => item.id).toString();
this.$confirm("确认删除选中记录吗?", "提示", {
type: "warning"
}).then(res => {
let params = {
ids: ids };
batchRemoveUser(params).then(res => {
this.$message({
message: "删除成功",
type: "success"
});
this.getList();
});
});
},
// 点击对应的勾选
selschange(sels) {
this.sels = sels;
// 这里的勾选直接打印的是对应的对象信息
console.log(sels, "12121");
},
// 删除
handleDel(index, row) {
// 删除是对应的id为参
this.$confirm("确认删除该记录吗?", "提示", {
type: "warning"
}).then(() => {
let params = {
id: row.id };
removeUser(params).then(res => {
this.$message({
message: "删除成功",
type: "success"
});
this.getList();
});
});
},
// 新增
btnreturn(e) {
this.dialogStatus = "create";
this.btnAdd = true;
this.userform = {
//添加绑定值
id: "",
name: "",
age: "",
sex: "",
addr: "",
birth: ""
};
},
//新增确定按钮
btnagree() {
//这个refs的后缀与ref相对应
this.$refs.editForm.validate(valid => {
//表单验证
if (valid) {
this.$confirm("确认提交吗?", "提示", {
}).then(() => {
let params = Object.assign({
}, this.userform);
addUser(params).then(res => {
this.$message({
message: "提交成功",
type: "success"
});
this.btnAdd = false;
this.getList();
});
});
}
});
},
// 点击编辑
handleEdit(index, row) {
this.btnAdd = true;
this.dialogStatus = "update";
this.userform = Object.assign({
}, row);
},
// 点击修改
updateData() {
this.$refs.editForm.validate(valid => {
if (valid) {
this.$confirm("确认提交吗?", "提示", {
}).then(() => {
let params = Object.assign({
}, this.userform);
editUser(params).then(res => {
this.$message({
message: "提交成功",
type: "success"
});
this.btnAdd = false;
this.getList();
});
});
}
});
},
// 分页
handleCurrentChange(page) {
this.page = page;
this.getList(this.page, this.limit);
},
// 列表
getList() {
this.loading = true;
let params = {
page: this.page,
name: this.name
};
getUserListPage(params).then(res => {
this.total = res.data.total;
this.tableList = res.data.users;
this.newListData = res.data.users;
this.loading = false;
});
}
}
};
</script>
<style lang="scss" scoped>
.main {
cursor: pointer;
.batch {
margin-left: 110px;
}
/deep/.el-input {
width: 80%;
}
.el-form {
padding: 20px 20px 10px;
}
/deep/.el-dialog__body {
padding: 0 !important;
}
}
/deep/.el-table td.el-table__cell div {
box-sizing: border-box;
display: flex;
justify-content: space-around;
}
/deep/.el-pagination {
text-align: center !important;
margin-top: 30px !important;
}
.table-right {
display: flex;
justify-content: space-between;
.right-one {
flex: 1;
}
.right-two {
flex: 9;
}
}
.elTable {
/deep/.el-table__cell {
text-align: center;
padding: 0 !important;
}
/deep/tr {
height: 30px !important;
}
}
</style>