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. 12
      src/api/api.js
  2. 85
      src/mock/mock.js
  3. 3
      src/mockdata/user.js
  4. 27
      src/pages/Login.vue
  5. 421
      src/pages/nav1/Table.vue
  6. 7
      src/pages/nav1/user.vue

12
src/api/api.js
View File

@ -2,6 +2,14 @@ import axios from 'axios';
let base = ''; 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(),

27
src/pages/Login.vue
View File

@ -8,15 +8,16 @@
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input> <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
</el-form-item> </el-form-item>
<el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox> <el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
</el-form-item>
</el-form>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
</el-form-item>
</el-form>
</template> </template>
<script> <script>
import { requestLogin } from '../api/api'; import { requestLogin } from '../api/api';
import NProgress from 'nprogress'
export default { export default {
data() { data() {
return { return {
@ -43,23 +44,29 @@
this.$refs.ruleForm2.resetFields(); this.$refs.ruleForm2.resetFields();
}, },
handleSubmit2(ev) { handleSubmit2(ev) {
var _this=this;
var _this = this;
this.$refs.ruleForm2.validate((valid) => { this.$refs.ruleForm2.validate((valid) => {
if (valid) { if (valid) {
//_this.$router.replace('/table'); //_this.$router.replace('/table');
this.logining = true; this.logining = true;
var loginParams={username:this.ruleForm2.account,password:this.ruleForm2.checkPass};
NProgress.start();
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) {
this.$router.push({path: this.$route.query.redirect});
this.$router.push({ path: this.$route.query.redirect });
} else { } else {
this.$router.push({path: '/table'});
this.$router.push({ path: '/table' });
} }
} }
}); });

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

@ -2,271 +2,237 @@
<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-column>
<el-table-column prop="name" label="姓名" width="180" sortable>
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column prop="age" label="年龄" width="100" sortable>
</el-table-column>
<el-table-column prop="birth" label="生日" width="180" sortable>
</el-table-column>
<el-table-column prop="addr" label="地址" sortable>
</el-table-column>
<el-table-column inline-template :context="_self" label="操作" width="100">
<span>
<el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" size="small" @click="handleDel(row)">删除</el-button>
<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 prop="name" label="姓名" width="180" sortable>
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column prop="age" label="年龄" width="100" sortable>
</el-table-column>
<el-table-column prop="birth" label="生日" width="180" sortable>
</el-table-column>
<el-table-column prop="addr" label="地址" sortable>
</el-table-column>
<el-table-column inline-template :context="_self" label="操作" width="140">
<span>
<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>
</template>
</el-table-column>
</el-table>
</template>
<!--分页-->
<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>
</el-col>
<!--分页-->
<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
</el-pagination>
</el-col>
<!--编辑界面-->
<el-dialog :title="editFormTtile" v-model="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性别">
<!--<el-select v-model="editForm.sex" placeholder="请选择性别">
<!--编辑界面-->
<el-dialog :title="editFormTtile" v-model="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="性别">
<!--<el-select v-model="editForm.sex" placeholder="请选择性别">
<el-option label="男" :value="1"></el-option> <el-option label="男" :value="1"></el-option>
<el-option label="女" :value="0"></el-option> <el-option label="女" :value="0"></el-option>
</el-select>--> </el-select>-->
<el-radio-group v-model="editForm.sex">
<el-radio class="radio" :label="1">男</el-radio>
<el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="editForm.addr"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取 消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">{{btnEditText}}</el-button>
</div>
</el-dialog>
</section>
<el-radio-group v-model="editForm.sex">
<el-radio class="radio" :label="1">男</el-radio>
<el-radio class="radio" :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
</el-form-item>
<el-form-item label="生日">
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="editForm.addr"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取 消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">{{btnEditText}}</el-button>
</div>
</el-dialog>
</section>
</template> </template>
<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 {
data() {
return {
formInline: {
user: ''
export default {
data() {
return {
filters: {
name: ''
}, },
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
value1:'',
editFormVisible:false,//编辑界面显是否显示
editFormTtile:'编辑',//编辑界面标题
users: [],
total: 0,
page: 1,
listLoading: false,
editFormVisible: false,//编辑界面显是否显示
editFormTtile: '编辑',//编辑界面标题
//编辑界面数据 //编辑界面数据
editForm: { editForm: {
id:0,
id: 0,
name: '', name: '',
sex: -1, sex: -1,
age: 0, age: 0,
birth: '', birth: '',
addr: '' addr: ''
}, },
editLoading:false,
btnEditText:'提 交',
editFormRules:{
name:[
editLoading: false,
btnEditText: '提 交',
editFormRules: {
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: {
//性别显示转换 //性别显示转换
formatSex:function(row,column){
return row.sex==1?'男':row.sex==0?'女':'未知';
formatSex: function (row, column) {
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;
this.$confirm('确认删除该记录吗?', '提示', { this.$confirm('确认删除该记录吗?', '提示', {
//type: 'warning' //type: 'warning'
}).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);
_this.listLoading=false;
NProgress.done();
_this.$notify({
title: '成功',
message: '删除成功',
type: 'success'
});
let para = { id: row.id };
removeUser(para).then((res) => {
_this.listLoading = false;
NProgress.done();
_this.$notify({
title: '成功',
message: '删除成功',
type: 'success'
});
_this.getUsers();
});
break;
}
}
},1000);
}).catch(() => { }).catch(() => {
}); });
}, },
//显示编辑界面 //显示编辑界面
handleEdit:function(row){
this.editFormVisible=true;
this.editFormTtile='编辑';
this.editForm.id=row.id;
this.editForm.name=row.name;
this.editForm.sex=row.sex;
this.editForm.age=row.age;
this.editForm.birth=row.birth;
this.editForm.addr=row.addr;
handleEdit: function (row) {
this.editFormVisible = true;
this.editFormTtile = '编辑';
this.editForm.id = row.id;
this.editForm.name = row.name;
this.editForm.sex = row.sex;
this.editForm.age = row.age;
this.editForm.birth = row.birth;
this.editForm.addr = row.addr;
}, },
//编辑 or 新增 //编辑 or 新增
editSubmit:function(){
var _this=this;
editSubmit: function () {
var _this = this;
_this.$refs.editForm.validate((valid)=>{
if(valid){
_this.$confirm('确认提交吗？','提示',{}).then(()=>{
_this.editLoading=true;
_this.$refs.editForm.validate((valid) => {
if (valid) {
_this.$confirm('确认提交吗？', '提示', {}).then(() => {
_this.editLoading = true;
NProgress.start(); NProgress.start();
_this.btnEditText='提交中';
setTimeout(function(){
_this.editLoading=false;
NProgress.done();
_this.btnEditText='提 交';
_this.$notify({
title: '成功',
message: '提交成功',
type: 'success'
});
_this.editFormVisible = false;
_this.btnEditText = '提交中';
if(_this.editForm.id==0){
//新增
_this.tableData.push({
id:new Date().getTime(),
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
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;
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;
}
}
}
},1000);
_this.editFormVisible = false;
_this.getUsers();
});
} else {
//编辑
let para = {
id: _this.editForm.id,
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,
};
editUser(para).then((res) => {
_this.editLoading = false;
NProgress.done();
_this.btnEditText = '提 交';
_this.$notify({
title: '成功',
message: '提交成功',
type: 'success'
});
_this.editFormVisible = false;
_this.getUsers();
});
}
}); });
} }
@ -274,21 +240,24 @@
}, },
//显示新增界面 //显示新增界面
handleAdd:function(){
var _this=this;
handleAdd: function () {
var _this = this;
this.editFormVisible = true;
this.editFormTtile = '新增';
this.editFormVisible=true;
this.editFormTtile='新增';
this.editForm.id=0;
this.editForm.name='';
this.editForm.sex=1;
this.editForm.age=0;
this.editForm.birth='';
this.editForm.addr='';
this.editForm.id = 0;
this.editForm.name = '';
this.editForm.sex = 1;
this.editForm.age = 0;
this.editForm.birth = '';
this.editForm.addr = '';
} }
}
}
},
mounted() {
this.getUsers();
}
}
</script> </script>
<style scoped> <style scoped>

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