前端学习（1932）vue之电商管理系统电商系统之tree树形控件

目录结构

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
import Welcome from './components/Welcome.vue'
import Users from './components/user/Users.vue'
import Right from './components/power/Right.vue'
import Roles from './components/power/Roles.vue'
Vue.use(Router)const router = new Router({routes: [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',component: Home,redirect: '/welcome',children: [{path: '/welcome',component: Welcome}, {path: '/users',component: Users},{path: '/rights',component: Right},{path: '/roles',component: Roles}]}]
});
//挂载路由导航守卫
router.beforeEach((to, from, next) => {if (to.path === '/login') return next();//获取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next();
})export default router

<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/logo.png"></div><!-- 表单区域--><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><!-- 登录区域--><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div>
</div></template><script>
export default{data(){return{//这是登录表单的数据loginForm:{username:'geyao',password:'12345678'},// 表单验证loginFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入用户密码', trigger: 'blur' },{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }]}}},methods:{resetLoginForm(){// console.log(this)this.$refs.loginFormRef.resetFields();},login(){this.$refs.loginFormRef.validate(async valid =>{if(!valid) return;const {data:res}=await this.$http.post('login',this.loginForm);if(res.meta.status!==200) return this.$message.error('登录失败');this.$message.success('登录成功');// 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; //   1.1 项目中出现了登录之外的其他API接口，必须在登陆之后才能访问//   1.2 token 只应在当前网站打开期间生效，所以将token保存在window.sessionStorage.setItem('token', res.data.token)// 2、通过编程式导航跳转到后台主页, 路由地址为：/homethis.$router.push('/home')});}}
}
</script><style lang="less" scoped>
.login_container {background-color: #2b4b6b;height: 100%;
}
.login_box {width: 450px;height: 360px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);background-color: #fff;
}.avatar_box {width: 130px;height: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}.login_form {position: absolute;bottom: 60px;width: 100%;padding: 0 20px;box-sizing: border-box;
}.btns {display: flex;justify-content: center;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入字体图标
import './assets/fonts/iconfont.css'
Vue.config.productionTip = false
//导入全局样式
import './assets/css/global.css'import axios from 'axios'
Vue.prototype.$http=axios
axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/"
// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {// console.log(config)// 为请求头对象，添加token验证的Authorization字段config.headers.Authorization = window.sessionStorage.getItem('token')// 在最后必须 return configreturn config
})
Vue.config.productionTip=false;
new Vue({router,render: h => h(App)
}).$mount('#app')

global.css

/* 全局样式 */
html,
body,
#app {height: 100%;margin: 0;padding: 0;}.el-breadcrumb {margin-bottom: 15px;font-size: 12px;
}.el-card {box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}.el-table {margin-top: 15px;font-size: 12px;
}.el-pagination {margin-top: 15px;
}

element.js

import Vue from 'vue'//弹框提示
import {Message,Button,Form,FormItem,Input,Container,Header,Aside,Main,Menu,Submenu,MenuItemGroup,MenuItem,Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,Tooltip,Pagination,Dialog,MessageBox,Tag,Tree
} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.prototype.$confirm=MessageBox
Vue.prototype.$message = Message

Home.vue

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
import Welcome from './components/Welcome.vue'
import Users from './components/user/Users.vue'
Vue.use(Router)const router = new Router({routes: [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',component: Home,redirect: '/welcome',children: [{path: '/welcome',component: Welcome}, {path: '/users',component: Users}]}]
});
//挂载路由导航守卫
router.beforeEach((to, from, next) => {if (to.path === '/login') return next();//获取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next();
})export default router

.prettierrc

{"semi":false,"singleQuote":true
}

eslintrc.js

module.exports = {root: true,env: {node: true},extends: ['plugin:vue/essential','@vue/standard'],parserOptions: {parser: 'babel-eslint'},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','space-before-function-paren':0}
}

welcome.vue

<template><div><h3>欢迎</h3></div>
</template>

Users.vue

<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="7"><el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList"><el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button></el-input></el-col><el-col :span="4"><el-button type="primary" @click="addDialogVisible=true">添加用户</el-button></el-col></el-row><el-table border stripe :data="userlist"><el-table-column type="index" label="#"></el-table-column><el-table-column prop="username" label="姓名"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="mobile" label="电话"></el-table-column><el-table-column prop="role_name" label="角色"></el-table-column><el-table-column label="状态"><template slot-scope="scope"><el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作" width="180px"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"size="mini"circle@click="showEditDialog(scope.row.id)"></el-button><el-button type="danger" icon="el-icon-delete" size="mini" circle@click="removeUserById(scope.row.id)"></el-button><el-tooltipclass="item"effect="dark"content="角色分配":enterable="false"placement="top"><el-button type="warning" icon="el-icon-setting" size="mini" circle></el-button></el-tooltip></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pagenum":page-sizes="[2, 5, 10, 15]":page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-card><!-- 添加用户的对话框 --><el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"><!-- 内容主体 --><el-form :model="addForm" ref="addFormRef" :rules="addFormRules" label-width="70px"><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><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="addUser">确 定</el-button></span></el-dialog><!-- 修改用户的对话框 --><el-dialogtitle="修改用户信息":visible.sync="editDialogVisible"width="50%"@close="editDialogClosed"><el-form :model="editForm" ref="editUserFormRef" :rules="editFormRules" label-width="70px"><el-form-item label="用户名"><el-input v-model="editForm.username" disabled></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="editForm.email"></el-input></el-form-item><el-form-item label="手机" prop="mobile"><el-input v-model="editForm.mobile"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="editUserInfo">确 定</el-button></span></el-dialog></div>
</template><style scoped="less" scoped>
</style><script>
export default {data() {// 自定义邮箱规则var checkEmail = (rule, value, callback) => {const regEmail = /^\w+@\w+(\.\w+)+$/if (regEmail.test(value)) {// 合法邮箱return callback()}callback(new Error('请输入合法邮箱'))}// 自定义手机号规则var checkMobile = (rule, value, callback) => {const regMobile = /^1[34578]\d{9}$/if (regMobile.test(value)) {return callback()}// 返回一个错误提示callback(new Error('请输入合法的手机号码'))}return {queryInfo: {query: '',pagenum: 1,pagesize: 2,},userlist: [],total: 0,addDialogVisible: false,addForm: {username: '',password: '',email: '',mobile: '',},addFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{min: 2,max: 10,message: '用户名的长度在2～10个字',trigger: 'blur',},],password: [{ required: true, message: '请输入用户密码', trigger: 'blur' },{min: 6,max: 18,message: '用户密码的长度在6～18个字',trigger: 'blur',},],email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' },],mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' },],},editFormRules: {email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' },],mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' },],},editDialogVisible: false,editForm: {},}},created() {this.getUserList()},methods: {async getUserList() {const { data: res } = await this.$http.get('users', {params: this.queryInfo,})if (res.meta.status !== 200) {return this.$message.error('获取用户列表失败！')}this.userlist = res.data.usersthis.total = res.data.totalconsole.log(res)},// 监听修改用户对话框的关闭事件editDialogClosed() {this.$refs.editUserFormRef.resetFields()},// 监听 pagesize改变的事件handleSizeChange(newSize) {// console.log(newSize)this.queryInfo.pagesize = newSizethis.getUserList()},// 监听 页码值 改变事件handleCurrentChange(newSize) {// console.log(newSize)this.queryInfo.pagenum = newSizethis.getUserList()},async userStateChanged(userInfo) {// console.log(userInfo)const { data: res } = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)if (res.meta.status !== 200) {userInfo.mg_state = !userInfo.mg_statereturn this.$message.error('更新用户状态失败')}this.$message.success('更新用户状态成功！')},// 监听 添加用户对话框的关闭事件addDialogClosed() {this.$refs.addFormRef.resetFields()},editUserInfo() {this.$refs.editUserFormRef.validate(async (valid) => {if (!valid) returnconst { data: res } = await this.$http.put('users/' + this.editForm.id,{email: this.editForm.email,mobile: this.editForm.mobile,})if (res.meta.status !== 200) {this.$message.error('更新用户信息失败！')}// 隐藏添加用户对话框this.editDialogVisible = falsethis.$message.success('更新用户信息成功！')this.getUserList()})},// 编辑用户信息async showEditDialog(id) {const { data: res } = await this.$http.get('users/' + id)if (res.meta.status !== 200) {return this.$message.error('查询用户信息失败！')}this.editForm = res.datathis.editDialogVisible = true},// 添加用户addUser() {// 提交请求前，表单预验证this.$refs.addFormRef.validate(async (valid) => {// console.log(valid)// 表单预校验失败if (!valid) returnconst { data: res } = await this.$http.post('users', this.addForm)if (res.meta.status !== 201) {this.$message.error('添加用户失败！')}this.$message.success('添加用户成功！')// 隐藏添加用户对话框this.addDialogVisible = falsethis.getUserList()})}, // 删除用户async removeUserById (id) {const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).catch(err => err)// 点击确定 返回值为：confirm// 点击取消 返回值为： cancelif (confirmResult !== 'confirm') {return this.$message.info('已取消删除')}const { data: res } = await this.$http.delete('users/' + id)if (res.meta.status !== 200) return this.$message.error('删除用户失败！')this.$message.success('删除用户成功！')this.getUserList()},},
}
</script>

Right.vue

<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-table :data="rightsList"><el-table-column type="index" label="#"></el-table-column><el-table-column label="权限名称" prop="authName"></el-table-column><el-table-column label="路径" prop="path"></el-table-column><el-table-column label="权限等级" prop="level"><template slot-scope="scope"><el-tag v-if="scope.row.level === '0'">一级</el-tag><el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag><el-tag type="danger" v-else>三级</el-tag></template></el-table-column></el-table></el-card></div>
</template><style lang="less" scoped>
</style><script>
export default {data(){return{//权限列表rightsList:[]}},created(){this.getRightList()},methods:{//获取权限列表async getRightList(){const {data:res}= await this.$http.get('rights/list')if(res.meta.status!==200){return this.$message.console.error("获取权限列表失败");}this.rightsList=res.data}}
}
</script>

Roles.vue

<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><el-col><el-button type="primary">添加角色</el-button></el-col></el-row><el-table :data="roleslist" border stripe><el-table-column type="expand"><template slot-scope="scope"><el-row:class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']"  v-for="(item1, i1) in scope.row.children":key="item1.id"><!-- 一级权限 --><el-col :span="5"><el-tag closable @close="removeRightById(scope.row, item1.id)">{{ item1.authName}}</el-tag><i class="el-icon-caret-right"></i></el-col><el-col :span="19"><el-row :class="[i2 === 0 ? '' : 'bdtop','vcenter']"v-for="(item2, i2) in item1.children":key="item2.id"><el-col :span="6 "><el-tagtype="success"closable@close="removeRightById(scope.row, item2.id)">{{ item2.authName }}</el-tag><i class="el-icon-caret-right"></i></el-col><el-col :span="18"><el-tagtype="warning"v-for="(item3) in item2.children":key="item3.id"closable@close="removeRightById(scope.row,item3.id)">{{ item3.authName}}</el-tag></el-col></el-row></el-col></el-row><!--<pre>{{scope.row}}</pre>--></template></el-table-column><!-- 索引列 --><el-table-column type="index" label="#"></el-table-column><el-table-column label="角色名称" prop="roleName"></el-table-column><el-table-column label="角色描述" prop="roleDesc"></el-table-column><el-table-column label="操作" width="300px"><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" >删除</el-button><el-buttontype="warning"icon="el-icon-setting"size="mini"@click="showSetRightDialog()">分配权限</el-button></template></el-table-column></el-table></el-card><!-- 分配权限 --><el-dialogtitle="分配权限":visible.sync="setRightDialogVisible"width="50%"><span slot="footer" class="dialog-footer"><el-button @click="setRightDialogVisible = false">取 消</el-button><el-button type="primary" @click="setRightDialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>
export default {data(){return{//所有角色列表数据roleslist:[],setRightDialogVisible:false,rightslist:[]}},created(){this.getRolesList()},methods:{async getRolesList (role,rightId) {const { data: res } = await this.$http.get('roles')if (res.meta.status !== 200) {return this.$message.error('获取角色列表失败！')}this.roleslist = res.dataconsole.log(this.roleslist)},async removeRightById () {// 弹框提示 删除const confirmResult = await this.$confirm('此操作将永久删除该权限, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).catch(err => err)// 点击确定 返回值为：confirm// 点击取消 返回值为： cancelif (confirmResult !== 'confirm') {return this.$message.info('已取消权限删除')}const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)if (res.meta.status !== 200) {return this.$message.error('删除权限失败！')}this.roleslist = res.data//   不建议使用//this.getRolesList()role.children=res.data},async showSetRightDialog(){// 获取角色的所有权限const { data: res } = await this.$http.get('rights/tree')if (res.meta.status !== 200) {return this.$message.error('获取权限数据失败！')}//   获取权限树this.rightslist = res.data//   console.log(res)//   递归获取三级节点的id//this.getLeafkeys(role, this.defKeys)this.setRightDialogVisible = trueconsole.log(this.rightslist)}}
}
</script><style lang="less" scoped>
.el-tag {margin: 7px;
}.bdtop {border-top: 1px solid #eee;
}
.bdbottom {border-bottom: 1px solid #eee;
}
.vcenter {display: flex;align-items: center;
}
</style>

运行结果

前端学习（1932）vue之电商管理系统电商系统之tree树形控件相关推荐

vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
vue 树形控件可编辑_vue.js element-ui组件改iview 第一期 tree树形控件
此为第一期修改,后期也适配了其他组件,更多查看我得文章 element-ui组件的tree树形控件修改源码改为iview组件实现原理修改了element-ui源码,把源码里面的tree模块提取出来 ...
vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...
前端VUE【实战】—— antd tree树形控件进行增删改查父子节点
个人博客:前端江太公前言 antd 对树形控件目录进行增删改查最近在用Ant Design写一个后台,遇到的需求就是实现一个可动态增减和编辑子节点的Tree. 实现的效果如下: 可以增加父子节点 ...
理解Vue递归组件，实现Tree树形控件实例~
思考了两天时间,准备仿照ant-design-vue实现一个基于vue的树形控件.主要用到了vue递归组件思想.input的CheckBox类型输入框的使用. 需求能够将传入的Json数据生成树形目 ...
前端学习（1933）vue之电商管理系统电商系统之优化树形控件
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
【vue】使用vue+element搭建项目，Tree树形控件使用
目录一.安装依赖二.常用属性.事件三.demo应用 html代码属性用法 3.2.1 :default-expanded-keys(默认展开项) 3.2.2 :props="defa ...
Ant Design Vue 中 Tree 树形控件 defaultExpandAll 设置无效
问题: 在代码中设置了default-expand-all属性树形结构还是没有展开原因: 因为default-expand-all属性是用来设置默认值的,而初始值treeData通常情况下是需要调 ...
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...

前端学习（1932）vue之电商管理系统电商系统之tree树形控件

前端学习（1932）vue之电商管理系统电商系统之tree树形控件相关推荐

最新文章

热门文章