devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基础前端后台管理系统——完整版权限开发（附带教程及代码）

作者：Li_阴宅 | 2024-07-01 11:20:56

赞

踩

基础前端后台管理系统——完整版权限开发（附带教程及代码）

前言：之前后台管理系统只是写了两个页面并没有分开布局

详情

所用到的技术栈：

vue-element-ui
vue-vuex
vue-router
vue-axios

这篇文章是按照上篇文章进行了大幅度修改，并且使用多页面进行布局。效果看起来会比之前的好一些

下面我们来看一下这种写法的实现效果

登录页面默认为Login页面

如果这里随便输入路径也会自动跳回登录页面 

对表单验证进行了改进

 

管理员权限页面 

 普通用户页面

 把整个页面进行了分割，一个部分一个页面，这样的话复用性比较强

 下面是页面结构

还有一个axios.js上面没有截取到 

下面是实战代码：

Header.vue：这个页面就是放在普通用户页面和管理员页面的头部

  1. <template>
  2.   <div class="header">
  3.     <div class="header-left">
  4.       <div class="left">KGC后台管理系统</div>
  5.     </div>
  6.     <div class="header-right">
  7.       <div class="header-right__logout">
  8.         <el-button type="danger" size="20" @click="logout">退出</el-button>
  9.       </div>
  10.       <div class="header-right__info">
  11.         <div class="right">{{ name }}</div>
  12.       </div>
  13.     </div>
  14.   </div>
  15. </template>
  16.  
  17. <script>
  18. import { mapState } from "vuex";
  19. export default {
  20.   name: "Header",
  21.   data() {
  22.     return {
  23.       name: "",
  24.     };
  25.   },
  26.   mounted() {
  27.     this.name = window.sessionStorage.getItem("username");
  28.   },
  29.   methods: {
  30.     logout() {
  31.       this.$confirm("您确定要退出吗, 是否继续?", "提示", {
  32.         confirmButtonText: "确定",
  33.         cancelButtonText: "取消",
  34.         type: "warning",
  35.       })
  36.         .then(() => {
  37.           window.sessionStorage.clear();
  38.           this.$message({
  39.             message: "你已经退出登陆！请重新登录账号",
  40.             type: "warning",
  41.           });
  42.           this.$router.push({ path: "/" });
  43.         })
  44.         .catch((err) => err);
  45.     },
  46.   },
  47.   computed: {
  48.     ...mapState(["user"]),
  49.   },
  50. };
  51. </script>
  52.  
  53. <style >
  54. .header {
  55.   height: 50px;
  56.   line-height: 50px;
  57.   background-color: rgb(73, 80, 96);
  58.   padding: 0 50px;
  59.   color: #fff;
  60. }
  61. .left {
  62.   color: #fff;
  63.   float: left;
  64. }
  65. .header-right__info {
  66.   float: right;
  67.   margin: 0 20px;
  68. }
  69. .header-right__logout {
  70.   float: right;
  71. }
  72. </style>

axios.js：直接在生成好的模板的let config={里面写入此接口}

  baseURL:  'http://localhost:3000'

Login.vue页面：！！这个页面主要就是布局一下登陆页面，然后对登录按钮进行一个验证，如果数据中的账号中不存在所输入的账号，那么就会判断没有这个账号；

如果所输入的账号与数据中的账号相匹配，那么会判断是否为管理员账号，如果是管理员账号并且输入的密码与数据中的密码相匹配，那么就进入管理员页面；

如果是普通用户的账号，并且输入的密码与数据中的密码相匹配那么就进入用户页面

  

  1. <template>
  2.   <div class="home">
  3.     <div class="homebox" v-loading="loading">
  4.       <h3>KGC后台管理系统</h3>
  5.       <el-input
  6.         class="input"
  7.         v-model="username"
  8.         style="width: 500px"
  9.         placeholder="用户名"
  10.       ></el-input>
  11.       <el-input
  12.         class="input"
  13.         placeholder="密码"
  14.         style="width: 500px"
  15.         v-model="password"
  16.         show-password
  17.       ></el-input>
  18.       <el-button
  19.         type="primary"
  20.         size="medium "
  21.         @click="login"
  22.         style="width: 500px"
  23.         >登陆</el-button
  24.       >
  25.     </div>
  26.   </div>
  27. </template>
  28. <script>
  29. export default {
  30.   name: "Login",
  31.   data() {
  32.     return {
  33.       username: "admin",
  34.       password: 123,
  35.       loading: false,
  36.     };
  37.   },
  38.   mounted() {},
  39.   methods: {
  40.     login() {
  41.       this.$axios.get("/users").then((v) => {
  42.         this.loading = true;
  43.         const uname = [];
  44.         const passw = [];
  45.         console.log(v);
  46.         const res = v.data;
  47.         for (var i = 0; i < res.length; i++) {
  48.           uname.push(res[i].name);
  49.           passw.push(res[i].pwd);
  50.         }
  51.         console.log(uname);
  52.         console.log(passw);
  53.         console.log(uname.indexOf(this.username) === -1);
  54.         setTimeout(() => {
  55.           if (uname.indexOf(this.username) === -1) {
  56.             this.loading = false;
  57.             this.$message.error("账号不存在，请重新输入！");
  58.           } else if(uname.indexOf(this.username) != -1 && this.username == 'admin'){
  59.             var index = uname.indexOf(this.username);
  60.             console.log(passw[index]);
  61.             if (passw[index] == this.password) {
  62.               this.loading = false;
  63.               this.$message({
  64.                 message: "欢迎来到管理员页面！您已经超过了99%的用户",
  65.                 type: "success",
  66.               });
  67.               window.sessionStorage.setItem('username',this.username)
  68.               this.$router.push("./Page");
  69.             } else {
  70.               this.loading = false;
  71.               this.$message.error("密码错误，请重新输入");
  72.             }
  73.           }else{
  74.              var index = uname.indexOf(this.username);
  75.             console.log(passw[index]);
  76.             if (passw[index] == this.password) {
  77.               this.loading = false;
  78.               this.$message({
  79.                 message: "欢迎登陆用户页面！！！",
  80.                 type: "success",
  81.               });
  82.               window.sessionStorage.setItem('username',this.username)
  83.               this.$router.push("./Page2");
  84.             } else {
  85.               this.loading = false;
  86.               this.$message.error("密码错误，请重新输入");
  87.             }
  88.           }
  89.         }, 2000);
  90.       });
  91.     },
  92.   },
  93. };
  94. </script>
  95. <style>
  96. body {
  97.   background-color: rgb(238, 243, 250);
  98. }
  99. .homebox {
  100.   text-align: center;
  101.   position: absolute;
  102.   top: 50%;
  103.   left: 50%;
  104.   margin-top: -150px;
  105.   margin-left: -300px;
  106.   width: 600px;
  107.   height: 300px;
  108.   background-color: rgb(255, 255, 255);
  109. }
  110. h3 {
  111.   padding: 20px 0;
  112. }
  113. .input {
  114.   margin-bottom: 20px;
  115. }
  116. </style>

Page.vue页面：这个页面就是显示了用户管理和商品管理两个导航菜单，当每次点击时会进入所对应的数据页面，也就是存放用户管理中的数据和商品管理中的数据页面

  

  1. <template>
  2.   <div>
  3.     <el-container>
  4.       <el-col :span="3">
  5.         <el-menu default-active="1" class="el-menu-vertical-demo">
  6.           <el-menu-item index="1" @click="btn1">
  7.             <i class="el-icon-menu"></i>
  8.             <span slot="title">用户管理</span>
  9.           </el-menu-item>
  10.           <el-menu-item index="2" @click="btn2">
  11.             <i class="el-icon-setting"></i>
  12.             <span slot="title">商品管理</span>
  13.           </el-menu-item>
  14.         </el-menu>
  15.       </el-col>
  16.       <el-main>
  17.         <router-view></router-view>
  18.       </el-main>
  19.     </el-container>
  20.   </div>
  21. </template>
  22.  
  23. <script>
  24. import Header from "../components/Header";
  25. export default {
  26.   name: "Page",
  27.   data() {
  28.     return {
  29.       loading: false,
  30.     };
  31.   },
  32.   mounted() {},
  33.   components: {
  34.     Header,
  35.   },
  36.   methods: {
  37.     btn1() {
  38.       this.$router.push("./user");
  39.     },
  40.     btn2() {
  41.       this.$router.push("./commodity");
  42.     },
  43.     handleOpen(key, keyPath) {
  44.       console.log(key, keyPath);
  45.     },
  46.     handleClose(key, keyPath) {
  47.       console.log(key, keyPath);
  48.     },
  49.   },
  50. };
  51. </script>
  52.  
  53. <style scoped>
  54. </style>

Page2.vue页面：这个页面就是普通用户的页面，只有一个商品管理的一个导航菜单

  

  1. <template>
  2.   <div>
  3.     <el-container>
  4.       <el-col :span="3">
  5.         <el-menu default-active="1" class="el-menu-vertical-demo">
  6.           <el-menu-item index="2">
  7.             <i class="el-icon-setting"></i>
  8.             <span slot="title">商品管理</span>
  9.           </el-menu-item>
  10.         </el-menu>
  11.       </el-col>
  12.       <el-main>
  13.         <router-view></router-view>
  14.       </el-main>
  15.     </el-container>
  16.   </div>
  17. </template>
  18.  
  19. <script>
  20. import Header from "../components/Header";
  21. export default {
  22.   name: "Page",
  23.   data() {
  24.     return {
  25.       loading: false,
  26.     };
  27.   },
  28.   mounted() {},
  29.   components: {
  30.     Header,
  31.   },
  32.   methods: {
  33.     handleOpen(key, keyPath) {
  34.       console.log(key, keyPath);
  35.     },
  36.     handleClose(key, keyPath) {
  37.       console.log(key, keyPath);
  38.     },
  39.   },
  40. };
  41. </script>
  42.  
  43. <style scoped>
  44. /* .el-main {
  45.   padding: 0;
  46. } */
  47. </style>

 User.vue页面：这个页面主要是写了数据项包括后面的一个删除按钮，删除按钮是假删除有两种方法，第二种方法我这里给注释掉了。这里直接获取数据用：data="tableData"获取数据

  1. <template>
  2.   <div>
  3.     <el-table :data="tableData" v-loading="loading">
  4.       <el-table-column prop="id" label="编号" width="180"> </el-table-column>
  5.       <el-table-column prop="name" label="用户名" width="180">
  6.       </el-table-column>
  7.       <el-table-column prop="role" label="角色"> </el-table-column>
  8.       <el-table-column prop="phone" label="手机号码"> </el-table-column>
  9.       <el-table-column prop="email" label="邮箱"> </el-table-column>
  10.       <el-table-column prop="role" label="操作">
  11.         <template v-slot="scope">
  12.           <el-button
  13.             type="danger"
  14.             size="mini"
  15.             @click="deleteData(scope.$index.tableData)"
  16.             >删除</el-button
  17.           >
  18.           <!--  @click="deleteData(scope.row.name)" -->
  19.           <el-dialog title="提示" width="30%">
  20.             <span class="warcont"
  21.               ><i class="el-icon-warning"></i>是否确定要删除该用户</span
  22.             >
  23.             <span slot="footer" class="dialog-footer">
  24.               <el-button>取 消</el-button>
  25.               <el-button type="primary">确 定</el-button>
  26.             </span>
  27.           </el-dialog>
  28.         </template>
  29.       </el-table-column>
  30.     </el-table>
  31.   </div>
  32. </template>
  33. <script>
  34. import { mapState } from "vuex";
  35. export default {
  36.   name: "User",
  37.  
  38.   data() {
  39.     return {
  40.       loading: false,
  41.     };
  42.   },
  43.   computed: {
  44.     ...mapState(["tableData"]),
  45.   },
  46.   mounted() {
  47.     this.loading = true;
  48.    setTimeout(() => {
  49.      this.loading = false;
  50.       this.$axios.get("/users").then((res) => {
  51.       const home = res.data;
  52.       this.$store.commit("addrecord", home);
  53.     });
  54.    }, 500);
  55.   },
  56.  
  57.   methods: {
  58.     //  deleteData(name)
  59.     deleteData(index,row){
  60.               this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  61.           confirmButtonText: '确定',
  62.           cancelButtonText: '取消',
  63.           type: 'warning'
  64.         }).then(() => {
  65.           this.$message({
  66.             type: 'success',
  67.             message: '删除成功!'
  68.           });
  69.         /*    var index = this.tableData.findIndex(item => {
  70. 						return item.name === name;
  71. 					});
  72.           this.tableData.splice(index,1) */
  73.           this.tableData.splice(index,1)
  74.         }).catch(() => {
  75.           this.$message({
  76.             type: 'info',
  77.             message: '已取消删除'
  78.           });          
  79.         });
  80.     },
  81.     handleClick(tab, event) {
  82.       console.log(tab, event);
  83.     },
  84.   },
  85. };
  86. </script>

Commodity.vue页面：与user.vue页面方法一致，只不过这个页面是商品管理页面的数据

  1. <template>
  2.   <el-table
  3.     border
  4.     style="width: 100%"
  5.     :data="table"
  6.     v-loading="loading"
  7.     element-loading-text="拼命加载中"
  8.   >
  9.     <el-table-column prop="id" label="编号" width="180"> </el-table-column>
  10.     <el-table-column prop="name" label="商品名称" width="180">
  11.     </el-table-column>
  12.     <el-table-column prop="price" label="单价"> </el-table-column>
  13.     <el-table-column prop="number" label="库存"> </el-table-column>
  14.   </el-table>
  15. </template>
  16. <script>
  17. import { mapState } from "vuex";
  18. export default {
  19.   name: "Commodity",
  20.   data() {
  21.     return {
  22.       loading: false,
  23.     };
  24.   },
  25.   mounted() {
  26.     this.loading = true;
  27.     clearTimeout(clear)
  28.     var clear = setTimeout(() => {
  29.        this.$axios.get("/goods").then((v) => {
  30.         const com = v.data;
  31.         this.$store.commit("record", com);
  32.         this.loading = false
  33.       })
  34.     }, 300);
  35.     
  36.   },
  37.   computed: {
  38.     ...mapState(["table"]),
  39.   },
  40. };
  41. </script>

 *404页面：这个页面就是防止页面出错以及复制管理员地址所产生的报错页面，这里没有用到，可以忽略

  1. <template>
  2.   <div class="not-found">
  3.     <h1>啊哦！找不到相关页面o(╥﹏╥)o。</h1>
  4.     <router-link to>
  5.       <p @click="$router.back(-1)">返回上一级页面</p>
  6.     </router-link>
  7.   </div>
  8. </template>
  9.  
  10. <script>
  11. export default {
  12. name:'Found'
  13. }
  14. </script>
  15.  
  16. <style lang="less" scoped>
  17. .not-found {
  18.   width: 100%;
  19.   height: 100vh;
  20.   background-color: #6495ED;
  21.   display: flex;
  22.   justify-content: center;
  23.   align-items: center;
  24.   h1 {
  25.     margin: 0;
  26.     color: #fff;
  27.   }
  28.   a {
  29.     color: #E0FFFF;
  30.     font-size: 14px;
  31.     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  32.     transform: translateY(10px);
  33.   }
  34. }
  35. </style>

接下来就是路由页面了：

router.js页面：这个页面最为重要，当页面为/时会重定向到Login登录页面，用导航守卫去限制不必要的链接把Page页面和Page2页面作为父路由，把user以及commodity作为子路由进行绑定。并且重写了原型上的push方法，解决一些不知道会报啥错误的信息

  1. import Vue from "vue";
  2. import VueRouter from "vue-router";
  3. import Login from "../views/Login.vue";
  4. import Page from "../views/Page.vue";
  5. import Page2 from "../views/Page2.vue";
  6. import User from "../views/User.vue";
  7. import Commodity from "../views/Commodity.vue";
  8. import Header from "../components/Header.vue";
  9. Vue.use(VueRouter);
  10.  
  11. const routes = [
  12.   {
  13.     path: "/",
  14.     redirect: "/Login",
  15.   },
  16.   {
  17.     path: "/Login",
  18.     name: "Login",
  19.     component: Login,
  20.   },
  21.   {
  22.     path: "/page",
  23.     name: "Page",
  24.     components: {
  25.       default: Page,
  26.       Header,
  27.     },
  28.     children: [
  29.       {
  30.         path: "/page",
  31.         redirect: "/page/user",
  32.       },
  33.       {
  34.         path: "/page/user",
  35.         name: "User",
  36.         component: User,
  37.       },
  38.       {
  39.         path: "/page/commodity",
  40.         name: "Commodity",
  41.         component: Commodity,
  42.       },
  43.     ],
  44.   },
  45.   {
  46.     path: "/page2",
  47.     name: "Page2",
  48.     components: {
  49.       default: Page2,
  50.       Header,
  51.     },
  52.     children: [
  53.       {
  54.         path: "/page2",
  55.         redirect: "/page2/commodity",
  56.       },
  57.       {
  58.         path: "/page2/commodity",
  59.         name: "Commodity",
  60.         component: Commodity,
  61.       },
  62.     ],
  63.   },
  64. ];
  65.  
  66. const router = new VueRouter({
  67.   routes,
  68.   mode: "history",
  69. });
  70. router.beforeEach((to, from, next) => {
  71.   if (to.path == "/login") {
  72.     next();
  73.   } else {
  74.     let token = window.sessionStorage.getItem("username");
  75.     console.log(token);
  76.     if (!token) {
  77.       next("/login");
  78.     } else {
  79.       next();
  80.     }
  81.   }
  82. });
  83. const originalPush = VueRouter.prototype.push;
  84. // 重写了原型上的push方法，统一的处理了错误信息
  85. VueRouter.prototype.push = function push(location) {
  86.   return originalPush.call(this, location).catch((err) => err);
  87. };
  88. export default router;

store.js页面：这个页面主要是用来存储获取到的数据并把他们放在数组中，使用载荷的方式去其他页面进行调用 

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3.  
  4. Vue.use(Vuex)
  5.  
  6. export default new Vuex.Store({
  7.   state: {
  8.     tableData:[],
  9.     table:[],
  10.     user:JSON.parse(window.sessionStorage.getItem('user') || '[]'),
  11.   },
  12.   // 存储用户管理页面数据
  13.   mutations: {
  14.     addrecord(state,preload){
  15.       state.tableData = preload
  16.       window.sessionStorage.setItem('rightsList',JSON.stringify(preload))
  17.     },
  18.     // 存储商品管理数据
  19.     record(state,preload){
  20.       state.table = preload
  21.       console.log(state.table);
  22.       window.sessionStorage.setItem('liftList',JSON.stringify(preload))  
  23.     },
  24.     setUser(state,preload){
  25. 			state.user = preload;
  26. 			window.sessionStorage.setItem('user',JSON.stringify(state.user));
  27. 		},
  28.   },
  29.   actions: {
  30.   },
  31.   modules: {
  32.   }
  33. })

接下来就是一些常用的配置文件页面

main.js

  1. import Vue from 'vue'
  2. import './plugins/axios'
  3. import App from './App.vue'
  4. import store from './store'
  5. import router from './router'
  6. import './plugins/element.js'
  7.  
  8. Vue.config.productionTip = false
  9.  
  10. new Vue({
  11.   store,
  12.   router,
  13.   render: h => h(App)
  14. }).$mount('#app')

App.vue页面：主要是用来渲染公共样式

  1. <template>
  2.   <div id="app">
  3.     <router-view name="Header"></router-view>
  4.     <router-view></router-view>
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.   
  11.   name: "app",
  12. };
  13. </script>
  14.  
  15. <style>
  16. *{margin: 0;padding: 0;}
  17. </style>

element.js

  1. import Vue from 'vue'
  2. import Element from 'element-ui'
  3. import 'element-ui/lib/theme-chalk/index.css'
  4.  
  5. Vue.use(Element)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/776148
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号