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
Split 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. 313
      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 = '';
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 MockAdapter from 'axios-mock-adapter';
import { LoginUsers, Users } from '../mockdata/user';
let _Users = Users;
export default {
/**
@ -19,6 +20,7 @@ export default {
msg: 'failure'
});
//登录
mock.onPost('/login').reply(config => {
let {username, password} = JSON.parse(config.data);
return new Promise((resolve, reject) => {
@ -33,17 +35,18 @@ export default {
});
if (hasUser) {
resolve([200, { code: 200, msg: '请求成功!!!', user }]);
resolve([200, { code: 200, msg: '请求成功', user }]);
} else {
resolve([200, { code: 500, msg: '用户名或密码错误!!!' }]);
resolve([200, { code: 500, msg: '账号或密码错误' }]);
}
}, 500);
});
});
//获取用户列表
mock.onGet('/user/list').reply(config => {
let {name} = config.params;
let mockUsers = Users.filter(user => {
let mockUsers = _Users.filter(user => {
if (name && user.name.indexOf(name) == -1) return false;
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 userCount = 8;
for (let i = 0; i < userCount; i++) {
for (let i = 0; i < 86; i++) {
Users.push(Mock.mock({
id: Mock.Random.guid(),
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-form-item>
<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>
<script>
import { requestLogin } from '../api/api';
import NProgress from 'nprogress'
export default {
data() {
return {
@ -43,23 +44,29 @@
this.$refs.ruleForm2.resetFields();
},
handleSubmit2(ev) {
var _this=this;
var _this = this;
this.$refs.ruleForm2.validate((valid) => {
if (valid) {
//_this.$router.replace('/table');
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 => {
this.logining = false;
NProgress.done();
let { msg, code, user } = data;
if (code !== 200) {
this.$message.error(msg);
this.$notify({
title: '错误',
message: msg,
type: 'error'
});
} else {
localStorage.setItem('user', JSON.stringify(user));
if (this.$route.query.redirect) {
this.$router.push({path: this.$route.query.redirect});
this.$router.push({ path: this.$route.query.redirect });
} else {
this.$router.push({path: '/table'});
this.$router.push({ path: '/table' });
}
}
});

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

@ -2,52 +2,51 @@
<section>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-form :inline="true" :model="formInline">
<el-form :inline="true" :model="filters">
<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-button>查询</el-button>
<el-button type="primary" v-on:click="getUsers">查询</el-button>
</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>
</el-col>
<!--列表-->
<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">
<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 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>
</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-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>
@ -76,196 +75,163 @@
<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-dialog>
</section>
</template>
<script>
import util from '../../common/util'
import NProgress from 'nprogress'
import { getUserListPage, removeUser, editUser, addUser } from '../../api/api';
export default {
data() {
return {
formInline: {
user: ''
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: {
id:0,
id: 0,
name: '',
sex: -1,
age: 0,
birth: '',
addr: ''
},
editLoading:false,
btnEditText:'提 交',
editFormRules:{
name:[
editLoading: false,
btnEditText: '提 交',
editFormRules: {
name: [
{ 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: {
//性别显示转换
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();
},
//删除记录
handleDel:function(row){
//获取用户列表
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) {
//console.log(row);
var _this=this;
var _this = this;
this.$confirm('确认删除该记录吗?', '提示', {
//type: 'warning'
}).then(() => {
_this.listLoading=true;
_this.listLoading = true;
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;
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(() => {
});
},
//显示编辑界面
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 新增
editSubmit:function(){
var _this=this;
editSubmit: function () {
var _this = this;
_this.$refs.editForm.validate((valid)=>{
if(valid){
_this.$refs.editForm.validate((valid) => {
if (valid) {
_this.$confirm('确认提交吗？','提示',{}).then(()=>{
_this.editLoading=true;
_this.$confirm('确认提交吗？', '提示', {}).then(() => {
_this.editLoading = true;
NProgress.start();
_this.btnEditText='提交中';
setTimeout(function(){
_this.editLoading=false;
_this.btnEditText = '提交中';
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.btnEditText = '提 交';
_this.$notify({
title: '成功',
message: '提交成功',
type: 'success'
});
_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,
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
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'
});
}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);
});
@ -274,19 +240,22 @@
},
//显示新增界面
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>

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

@ -7,7 +7,7 @@
<el-input v-model="filters.name" placeholder="姓名"></el-input>
</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>
</el-col>
@ -15,7 +15,7 @@
<!--列表-->
<template>
<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 prop="name" label="姓名" width="180" sortable>
</el-table-column>
@ -34,6 +34,7 @@
</template>
<script>
import { getUserList } from '../../api/api';
import NProgress from 'nprogress'
export default {
data() {
return {
@ -56,9 +57,11 @@
name: this.filters.name
};
this.loading = true;
NProgress.start();
getUserList(para).then((res) => {
this.users = res.data.users;
this.loading = false;
NProgress.done();
});
}
},

Write Preview
Loading…
Cancel
Save