目錄結構

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' import Cate from './components/goods/Cate.vue' import Params from './components/goods/Params.vue' import List from './components/goods/List.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},{path: '/categories',component: Cate}, {path: '/params',component: Params}, {path: '/goods',component: List}]}] }); //掛載路由導航守衛 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

login.vue

<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 TreeTable from "vue-table-with-tree-grid" 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; Vue.component('tree-table',TreeTable)Vue.filter('dataFormat', function (originVal) {const dt = new Date(originVal)const y = dt.getFullYear()const m = (dt.getMonth() + 1 + '').padStart(2, '0')const d = (dt.getDate() + '').padStart(2, '0')const hh = (dt.getHours() + '').padStart(2, '0')const mm = (dt.getMinutes() + '').padStart(2, '0')const ss = (dt.getSeconds() + '').padStart(2, '0')// yyyy-mm-dd hh:mm:ssreturn `${y}-${m}-$ozvdkddzhkzd ${hh}:${mm}:${ss}` }) 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@click="showSetRole(scope.row)"></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><!-- 分配角色對話框 --><el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" ><div><p>當前用戶：{{userInfo.username}}</p><p>當前角色：{{userInfo.role_name}}</p></div><p>分配角色：<el-selectv-model="selectRoleId"filterableallow-createdefault-first-optionplaceholder="請選擇文章標簽"><el-optionv-for="item in rolelist":key="item.id":label="item.roleName":value="item.id"></el-option></el-select></p><span slot="footer" class="dialog-footer"><el-button @click="setRoleDialogVisible = false">取 消</el-button><el-button type="primary" @click="saveRoleInfo">確 定</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: {},setRoleDialogVisible:false,userInfo:{},rolelist:[],selectRoleId:''}},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()},async showSetRole (userInfo) {this.userInfo = userInfo// 展示對話框之前，獲取所有角色列表const { data: res } = await this.$http.get('roles')if (res.meta.status !== 200) {return this.$message.error('獲取角色列表失敗！')}this.rolelist = res.datathis.setRoleDialogVisible = true} , // 分配角色async saveRoleInfo () {if (!this.selectRoleId) {return this.$message.error('請選擇要分配的角色')}const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectRoleId })if (res.meta.status !== 200) {return this.$message.error('更新用戶角色失敗！')}this.$message.success('更新角色成功！')this.getUserList()this.setRoleDialogVisible = false},}, } </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(scope.row)">分配權限</el-button></template></el-table-column></el-table></el-card><!-- 分配權限 --><el-dialogtitle="分配權限":visible.sync="setRightDialogVisible"width="50%"@close="setRightDialogClosede"><el-tree:data="rightslist":props="treeProps"ref="treeRef"show-checkboxnode-key="id"default-expand-all:default-checked-keys="defKeys"></el-tree><span slot="footer" class="dialog-footer"><el-button @click="setRightDialogVisible = false">取 消</el-button><el-button type="primary" @click="allotRights">確 定</el-button></span></el-dialog></div> </template><script> export default {data(){return{//所有角色列表數據roleslist:[],setRightDialogVisible:false,rightslist:[],treeProps:{label:'authName',children:'children'},defKeys:[],roleId:''}},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(role){this.roleId=role.id// 獲取角色的所有權限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.getLeafkeys(role,this.defKeys)this.setRightDialogVisible = trueconsole.log(this.rightslist)},// 通過遞歸 獲取角色下三級權限的 id, 并保存到defKeys數組getLeafkeys (node, arr) {// 沒有children屬性，則是三級節點if (!node.children) {return arr.push(node.id)}node.children.forEach(item => this.getLeafkeys(item, arr))},// 權限對話框關閉事件setRightDialogClosed () {this.rightslist = []},// 添加角色對話框的關閉addRoleDialogClosed () {this.$refs.addRoleFormRef.resetFields()},setRightDialogClosede(){this.defKeys=[];},// 分配權限async allotRights (roleId) {// 獲得當前選中和半選中的Idconst keys = [...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys()]// join() 方法用于把數組中的所有元素放入一個字符串const idStr = keys.join(',')const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr })if (res.meta.status !== 200) { return this.$message.error('分配權限失敗！') }this.$message.success('分配權限成功!')this.getRolesList()this.setRightDialogVisible = false}} } </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>

Cate.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-alert title="注意：只允許為第三級分類設置相關參數！" type="warning" show-icon :closable="false"></el-alert></el-card></div></template><script> export default {} </script><style lang="less" scoped></style>

Params.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-alert title="注意：只允許為第三級分類設置相關參數！" type="warning" show-icon :closable="false"></el-alert><!-- 選擇商品分類區域 --><el-row class="cat_opt"><el-col><span>選擇商品分類：</span><!-- 商品分類的級聯選擇框 --><el-cascaderv-model="selectedCateKeys":options="cateList":props="cateProps"@change="handleChange"></el-cascader></el-col></el-row><el-tabs v-model="activeName" @tab-click="handleTabsClick"><el-tab-pane label="動態參數" name="many"><el-buttontype="primary"size="mini":disabled="isBtnDisabled "@click="addDialogVisible=true">添加參數</el-button><el-table :data="manyTableData" border stripe><el-table-column type="expand"><template slot-scope="scope"><el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable@close="handleClose(i,scope.row)">{{item}}</el-tag><!-- 輸入Tag文本框 --><el-inputclass="input-new-tag"v-if="scope.row.inputVisible"v-model="scope.row.inputValue"ref="saveTagInput"size="small"@keyup.enter.native="handleInputConfirm(scope.row)"@blur="handleInputConfirm(scope.row)"></el-input><el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button></template></el-table-column><el-table-column type="index"></el-table-column><el-table-column label="參數名稱" prop="attr_name"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"@click="showEditDialog(scope.row.attr_id)"size="mini">編輯</el-button><el-buttontype="danger"icon="el-icon-search"size="mini"@click="removeParams(scope.row.attr_id)">刪除</el-button></template></el-table-column></el-table></el-tab-pane><el-tab-pane label="靜態屬性" name="only"><el-buttontype="primary"size="mini":disabled="isBtnDisabled"@click="addDialogVisible=true">添加屬性</el-button><el-table :data="onlyTableData" border stripe><el-table-column type="expand"><template slot-scope="scope"><el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable@close="handleClose(i,scope.row)">{{item}}</el-tag><!-- 輸入Tag文本框 --><el-inputclass="input-new-tag"v-if="scope.row.inputVisible"v-model="scope.row.inputValue"ref="saveTagInput"size="small"@keyup.enter.native="handleInputConfirm(scope.row)"@blur="handleInputConfirm(scope.row)"></el-input><el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button></template></el-table-column><el-table-column type="index"></el-table-column><el-table-column label="屬性名稱" prop="attr_name"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"size="mini"@click="showEditDialog(scope.row.attr_id)">編輯</el-button><el-buttontype="danger"icon="el-icon-search"size="mini"@click="removeParams(scope.row.attr_id)">刪除</el-button></template></el-table-column></el-table></el-tab-pane></el-tabs></el-card><el-dialog:title=" '添加' + getTitleText":visible.sync="addDialogVisible"width="50%"@close="addDialogClosed"><el-form :model="addFrom" :rules="addFromRules" ref="addFromRef" label-width="100px"><el-form-item :label="getTitleText" prop="attr_name"><el-input v-model="addFrom.attr_name"></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="addParams">確 定</el-button></span></el-dialog><el-dialog:title=" '修改' + getTitleText":visible.sync="editDialogVisible"width="50%"@close="editDialogClosed"><el-form :model="editFrom" :rules="editFromRules" ref="editFromRef" label-width="100px"><el-form-item :label="getTitleText" prop="attr_name"><el-input v-model="editFrom.attr_name"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogClosed = false">取 消</el-button><el-button type="primary" @click="editParams">確 定</el-button></span></el-dialog></div> </template><script> export default {data() {return {cateList: [],cateProps: {value: 'cat_id',label: 'cat_name',children: 'children'},inputVisible: false,inputValue: '',selectedCateKeys: [],activeName: 'many',manyTableData: [],onlyTableData: [],addDialogVisible: false,editDialogVisible: false,// 修改表單數據對象editFrom: {attr_name: '',},// 修改表單驗證規則editFromRules: {attr_name: [{ required: true, message: '請輸入參數名稱', trigger: 'blur' },],},addFrom: {attr_name: '',},// 添加表單的驗證規則addFromRules: {attr_name: [{ required: true, message: '請輸入參數名稱', trigger: 'blur' },],},}},created() {this.getCateList()},computed: {// 按鈕需要被禁用返回true, 否則返回falseisBtnDisabled() {if (this.selectedCateKeys.length !== 3) {return true}return false},cateId() {if (this.selectedCateKeys.length === 3) {return this.selectedCateKeys[2]}return null},getTitleText() {if (this.activeName === 'many') {return '動態參數'}return '靜態屬性'},},methods: {// 獲取所有的商品分類列表async getCateList() {const { data: res } = await this.$http.get('categories')if (res.meta.status !== 200) {return this.$message.error('獲取商品數據列表失敗！')}this.cateList = res.dataconsole.log(this.cateList)}, // 級聯選擇框 選中變化 觸發async handleChange() {this.getParamsData()},handleInputConfirm() {console.log(ok)},// 刪除對應的參數可選項handleClose (i, row) {row.attr_vals.splice(i, 1)this.saveAttrVals(row)},async getParamsData() {if (this.selectedCateKeys.length !== 3) {this.selectedCateKeys = []this.manyTableData=[]this.onlyTableData=[]return}console.log(this.selectedCateKeys)const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,{params: { sel: this.activeName },})if (res.meta.status !== 200) {return this.$message.error('獲取參數列表失敗！')}res.data.forEach((item) => {// 通過三元表達式判斷attr_vals是否為空item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []// 控制文本框的顯示與隱藏item.inputVisible = false// 文本框的輸入值item.inputValue = ''})console.log(res.data)if (this.activeName === 'many') {this.manyTableData = res.data} else {this.onlyTableData = res.data}},handleTabsClick() {// console.log(this.activeName)this.getParamsData()},addDialogClosed() {this.$refs.addFromRef.resetFields()}, // 添加參數addParams() {this.$refs.addFromRef.validate(async (valid) => {if (!valid) returnconst { data: res } = await this.$http.post(`categories/${this.cateId}/attributes`,{attr_name: this.addFrom.attr_name,attr_sel: this.activeName,})if (res.meta.status !== 201) {return this.$message.error('添加參數失敗！')}this.$message.success('添加參數成功！')this.addDialogVisible = falsethis.getParamsData()})},editDialogClosed() {this.$refs.editFromRef.resetFields()},showInput(row) {row.inputVisible = true// $nextTick方法的作用：當頁面元素被重新渲染之后，才會至指定回調函數中的代碼this.$nextTick(_ => {this.$refs.saveTagInput.$refs.input.focus()})},editParams() {this.$refs.editFromRef.validate(async (valid) => {if (!valid) returnconst { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${this.editFrom.attr_id}`,{attr_name: this.editFrom.attr_name,attr_sel: this.activeName,})if (res.meta.status !== 200) {return this.$message.error('修改參數失敗！')}this.$message.success('修改參數成功！')this.getParamsData()this.editDialogVisible = false})},async showEditDialog(attr_id) {const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`,{params: { attr_sel: this.activeName },})if (res.meta.status !== 200) {return this.$message.error('獲取分類失敗！')}this.editFrom = res.datathis.editDialogVisible = true}, // 根據Id刪除對應的參數項async removeParams(attr_id) {const confirmResult = await this.$confirm('此操作將永久刪除該參數, 是否繼續?','提示',{confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning',}).catch((err) => err)if (confirmResult !== 'confirm') {return this.$message.info('已取消刪除！')}const { data: res } = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`)if (res.meta.status !== 200) {return this.$message.error('刪除參數失敗！')}this.$message.success('刪除參數成功！')this.getParamsData()},// 文本框失去焦點,或者按下Enter觸發handleInputConfirm (row) {// 輸入的內容為空時，清空if (row.inputValue.trim().length === 0) {row.inputValue = ''row.inputVisible = falsereturn}row.attr_vals.push(row.inputValue.trim())row.inputValue = ''row.inputVisible = false// 提交數據庫，保存修改this.saveAttrVals(row)},// 將對attr_vals（Tag） 的操作 保存到數據庫async saveAttrVals (row) {const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{attr_name: row.attr_name,attr_sel: row.attr_sel,attr_vals: row.attr_vals.join(' ')})if (res.meta.status !== 200) {return this.$message.error('修改參數項失敗！')}this.$message.success('修改參數項成功！')},}, } </script><style lang="less" scoped> .cat_opt {margin: 15px 0px; } .el-cascader {width: 25%; } .el-tag {margin: 8px; } .input-new-tag {width: 90px; } </style>

List.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="6"><el-input placeholder="請輸入內容" v-model="queryInfo.query" clearable @clear="getGoodsList"><el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button></el-input></el-col><el-col :span="4"><el-button type="primary" @click="goAddPage">添加商品</el-button></el-col></el-row><!-- 表格數據 --><el-table :data="goodsList" border stripe><el-table-column type="index"></el-table-column><el-table-column label="商品名稱" prop="goods_name"></el-table-column><el-table-column label="商品價格(元)" prop="goods_price" width="100px"></el-table-column><el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column><el-table-column label="商品數量" prop="goods_number" width="70px"></el-table-column><el-table-column label="創建時間" prop="add_time" width="140px"><template slot-scope="scope">{{scope.row.add_time | dataFormat }}</template></el-table-column><el-table-column label="操作" width="130px"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="mini"></el-button><el-buttontype="danger"icon="el-icon-delete"size="mini"@click="removeById(scope.row.goods_id)"></el-button></template></el-table-column></el-table><!-- 分頁區域 --><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"background></el-pagination></el-card></div> </template><script> export default {data () {return {queryInfo: {query: '',pagenum: 1,pagesize: 10},// 商品列表goodsList: [],// 商品總數total: 0}},created () {this.getGoodsList()},methods: {// 根據分頁獲取對應的商品列表async getGoodsList () {const { data: res } = await this.$http.get('goods', {params: this.queryInfo})if (res.meta.status !== 200) {return this.$message.error('獲取商品列表失敗！')}this.goodsList = res.data.goods// console.log(this.goodsList)this.total = res.data.total},handleSizeChange (newSize) {this.queryInfo.pagesize = newSizethis.getGoodsList()},handleCurrentChange (newSize) {this.queryInfo.pagenum = newSizethis.getGoodsList()},// 通過Id刪除商品async removeById (id) {const confirmResult = await this.$confirm('此操作將永久刪除該商品, 是否繼續?','提示',{confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).catch(err => err)if (confirmResult !== 'confirm') {return this.$message.info('已取消刪除！')}const { data: res } = await this.$http.delete('goods/' + id)if (res.meta.status !== 200) {return this.$message.error('刪除商品失敗！')}this.$message.success('刪除商品成功！')this.getGoodsList()},goAddPage () {this.$router.push('/goods/add')}} } </script><style lang="less" scoped> </style>

Add.vue

<template><div>hah</div> </template><style lang="less" scoped></style><script> export default {} </script>

運行結果

?

總結

以上是生活随笔為你收集整理的前端学习（1994）vue之电商管理系统电商系统之通过编程导航跳转到商品导航界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。