ops
/
jump-web
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add mockjs

master
taylor 8 years ago
parent
be1507a70d
commit
b520949520
6 changed files with 310 additions and 245 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/api/api.js
  2. 85
      src/mock/mock.js
  3. 3
      src/mockdata/user.js
  4. 9
      src/pages/Login.vue
  5. 185
      src/pages/nav1/Table.vue
  6. 7
      src/pages/nav1/user.vue

8
src/api/api.js
View File

@ -5,3 +5,11 @@ let base = '';
export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); }; export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); };
export const getUserList = params => { return axios.get(`${base}/user/list`, { params: params }); }; export const getUserList = params => { return axios.get(`${base}/user/list`, { params: params }); };
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 editUser = params => { return axios.get(`${base}/user/edit`, { params: params }); };
export const addUser = params => { return axios.get(`${base}/user/add`, { params: params }); };

85
src/mock/mock.js
View File

@ -1,6 +1,7 @@
import axios from 'axios'; import axios from 'axios';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
import { LoginUsers, Users } from '../mockdata/user'; import { LoginUsers, Users } from '../mockdata/user';
let _Users = Users;
export default { export default {
/** /**
@ -19,6 +20,7 @@ export default {
msg: 'failure' msg: 'failure'
}); });
//登录
mock.onPost('/login').reply(config => { mock.onPost('/login').reply(config => {
let {username, password} = JSON.parse(config.data); let {username, password} = JSON.parse(config.data);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -33,17 +35,18 @@ export default {
}); });
if (hasUser) { if (hasUser) {
resolve([200, { code: 200, msg: '请求成功!!!', user }]);
resolve([200, { code: 200, msg: '请求成功', user }]);
} else { } else {
resolve([200, { code: 500, msg: '用户名或密码错误!!!' }]);
resolve([200, { code: 500, msg: '账号或密码错误' }]);
} }
}, 500); }, 500);
}); });
}); });
//获取用户列表
mock.onGet('/user/list').reply(config => { mock.onGet('/user/list').reply(config => {
let {name} = config.params; let {name} = config.params;
let mockUsers = Users.filter(user => {
let mockUsers = _Users.filter(user => {
if (name && user.name.indexOf(name) == -1) return false; if (name && user.name.indexOf(name) == -1) return false;
return true; return true;
}); });
@ -56,5 +59,81 @@ export default {
}); });
}); });
//获取用户列表（分页）
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/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 { name, addr, age, birth, sex } = config.params;
_Users.push({
name: name,
addr: addr,
age: age,
birth: birth,
sex: sex
});
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([200, {
code: 200,
msg: '新增成功'
}]);
}, 500);
});
});
} }
}; };

3
src/mockdata/user.js
View File

@ -9,9 +9,8 @@ const LoginUsers = [
]; ];
const Users = []; const Users = [];
const userCount = 8;
for (let i = 0; i < userCount; i++) {
for (let i = 0; i < 86; i++) {
Users.push(Mock.mock({ Users.push(Mock.mock({
id: Mock.Random.guid(), id: Mock.Random.guid(),
name: Mock.Random.cname(), name: Mock.Random.cname(),

9
src/pages/Login.vue
View File

@ -17,6 +17,7 @@
<script> <script>
import { requestLogin } from '../api/api'; import { requestLogin } from '../api/api';
import NProgress from 'nprogress'
export default { export default {
data() { data() {
return { return {
@ -48,12 +49,18 @@
if (valid) { if (valid) {
//_this.$router.replace('/table'); //_this.$router.replace('/table');
this.logining = true; this.logining = true;
NProgress.start();
var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass }; var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
requestLogin(loginParams).then(data => { requestLogin(loginParams).then(data => {
this.logining = false; this.logining = false;
NProgress.done();
let { msg, code, user } = data; let { msg, code, user } = data;
if (code !== 200) { if (code !== 200) {
this.$message.error(msg);
this.$notify({
title: '错误',
message: msg,
type: 'error'
});
} else { } else {
localStorage.setItem('user', JSON.stringify(user)); localStorage.setItem('user', JSON.stringify(user));
if (this.$route.query.redirect) { if (this.$route.query.redirect) {

185
src/pages/nav1/Table.vue
View File

@ -2,23 +2,23 @@
<section> <section>
<!--工具条--> <!--工具条-->
<el-col :span="24" class="toolbar"> <el-col :span="24" class="toolbar">
<el-form :inline="true" :model="formInline">
<el-form :inline="true" :model="filters">
<el-form-item> <el-form-item>
<el-input v-model="formInline.user" placeholder="姓名"></el-input>
<el-input v-model="filters.name" placeholder="姓名"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button>查询</el-button>
<el-button type="primary" v-on:click="getUsers">查询</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleAdd">新增</el-button>
<el-button type="primary" @click="handleAdd">新增</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
<!--列表--> <!--列表-->
<template> <template>
<el-table :data="tableData" highlight-current-row v-loading="listLoading" style="width: 100%;">
<el-table-column type="index" width="50">
<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;">
<el-table-column type="index" width="60">
</el-table-column> </el-table-column>
<el-table-column prop="name" label="姓名" width="180" sortable> <el-table-column prop="name" label="姓名" width="180" sortable>
</el-table-column> </el-table-column>
@ -30,10 +30,10 @@
</el-table-column> </el-table-column>
<el-table-column prop="addr" label="地址" sortable> <el-table-column prop="addr" label="地址" sortable>
</el-table-column> </el-table-column>
<el-table-column inline-template :context="_self" label="操作" width="100">
<el-table-column inline-template :context="_self" label="操作" width="140">
<span> <span>
<el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" size="small" @click="handleDel(row)">删除</el-button>
<el-button size="small" @click="handleEdit(row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(row)">删除</el-button>
</span> </span>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -41,8 +41,7 @@
<!--分页--> <!--分页-->
<el-col :span="24" class="toolbar" style="padding-bottom:10px;"> <el-col :span="24" class="toolbar" style="padding-bottom:10px;">
<el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
:total="400" style="float:right">
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
</el-pagination> </el-pagination>
</el-col> </el-col>
@ -83,19 +82,18 @@
<script> <script>
import util from '../../common/util' import util from '../../common/util'
import NProgress from 'nprogress' import NProgress from 'nprogress'
import { getUserListPage, removeUser, editUser, addUser } from '../../api/api';
export default { export default {
data() { data() {
return { return {
formInline: {
user: ''
filters: {
name: ''
}, },
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
value1:'',
users: [],
total: 0,
page: 1,
listLoading: false,
editFormVisible: false,//编辑界面显是否显示 editFormVisible: false,//编辑界面显是否显示
editFormTtile: '编辑',//编辑界面标题 editFormTtile: '编辑',//编辑界面标题
//编辑界面数据 //编辑界面数据
@ -113,65 +111,8 @@
name: [ name: [
{ required: true, message: '请输入姓名', trigger: 'blur' } { required: true, message: '请输入姓名', trigger: 'blur' }
] ]
},
tableData: [{
id:1000,
name: 'lanqy1',
sex: 1,
age: 20,
birth:'1996-03-02',
addr:'广东广州天河体育中心'
}, {
id:1001,
name: 'lanqy2',
sex: 1,
age: 20,
birth:'1996-03-02',
addr:'广东广州天河体育中心'
}, {
id:1002,
name: 'lanqy3',
sex: 0,
age: 20,
birth:'1996-03-02',
addr:'广东广州天河体育中心'
}, {
id:1003,
name: 'lanqy4',
sex: 1,
age: 20,
birth:'1996-03-02',
addr:'广东广州天河体育中心'
}, {
id:1004,
name: 'lanqy5',
sex: 1,
age: 20,
birth:'1996-03-02',
addr:'广东广州天河体育中心'
}, {
id:1005,
name: 'lanqy6',
sex: 1,
age: 20,
birth:'1996-03-02',
addr:'广东广州天河体育中心'
}, {
id:1006,
name: 'lanqy7',
sex: 1,
age: 20,
birth:'1996-03-02',
addr:'广东广州天河体育中心'
}, {
id:1007,
name: 'lanqy8',
sex: 1,
age: 20,
birth:'1996-03-02',
addr:'广东广州天河体育中心'
}],
listLoading:false
}
} }
}, },
methods: { methods: {
@ -179,7 +120,26 @@
formatSex: function (row, column) { formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'; return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
}, },
//删除记录
handleCurrentChange(val) {
this.page = val;
this.getUsers();
},
//获取用户列表
getUsers() {
let para = {
page: this.page,
name: this.filters.name
};
this.listLoading = true;
NProgress.start();
getUserListPage(para).then((res) => {
this.total = res.data.total;
this.users = res.data.users;
this.listLoading = false;
NProgress.done();
});
},
//删除
handleDel: function (row) { handleDel: function (row) {
//console.log(row); //console.log(row);
var _this = this; var _this = this;
@ -188,11 +148,8 @@
}).then(() => { }).then(() => {
_this.listLoading = true; _this.listLoading = true;
NProgress.start(); NProgress.start();
setTimeout(function(){
for(var i=0;i<_this.tableData.length;i++){
if(_this.tableData[i].id==row.id){
_this.tableData.splice(i,1);
let para = { id: row.id };
removeUser(para).then((res) => {
_this.listLoading = false; _this.listLoading = false;
NProgress.done(); NProgress.done();
_this.$notify({ _this.$notify({
@ -200,11 +157,9 @@
message: '删除成功', message: '删除成功',
type: 'success' type: 'success'
}); });
_this.getUsers();
});
break;
}
}
},1000);
}).catch(() => { }).catch(() => {
}); });
@ -231,7 +186,17 @@
_this.editLoading = true; _this.editLoading = true;
NProgress.start(); NProgress.start();
_this.btnEditText = '提交中'; _this.btnEditText = '提交中';
setTimeout(function(){
if (_this.editForm.id == 0) {
//新增
let para = {
name: _this.editForm.name,
sex: _this.editForm.sex,
age: _this.editForm.age,
birth: _this.editForm.birth == '' ? '' : util.formatDate.format(new Date(_this.editForm.birth), 'yyyy-MM-dd'),
addr: _this.editForm.addr,
};
addUser(para).then((res) => {
_this.editLoading = false; _this.editLoading = false;
NProgress.done(); NProgress.done();
_this.btnEditText = '提 交'; _this.btnEditText = '提 交';
@ -241,31 +206,32 @@
type: 'success' type: 'success'
}); });
_this.editFormVisible = false; _this.editFormVisible = false;
if(_this.editForm.id==0){
//新增
_this.tableData.push({
id:new Date().getTime(),
_this.getUsers();
});
} else {
//编辑
let para = {
id: _this.editForm.id,
name: _this.editForm.name, name: _this.editForm.name,
sex: _this.editForm.sex, sex: _this.editForm.sex,
age: _this.editForm.age, age: _this.editForm.age,
birth: _this.editForm.birth == '' ? '' : util.formatDate.format(new Date(_this.editForm.birth), 'yyyy-MM-dd'), birth: _this.editForm.birth == '' ? '' : util.formatDate.format(new Date(_this.editForm.birth), 'yyyy-MM-dd'),
addr: _this.editForm.addr
addr: _this.editForm.addr,
};
editUser(para).then((res) => {
_this.editLoading = false;
NProgress.done();
_this.btnEditText = '提 交';
_this.$notify({
title: '成功',
message: '提交成功',
type: 'success'
}); });
}else{
//编辑
for(var i=0;i<_this.tableData.length;i++){
if(_this.tableData[i].id==_this.editForm.id){
_this.tableData[i].name=_this.editForm.name;
_this.tableData[i].sex=_this.editForm.sex;
_this.tableData[i].age=_this.editForm.age;
_this.tableData[i].birth=_this.editForm.birth==''?'':util.formatDate.format(new Date(_this.editForm.birth),'yyyy-MM-dd');
_this.tableData[i].addr=_this.editForm.addr;
break;
}
}
_this.editFormVisible = false;
_this.getUsers();
});
} }
},1000);
}); });
@ -287,6 +253,9 @@
this.editForm.birth = ''; this.editForm.birth = '';
this.editForm.addr = ''; this.editForm.addr = '';
} }
},
mounted() {
this.getUsers();
} }
} }
</script> </script>

7
src/pages/nav1/user.vue
View File

@ -7,7 +7,7 @@
<el-input v-model="filters.name" placeholder="姓名"></el-input> <el-input v-model="filters.name" placeholder="姓名"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button v-on:click="getUser">查询</el-button>
<el-button type="primary" v-on:click="getUser">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
@ -15,7 +15,7 @@
<!--列表--> <!--列表-->
<template> <template>
<el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;"> <el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;">
<el-table-column type="index" width="50">
<el-table-column type="index" width="60">
</el-table-column> </el-table-column>
<el-table-column prop="name" label="姓名" width="180" sortable> <el-table-column prop="name" label="姓名" width="180" sortable>
</el-table-column> </el-table-column>
@ -34,6 +34,7 @@
</template> </template>
<script> <script>
import { getUserList } from '../../api/api'; import { getUserList } from '../../api/api';
import NProgress from 'nprogress'
export default { export default {
data() { data() {
return { return {
@ -56,9 +57,11 @@
name: this.filters.name name: this.filters.name
}; };
this.loading = true; this.loading = true;
NProgress.start();
getUserList(para).then((res) => { getUserList(para).then((res) => {
this.users = res.data.users; this.users = res.data.users;
this.loading = false; this.loading = false;
NProgress.done();
}); });
} }
}, },

Write Preview
Loading…
Cancel
Save