vue项目之菜单管理项目实现
1.背景
2.菜单导航实现
代码:
<template>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
</el-breadcrumb>
</template> <script>
export default {
name: "User"
}
</script> <style scoped> </style>
3.实现搜索输入框
代码:
<template>
<div>
<!-- 导航区域-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
</el-breadcrumb> <!--卡片视图区-->
<el-card>
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入查询的用户名">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加</el-button>
</el-col> </el-row> </el-card>
</div> </template> <script>
export default {
name: "User"
}
</script> <style scoped> </style>
4.简单列表显示
<template>
<div>
<!-- 导航区域-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
</el-breadcrumb> <!--卡片视图区-->
<el-card>
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入查询的用户名">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加</el-button>
</el-col>
</el-row>
</el-card> <!-- 表格区-->
<el-table
:data="tableData"
stripe
border
style="width: 100%">
<el-table-column prop="username" label="用户名" ></el-table-column>
<el-table-column prop="role_name" label="角色" ></el-table-column>
<el-table-column prop="mobile" label="手机" ></el-table-column>
<el-table-column prop="email" label="邮箱" ></el-table-column>
<el-table-column prop="mg_state" label="状态" ></el-table-column>
<el-table-column label="操作" ></el-table-column>
</el-table>
</div>
</template> <script>
export default {
name: "User",
created() {
this.getTableData()
},
data() {
return {
// 数据列表
tableData: [],
// 总共条数
total:0,
// 查询对象
queryObj: {
query: '',
pagenum: 1,
pagesize: 10
}
}
},
methods: {
// 获取列表数据
async getTableData() {
const {data: result} = await this.$http.get('users', {params: this.queryObj})
console.log(result)
if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
this.tableData = result.data.users
this.total= result.data.total
}
}
}
</script> <style scoped> </style>
5.编号显示
6.状态显示
代码:
<template>
<div>
<!-- 导航区域-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
</el-breadcrumb> <!--卡片视图区-->
<el-card>
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入查询的用户名">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加</el-button>
</el-col>
</el-row>
</el-card> <!-- 表格区-->
<el-table
:data="tableData"
stripe
border
style="width: 100%">
<el-table-column label="序号" type="index"></el-table-column>
<el-table-column prop="username" label="用户名" ></el-table-column>
<el-table-column prop="role_name" label="角色" ></el-table-column>
<el-table-column prop="mobile" label="手机" ></el-table-column>
<el-table-column prop="email" label="邮箱" ></el-table-column>
<el-table-column label="状态" >
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" >
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" ></el-table-column>
</el-table>
</div>
</template> <script>
export default {
name: "User",
created() {
this.getTableData()
},
data() {
return {
// 数据列表
tableData: [],
// 总共条数
total:0,
// 查询对象
queryObj: {
query: '',
pagenum: 1,
pagesize: 10
}
}
},
methods: {
// 获取列表数据
async getTableData() {
const {data: result} = await this.$http.get('users', {params: this.queryObj})
console.log(result)
if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
this.tableData = result.data.users
this.total= result.data.total
}
}
}
</script> <style scoped> </style>
7.操作栏按钮显示
8.按钮提示
9.分页实现
代码:
<template>
<div>
<!-- 导航区域-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
</el-breadcrumb> <!--卡片视图区-->
<el-card>
<!-- 条件查询-->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入查询的用户名">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加</el-button>
</el-col>
</el-row>
<!-- 表格区-->
<el-table
:data="tableData"
stripe
border
style="width: 100%">
<el-table-column label="序号" type="index"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="role_name" label="角色"></el-table-column>
<el-table-column prop="mobile" label="手机"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
<!-- 按钮文字提示-->
<el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>
</el-tooltip>
</el-table-column>
</el-table>
<!-- 分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagenum"
:page-sizes="[2, 3, 10, 20]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
</div>
</template> <script>
export default {
name: "User",
created() {
this.getTableData()
},
data() {
return {
// 数据列表
tableData: [],
// 总共条数
total: 0,
// 查询对象
queryObj: {
query: '',
pagenum: 1,
pagesize: 10
}
}
},
methods: {
// 获取列表数据
async getTableData() {
const {data: result} = await this.$http.get('users', {params: this.queryObj})
console.log(result)
if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
this.tableData = result.data.users
this.total = result.data.total
},
// 每页显示条数改变
handleSizeChange(newSize){
this.queryObj.pagesize=newSize
this.getTableData()
},
// 当前页改变
handleCurrentChange(newPage){
this.queryObj.pagenum=newPage
this.getTableData()
}
}
}
</script> <style scoped> </style>
10.高级查询条件实现
1.绑定查询参数
2.点击图标触发事件
3.添加清除数据库按钮
4.清除数据时触发查询
11.状态修改实现
// 状态改变是触发
async changeState(rowObj) {
const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`)
console.log(result)
if (result.meta.status !== 200) {
// 重置状态
rowObj.mg_state = !rowObj.mg_state
// 消息提示
return this.$message.error(result.meta.msg)
}
// 状态修改成功
return this.$message.success('状态修改成功')
}
12.删除实现
1.确认是否删除
2.执行删除
代码：
<template>
<div>
<!-- 导航区域-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
</el-breadcrumb> <!--卡片视图区-->
<el-card>
<!-- 条件查询-->
<el-row :gutter="20">
<el-col :span="8">
<el-input v-model="queryObj.query" placeholder="请输入查询的用户名" @clear="getTableData" clearable>
<el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加</el-button>
</el-col>
</el-row>
<!-- 表格区-->
<el-table
:data="tableData"
stripe
border
style="width: 100%">
<el-table-column label="序号" type="index"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="role_name" label="角色"></el-table-column>
<el-table-column prop="mobile" label="手机"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="changeState(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 修改-->
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<!-- 删除-->
<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"></el-button>
<!-- 按钮文字提示-->
<el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false">
<!-- 权限修改-->
<el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagenum"
:page-sizes="[2, 3, 10, 20]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
</div>
</template> <script>
export default {
name: "User",
created() {
this.getTableData()
},
data() {
return {
// 数据列表
tableData: [],
// 总共条数
total: 0,
// 查询对象
queryObj: {
query: '',
pagenum: 1,
pagesize: 10
}
}
},
methods: {
// 获取列表数据
async getTableData() {
const {data: result} = await this.$http.get('users', {params: this.queryObj})
console.log(result)
if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
this.tableData = result.data.users
this.total = result.data.total
},
// 每页显示条数改变
handleSizeChange(newSize) {
this.queryObj.pagesize = newSize
this.getTableData()
},
// 当前页改变
handleCurrentChange(newPage) {
this.queryObj.pagenum = newPage
this.getTableData()
},
// 状态改变是触发
async changeState(rowObj) {
const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`)
console.log(result)
if (result.meta.status !== 200) {
// 重置状态
rowObj.mg_state = !rowObj.mg_state
// 消息提示
return this.$message.error(result.meta.msg)
}
// 状态修改成功
return this.$message.success('状态修改成功')
},
// 删除用户
async deleteById(id) {
// 确认是否删除
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err);
// 如果用户确认删除，则返回值为字符串 confirm
// 如果用户取消了删除，则返回值为字符串 cancel
if (confirmResult !== 'confirm') return this.$message.error('取消删除') const {data: result} = await this.$http.delete(`users/` + id)
console.log(result)
if (result.meta.status !== 200) {
// 消息提示
return this.$message.error(result.meta.msg)
}
// 重新查询列表
this.getTableData()
// 删除成功
return this.$message.success('删除成功')
}
}
}
</script> <style scoped> </style>
13.新增实现
1.弹出新增对话框
2.执行新增
3.回到列表
代码:
<template>
<div>
<!-- 导航区域-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表列表</el-breadcrumb-item>
</el-breadcrumb> <!--卡片视图区-->
<el-card>
<!-- 条件查询-->
<el-row :gutter="20">
<el-col :span="8">
<el-input v-model="queryObj.query" placeholder="请输入查询的用户名" @clear="getTableData" clearable>
<el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="addUser">添加</el-button>
</el-col>
</el-row>
<!-- 表格区-->
<el-table
:data="tableData"
stripe
border
style="width: 100%">
<el-table-column label="序号" type="index"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
<el-table-column prop="role_name" label="角色"></el-table-column>
<el-table-column prop="mobile" label="手机"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="changeState(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!-- 修改-->
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<!-- 删除-->
<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"></el-button>
<!-- 按钮文字提示-->
<el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false">
<!-- 权限修改-->
<el-button type="warning" icon="el-icon-star-off" size="mini"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryObj.pagenum"
:page-sizes="[2, 3, 10, 20]"
:page-size="queryObj.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
<!-- 增加用户对话框-->
<el-dialog title="新增用户" :visible.sync="dialogVisibleAddUser" width="50%" @close="resetForm('addFormRef')">
<!-- 输入框-->
<el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="70px">
<!-- 用户名 prop="username" 与表单验证属性对应-->
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<!-- 邮箱 -->
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<!-- 手机 -->
<el-form-item label="手机" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item>
<el-button type="primary" @click="addUserData">新建</el-button>
<el-button type="info" @click="dialogVisibleAddUser=false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template> <script>
export default {
name: "User",
created() {
this.getTableData()
},
data() {
return {
// 添加用户对象
addForm: {
username: '',
password: '',
email: '',
mobile: ''
},
// 用户规则
addRules: {
username: [
{required: true, message: '请输入用户名称', trigger: 'blur'},
{min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
email: [
{required: true, message: '请输入邮箱', trigger: 'blur'},
{min: 3, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
mobile: [
{required: true, message: '请输入手机号', trigger: 'blur'},
{min: 11, max: 11, message: '长度为11位', trigger: 'blur'}
],
},
// 是否显示新增对话框
dialogVisibleAddUser: false,
// 数据列表
tableData: [],
// 总共条数
total: 0,
// 查询对象
queryObj: {
query: '',
pagenum: 1,
pagesize: 10
}
}
},
methods: {
// 获取列表数据
async getTableData() {
const {data: result} = await this.$http.get('users', {params: this.queryObj})
console.log(result)
if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
this.tableData = result.data.users
this.total = result.data.total
},
// 每页显示条数改变
handleSizeChange(newSize) {
this.queryObj.pagesize = newSize
this.getTableData()
},
// 当前页改变
handleCurrentChange(newPage) {
this.queryObj.pagenum = newPage
this.getTableData()
},
// 状态改变是触发
async changeState(rowObj) {
const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`)
console.log(result)
if (result.meta.status !== 200) {
// 重置状态
rowObj.mg_state = !rowObj.mg_state
// 消息提示
return this.$message.error(result.meta.msg)
}
// 状态修改成功
return this.$message.success('状态修改成功')
},
// 删除用户
async deleteById(id) {
// 确认是否删除
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err);
// 如果用户确认删除，则返回值为字符串 confirm
// 如果用户取消了删除，则返回值为字符串 cancel
if (confirmResult !== 'confirm') return this.$message.error('取消删除')
const {data: result} = await this.$http.delete(`users/` + id)
console.log(result)
if (result.meta.status !== 200) {
// 消息提示
return this.$message.error(result.meta.msg)
}
// 重新查询列表
this.getTableData()
// 删除成功
return this.$message.success('删除成功')
},
// 显示添加用户弹框
addUser() {
// 打开弹框
this.dialogVisibleAddUser = true
},
// 保存用户数据
addUserData() {
// 数据校验
this.$refs.addFormRef.validate(async (valid) => {
if (!valid) return ;
// 发出请求
let {data: result} = await this.$http.post('users', this.addForm)
console.log(result)
if (result.meta.status !== 201){
this.$message.error(result.meta.msg)
return
}
this.$message.success("新增成功")
// 关闭弹框
this.dialogVisibleAddUser=false
// 查询数据
this.getTableData()
})
},
// 表单重置
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script> <style scoped> </style>
14.修改实现
完美!
vue项目之菜单管理项目实现的更多相关文章
- saltstack主机管理项目：主机管理项目架构设计(二)
1.salt架构图 https://docs.saltstack.com/en/getstarted/system/plugins.html plug-ins(左边):场景可插拔 subsystem- ...
- saltstack主机管理项目：主机管理项目需求分析（一）
1.场景: 我现在又一台裸机要实现一下任务 2.配置管理: 1.装上nginx,mysql 2.nginx用我指定的配置文件 3.mysql用户 4.设置一个默认的数据库访问权限 5.启动mysql ...
- vue，vuex的后台管理项目架子structure-admin，后端服务nodejs
之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能 接下来,针对structure-admin-web的不足,进行了补充,开发了具有登 ...
- vue初始化项目，构建vuex的后台管理项目架子
构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...
- 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo
¶项目分析 一个完整的网站服务架构,包括: 1.web frame ---这里应用express框架 2.web server ---这里应用nodejs 3.Database ---这里 ...
- 关于vue项目管理项目的架构管理平台
关于vue项目管理项目的架构管理平台 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/faq 31.4k 次浏览 完整项目地址: ...
- vue项目导航菜单实现
vue项目导航菜单问题 目标:横向菜单点击跳转,颜色变换,刷新可保持状态 // 模板template中通过循环菜单列表生成,动态类名改变颜色 <li v-for="(item, ind ...
- 前端架构之路：使用Vue.js开始第一个项目
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...
- Vue.js开始第一个项目
前端架构之路:使用Vue.js开始第一个项目 Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...
- luffy项目：基于vue与drf前后台分离项目（2）
user模块User表 创建user模块 前提:在 luffy 虚拟环境下 1.终端从项目根目录进入apps目录 >: cd luffyapi & cd apps 2.创建app > ...
随机推荐
- SpringMVC 工作原理？
a.客户端发送请求到 DispatcherServlet b.DispatcherServlet 查询 handlerMapping 找到处理请求的 Controller c.Controller 调 ...
- springboot项目添加logback日志
1.application.yml 配置日志文件路径: logging: config: classpath:logback.xml file: /usr/local/log/projectName/ ...
- String忽略大小写方法compareToIgnoreCase源码及Comparator自定义比较器
String忽略大小写方法compareToIgnoreCase源码及Comparator自定义比较器 //源码 public int compareToIgnoreCase(String str) ...
- JavaScript：JS对象_Array
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- TRL(Transformer Reinforcement Learning) PPO Trainer 学习笔记
(1) PPO Trainer TRL支持PPO Trainer通过RL训练语言模型上的任何奖励信号.奖励信号可以来自手工制作的规则.指标或使用奖励模型的偏好数据.要获得完整的示例,请查看examp ...
- arm linux 移植 i2c-tools 与 简单使用
介绍 i2c-tool是一个专门调试i2c的开源工具.可获取挂载的设备及设备地址,还可以在对应的设备指定寄存器设置值或者获取值等功能,对于驱动以及应用开发者比较友好. i2c-tool:v3.0.3 ...
- Coap 协议学习：具体协议介绍具体
协议框架 CoAP默认运行在UDP上,但它也支持运行在SMS,TCP等数据传输层上.本文主要是基于UDP上的CoAP协议介绍 1.消息模型 Messages COAP协议通信是通过在UDP上传输消息类 ...
- Linux Redis 服务设置开机自启动
@ 目录 前言 一.准备工作 二.操作步骤 2.1 修改redis.conf文件 2.2 创建启动脚本 2.3 设置redis 脚本权限 2.4 设置开机启动 2.5 验证 总结 前言 请各大网友尊重 ...
- 使用flume将数据sink到HBase
===========>先创建Hbase表和列族<================案例1:源数据一行对应Hbase的一列存储(hbase-1.12没有问题)================ ...
- C# 判断字符串是否为整数
/// <summary> /// 判断一个字符串是否是正整数 /// </summary> /// <param name="s"></ ...