Browse Source

add mockjs

master
taylor 8 years ago
parent
commit
b520949520
  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

@ -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

@ -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

@ -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

@ -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' });
}
}
});

421
src/pages/nav1/Table.vue

@ -2,271 +2,237 @@
<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">
<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>
</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="0"></el-option>
</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>
<script>
import util from '../../common/util'
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: {
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: {
}
}
},
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);
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;
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(() => {
});
},
//
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.$confirm('确认提交吗?','提示',{}).then(()=>{
_this.editLoading=true;
_this.$refs.editForm.validate((valid) => {
if (valid) {
_this.$confirm('确认提交吗?', '提示', {}).then(() => {
_this.editLoading = true;
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>
<style scoped>

7
src/pages/nav1/user.vue

@ -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();
});
}
},

Loading…
Cancel
Save