vue后台管理系统项目实战(三)
不定期更新…
项目地址：https://gitee.com/wang_li_pingping/mallmanager
install dependencies
npm install
serve with hot reload at localhost:8080
npm run dev
build for production with minification
npm run build
build for production and view the bundle analyzer report
npm run build --report
更新内容：
分页
搜索用户
新增用户
uesr.vue
<template>
<el-card class="box-card">
<!--1.面包屑-->
<!--首页/用户管理/用户列表-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<!--2.搜索框-->
<el-row class="searchRow">
<el-col>
<el-input
placeholder="请输入内容"
clearable
v-model="queryInfo.query"
class="inputSearch">
<el-button slot="append" icon="el-icon-search" @click="queryByUsername()"></el-button>
</el-input>
<el-button type="success" @click="addUserShow()">添加用户</el-button>
</el-col>
</el-row>
<!--用户列表表格-->
<el-table
:data="userList"
style="width: 100%">
<el-table-column
type="index"
align="center"
label="序号"
width="60">
</el-table-column>
<el-table-column
prop="username"
align="center"
label="姓名"
width="80">
</el-table-column>
<el-table-column
align="center"
prop="email"
label="邮箱">
</el-table-column>
<el-table-column
align="center"
prop="mobile"
label="电话">
</el-table-column>
<el-table-column
prop="create_time"
align="center"
label="创建时间">
<template slot-scope="scope">
{{scope.row.create_time | fmtdate}}
</template>
</el-table-column>
<el-table-column
prop="role_name"
label="用户权限">
</el-table-column>
<el-table-column
prop="mg_state"
align="center"
label="用户状态">
<template slot-scope="scope">
<el-switch
v-model="scope.row.mg_state"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column
prop=""
align="center"
label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" icon="el-icon-edit" plain circle></el-button>
<el-button type="info" size="mini" icon="el-icon-check" plain circle></el-button>
<el-button type="danger" size="mini" icon="el-icon-delete" plain circle></el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[5, 10, 15, 20]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<!--添加用户弹窗-->
<el-dialog title="添加用户" :visible.sync="dialogAddUserFormVisible">
<el-form :model="addUserRuleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="addUserRuleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addUserRuleForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addUserRuleForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="addUserRuleForm.mobile"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogAddUserFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser()">确 定</el-button>
</div>
</el-dialog>
</el-card>
</template>
<script>
export default {
data () {
return {
queryInfo:{
query: '',
pagenum: 1,
pagesize: 5,
},
userList: [],
total:1,
//添加用户弹窗
dialogAddUserFormVisible:false,
addUserRuleForm:{
username:"",
password:"",
email:"",
mobile:""
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
],
}
}
},
created () {
this.getUserList()
},
methods: {
async getUserList () {
//需要授权的API 必须在请求头中使用 Authorization 字段 提供 token 令牌
const AUTH_TOKEN = localStorage.getItem('token')
this.$http.defaults.headers.common['Authorization'] = AUTH_TOKEN
const res = await this.$http.get('users', {params:this.queryInfo})
console.log(res)
if (res.status===200){
this.userList = res.data.data.users;
this.total = res.data.data.total;
this.$message.success(res.data.meta.msg)
}else{
this.$message.error(res.data.meta.msg)
}
},
//分页
//监听pagesize变化
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
this.getUserList();
},
//监听 页码值
handleCurrentChange(newSize) {
this.queryInfo.pagenum = newSize
this.getUserList();
},
//搜索用户
queryByUsername(){
this.getUserList()
},
//添加用户
addUserShow(){
this.dialogAddUserFormVisible = true
},
async addUser(){
const res = await this.$http.post('users',this.addUserRuleForm)
console.log(res,'添加用户')
if (res.status===200){
this.$message.success(res.data.meta.msg)
this.getUserList()
this.dialogAddUserFormVisible = false
}else {
this.$message.error(res.data.meta.msg)
}
//清空表单数据
Object.assign(this.$data.addUserRuleForm,this.$options.data().addUserRuleForm)
}
}
}
</script>
<style>
.box-card {
height: 100%;
}
.inputSearch {
width: 300px;
}
.searchRow {
margin-top: 20px;
}
</style>