current position:Home>Front end and background management system -- 02 full version permission development (with tutorial and code)

Front end and background management system -- 02 full version permission development (with tutorial and code)

2022-01-27 01:24:46 Nanchen_ forty-two

Preface : Before, the background management system only wrote two pages without separate layout

details

The technology stack used :

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

This article has been greatly revised according to the previous article , And use multiple pages for layout . The effect will look better than before

Let's take a look at the implementation effect of this writing method

The login page defaults to Login page

If you enter any path here, you will automatically jump back to the login page  

Improved form validation

 

Administrator rights page  

  Normal user page

  Split the whole page , One part, one page , In this case, the reusability is relatively strong

  Here is the page structure

One more axios.js It didn't intercept  

Here is the actual code :


Header.vue: This page is placed at the head of ordinary user page and administrator page

<template>
  <div class="header">
    <div class="header-left">
      <div class="left">KGC Background management system </div>
    </div>
    <div class="header-right">
      <div class="header-right__logout">
        <el-button type="danger" size="20" @click="logout"> sign out </el-button>
      </div>
      <div class="header-right__info">
        <div class="right">{
   { name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      name: "",
    };
  },
  mounted() {
    this.name = window.sessionStorage.getItem("username");
  },
  methods: {
    logout() {
      this.$confirm(" Are you sure you want to exit ,  Whether or not to continue ?", " Tips ", {
        confirmButtonText: " determine ",
        cancelButtonText: " Cancel ",
        type: "warning",
      })
        .then(() => {
          window.sessionStorage.clear();
          this.$message({
            message: " You have logged out ! Please log in again ",
            type: "warning",
          });
          this.$router.push({ path: "/" });
        })
        .catch((err) => err);
    },
  },
  computed: {
    ...mapState(["user"]),
  },
};
</script>

<style >
.header {
  height: 50px;
  line-height: 50px;
  background-color: rgb(73, 80, 96);
  padding: 0 50px;
  color: #fff;
}
.left {
  color: #fff;
  float: left;
}
.header-right__info {
  float: right;
  margin: 0 20px;
}
.header-right__logout {
  float: right;
}
</style>

axios.js: Directly in the generated template let config={ Write this interface inside }

  baseURL:  'http://localhost:3000'

Login.vue page !! This page is mainly about the layout of the landing page , Then perform a verification of the login button , If the account number entered does not exist in the account number in the data , Then it will be judged that there is no such account ;

If the account number entered matches the account number in the data , Then it will judge whether it is an administrator account , If it is an administrator account and the password entered matches the password in the data , Then go to the administrator page ;

If it's an ordinary user's account , And the password entered matches the password in the data, then enter the user page Noodles

  

<template>
  <div class="home">
    <div class="homebox" v-loading="loading">
      <h3>KGC Background management system </h3>
      <el-input
        class="input"
        v-model="username"
        style="width: 500px"
        placeholder=" user name "
      ></el-input>
      <el-input
        class="input"
        placeholder=" password "
        style="width: 500px"
        v-model="password"
        show-password
      ></el-input>
      <el-button
        type="primary"
        size="medium "
        @click="login"
        style="width: 500px"
        > land </el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      username: "admin",
      password: 123,
      loading: false,
    };
  },
  mounted() {},
  methods: {
    login() {
      this.$axios.get("/users").then((v) => {
        this.loading = true;
        const uname = [];
        const passw = [];
        console.log(v);
        const res = v.data;
        for (var i = 0; i < res.length; i++) {
          uname.push(res[i].name);
          passw.push(res[i].pwd);
        }
        console.log(uname);
        console.log(passw);
        console.log(uname.indexOf(this.username) === -1);
        setTimeout(() => {
          if (uname.indexOf(this.username) === -1) {
            this.loading = false;
            this.$message.error(" Account does not exist , Please re-enter !");
          } else if(uname.indexOf(this.username) != -1 && this.username == 'admin'){
            var index = uname.indexOf(this.username);
            console.log(passw[index]);
            if (passw[index] == this.password) {
              this.loading = false;
              this.$message({
                message: " Welcome to the administrator page ! You have exceeded 99% Users of ",
                type: "success",
              });
              window.sessionStorage.setItem('username',this.username)
              this.$router.push("./Page");
            } else {
              this.loading = false;
              this.$message.error(" Wrong password , Please re-enter ");
            }
          }else{
             var index = uname.indexOf(this.username);
            console.log(passw[index]);
            if (passw[index] == this.password) {
              this.loading = false;
              this.$message({
                message: " Welcome to the user page !!!",
                type: "success",
              });
              window.sessionStorage.setItem('username',this.username)
              this.$router.push("./Page2");
            } else {
              this.loading = false;
              this.$message.error(" Wrong password , Please re-enter ");
            }
          }
        }, 2000);
      });
    },
  },
};
</script>
<style>
body {
  background-color: rgb(238, 243, 250);
}
.homebox {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -300px;
  width: 600px;
  height: 300px;
  background-color: rgb(255, 255, 255);
}
h3 {
  padding: 20px 0;
}
.input {
  margin-bottom: 20px;
}
</style>

Page.vue page : This page displays two navigation menus: user management and commodity management , When you click each time, you will enter the corresponding data page , That is to store the data in user management and the data page in commodity management

  

<template>
  <div>
    <el-container>
      <el-col :span="3">
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-menu-item index="1" @click="btn1">
            <i class="el-icon-menu"></i>
            <span slot="title"> User management </span>
          </el-menu-item>
          <el-menu-item index="2" @click="btn2">
            <i class="el-icon-setting"></i>
            <span slot="title"> Commodity management </span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  name: "Page",
  data() {
    return {
      loading: false,
    };
  },
  mounted() {},
  components: {
    Header,
  },
  methods: {
    btn1() {
      this.$router.push("./user");
    },
    btn2() {
      this.$router.push("./commodity");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
</style>

Page2.vue page : This page is the page of ordinary users , There is only one navigation menu for commodity management

  

<template>
  <div>
    <el-container>
      <el-col :span="3">
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-menu-item index="2">
            <i class="el-icon-setting"></i>
            <span slot="title"> Commodity management </span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  name: "Page",
  data() {
    return {
      loading: false,
    };
  },
  mounted() {},
  components: {
    Header,
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
/* .el-main {
  padding: 0;
} */
</style>

 User.vue page : This page mainly writes data items, including a delete button at the back , The delete button is false. There are two ways to delete , The second method I have commented out here . Here you can get the data directly with :data="tableData" get data

<template>
  <div>
    <el-table :data="tableData" v-loading="loading">
      <el-table-column prop="id" label=" Number " width="180"> </el-table-column>
      <el-table-column prop="name" label=" user name " width="180">
      </el-table-column>
      <el-table-column prop="role" label=" role "> </el-table-column>
      <el-table-column prop="phone" label=" Phone number "> </el-table-column>
      <el-table-column prop="email" label=" mailbox "> </el-table-column>
      <el-table-column prop="role" label=" operation ">
        <template v-slot="scope">
          <el-button
            type="danger"
            size="mini"
            @click="deleteData(scope.$index.tableData)"
            > Delete </el-button
          >
          <!--  @click="deleteData(scope.row.name)" -->
          <el-dialog title=" Tips " width="30%">
            <span class="warcont"
              ><i class="el-icon-warning"></i> Are you sure you want to delete this user </span
            >
            <span slot="footer" class="dialog-footer">
              <el-button> take   eliminate </el-button>
              <el-button type="primary"> indeed   set </el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "User",

  data() {
    return {
      loading: false,
    };
  },
  computed: {
    ...mapState(["tableData"]),
  },
  mounted() {
    this.loading = true;
   setTimeout(() => {
     this.loading = false;
      this.$axios.get("/users").then((res) => {
      const home = res.data;
      this.$store.commit("addrecord", home);
    });
   }, 500);
  },

  methods: {
    //  deleteData(name)
    deleteData(index,row){
              this.$confirm(' This operation will permanently delete the file ,  Whether or not to continue ?', ' Tips ', {
          confirmButtonText: ' determine ',
          cancelButtonText: ' Cancel ',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: ' Delete successful !'
          });
        /*    var index = this.tableData.findIndex(item => {
						return item.name === name;
					});
          this.tableData.splice(index,1) */
          this.tableData.splice(index,1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: ' Delete cancelled '
          });          
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

Commodity.vue page And user.vue Consistent page method , But this page is the data of the commodity management page

<template>
  <el-table
    border
    style="width: 100%"
    :data="table"
    v-loading="loading"
    element-loading-text=" Desperately loading "
  >
    <el-table-column prop="id" label=" Number " width="180"> </el-table-column>
    <el-table-column prop="name" label=" Name of commodity " width="180">
    </el-table-column>
    <el-table-column prop="price" label=" The unit price "> </el-table-column>
    <el-table-column prop="number" label=" stock "> </el-table-column>
  </el-table>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "Commodity",
  data() {
    return {
      loading: false,
    };
  },
  mounted() {
    this.loading = true;
    clearTimeout(clear)
    var clear = setTimeout(() => {
       this.$axios.get("/goods").then((v) => {
        const com = v.data;
        this.$store.commit("record", com);
        this.loading = false
      })
    }, 300);
    
  },
  computed: {
    ...mapState(["table"]),
  },
};
</script>

 *404 page This page is to prevent page errors and error reports generated by copying the administrator address , There's no use for , You can ignore

<template>
  <div class="not-found">
    <h1> Ah! ! No related pages found o(╥﹏╥)o.</h1>
    <router-link to>
      <p @click="$router.back(-1)"> Return to the previous page </p>
    </router-link>
  </div>
</template>

<script>
export default {
name:'Found'
}
</script>

<style lang="less" scoped>
.not-found {
  width: 100%;
  height: 100vh;
  background-color: #6495ED;
  display: flex;
  justify-content: center;
  align-items: center;
  h1 {
    margin: 0;
    color: #fff;
  }
  a {
    color: #E0FFFF;
    font-size: 14px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    transform: translateY(10px);
  }
}
</style>

Next is the routing page :

router.js page This page is the most important , When the page is / Will redirect to Login The login page , Use navigation guards to limit unnecessary links Page Page and Page2 Page as parent route , hold user as well as commodity Bind as a sub route . And rewrites the prototype push Method , Solve some information that you don't know what error will be reported

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/Login.vue";
import Page from "../views/Page.vue";
import Page2 from "../views/Page2.vue";
import User from "../views/User.vue";
import Commodity from "../views/Commodity.vue";
import Header from "../components/Header.vue";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/Login",
  },
  {
    path: "/Login",
    name: "Login",
    component: Login,
  },
  {
    path: "/page",
    name: "Page",
    components: {
      default: Page,
      Header,
    },
    children: [
      {
        path: "/page",
        redirect: "/page/user",
      },
      {
        path: "/page/user",
        name: "User",
        component: User,
      },
      {
        path: "/page/commodity",
        name: "Commodity",
        component: Commodity,
      },
    ],
  },
  {
    path: "/page2",
    name: "Page2",
    components: {
      default: Page2,
      Header,
    },
    children: [
      {
        path: "/page2",
        redirect: "/page2/commodity",
      },
      {
        path: "/page2/commodity",
        name: "Commodity",
        component: Commodity,
      },
    ],
  },
];

const router = new VueRouter({
  routes,
  mode: "history",
});
router.beforeEach((to, from, next) => {
  if (to.path == "/login") {
    next();
  } else {
    let token = window.sessionStorage.getItem("username");
    console.log(token);
    if (!token) {
      next("/login");
    } else {
      next();
    }
  }
});
const originalPush = VueRouter.prototype.push;
//  Rewritten the... On the prototype push Method , Unified processing of error messages 
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};
export default router;

store.js page This page is mainly used to store the obtained data and put them in the array , Use the load method to call other pages  

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    tableData:[],
    table:[],
    user:JSON.parse(window.sessionStorage.getItem('user') || '[]'),
  },
  //  Store user management page data 
  mutations: {
    addrecord(state,preload){
      state.tableData = preload
      window.sessionStorage.setItem('rightsList',JSON.stringify(preload))
    },
    //  Store commodity management data 
    record(state,preload){
      state.table = preload
      console.log(state.table);
      window.sessionStorage.setItem('liftList',JSON.stringify(preload))  
    },
    setUser(state,preload){
			state.user = preload;
			window.sessionStorage.setItem('user',JSON.stringify(state.user));
		},
  },
  actions: {
  },
  modules: {
  }
})

Then there are some common configuration file pages

main.js

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import store from './store'
import router from './router'
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

App.vue page It is mainly used to render public styles

<template>
  <div id="app">
    <router-view name="Header"></router-view>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  
  name: "app",
};
</script>

<style>
*{margin: 0;padding: 0;}
</style>

element.js

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)

copyright notice
author[Nanchen_ forty-two],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270124448958.html

Random recommended