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

Front end and background management system - permission development of version 01 (with tutorial and code)

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

The technology stack you need to use : The scaffold 、vuex、router as well as element-ui and axios

Catalog

Verify whether the account exists

If you won't install it, you can take a look at the previous installation teaching demo1 Technology stack to be installed

Let's see the implementation effect first :

If you want to get data, you can ask me for the interface of local data , If you want to use it yourself mokejs Analog data can also  . If you can't simulate, you can refer to this article mokejs Analog data

Then officially write demo

First write the login page style

Login.vue page

<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,
    };
  },
  methods: {
    login() {
      
    },
  },
};
</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-top: 20px;
}
.input {
  margin-bottom: 20px;
}
</style>

  Then you can write the background system page first

<template>
  <div class="admin">
    <div class="header">
      <router-view name="Header"></router-view>
    </div>
    <router-view></router-view>
    <el-tabs
      v-model="activeName"
      :tab-position="tabPosition"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label=" User management " name="first">
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label=" Number "> </el-table-column>
            <el-table-column prop="name" label=" user name "> </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 label=" operation ">
              <template v-slot="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteData(scope.$index, tableData)"
                  > Delete </el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
      <!-- {
   {banner[0].id}} -->
      <el-tab-pane label=" Commodity management " name="second">
        <template>
          <el-table :data="table" style="width: 80%">
            <el-table-column prop="id" label=" Number "> </el-table-column>
            <el-table-column prop="name" label=" Name of commodity "> </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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "Admin",
  computed: {
    ...mapState(["tableData"]),
    ...mapState(["table"]),
  },
  components: {
    Header: "Header",
  },
  data() {
    return {
      tabPosition: "left",
      activeName: "first",
    };
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.header {
  width: 100%;
  background-color: #00bfff;
}
</style>

Head style :

<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">{
   { user.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Header",
  data() {
    return {};
  },
  mounted() {},
  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.removeItem("LeftList");
          this.$message({
            message: " You have logged out ! Please log in again ",
            type: "warning",
          });
          this.$router.push({ path: "/login" });
        })
        .catch((err) => err);
    },
  },
  computed: {
    ...mapState(["user"]),
  },
};
</script>

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

  hold normal.css stay app.vue In or in main Just introduce  

Next, you can try to get the data in this page

Use JSON-data data

install :npm install -g json-server

 

  Use vuex get data

 mounted() {
    this.$axios.get("/users").then((res) => {
      const home = res.data;
      this.$store.commit("addrecord", home);
      console.log(home);
    });
  },

 

  Introduce commodity management in the same way

I want to enter this page directly after clicking the login page

Just get the data in the login button

login() {
      this.$axios.get("/users").then((res) => {
        const home = res.data;
        this.$store.commit("addrecord", home);
        console.log(home);
      })
    },

  When we click login, we will see the obtained data

  At this time, you can set a timer with a delay of two seconds to load the page , End after loading

 login() {
      this.$axios.get("/users").then((res) => {
        const home = res.data;
        this.$store.commit("addrecord", home);
        console.log(home);
        //  Start loading animation 
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.$message({
            message: " Congratulations on your successful landing , Welcome to User page ",
            type: "success",
          });
        }, 2000);
      });
    },

The effect is as follows :

Start to traverse the account and password existing in the data through the loop

 login() {
      this.$axios.get("/users").then((res) => {
        const home = res.data;
        this.$store.commit("addrecord", home);
        console.log(home);
        //  Start loading animation 
        this.loading = true;
        setTimeout(() => {
    //  Traverse account and password 
          for (let i = 0; i < home.length; i++) {
            console.log(home[i].name);
            console.log(home[i].pwd);
          }
          this.loading = false;
          this.$message({
            message: " Congratulations on your successful landing , Welcome to User page ",
            type: "success",
          });
        }, 2000);
      });
    },

The effect is as follows : 

 

Because the passwords are 123 So we won't get his password here , Judge him directly as 123

if (this.username == home[i].name && this.password == 123) {
              //  If it is true , Then let the login pass 
              this.loading = false;
              this.$message({
                message: " Congratulations on your successful landing , Welcome to User page ",
                type: "success",
              });
            }

Judge again if the account is super administrator , Then go to the super administrator page , If the account password is not super administrator , Go to the normal user page , Otherwise, you are not allowed to enter the page

User The page is as follows :

<template>
  <div class="admin">
    <div class="header">
      <router-view name="Header"></router-view>
    </div>
    <router-view></router-view>
    <el-tabs
      v-model="activeName"
      :tab-position="tabPosition"
      type="card"
      @tab-click="handleClick"
    >
      <!-- {
   {banner[0].id}} -->
      <el-tab-pane v-if="show" label=" Commodity management " name="first">
        <template>
          <el-table :data="table" style="width: 90%">
            <el-table-column prop="id" label=" Number "> </el-table-column>
            <el-table-column prop="name" label=" Name of commodity "> </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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "Admin",
  computed: {
    ...mapState(["table"]),
  },
  components: {
    Header: "Header",
  },
  data() {
    return {
      tabPosition: "left",
      activeName: "first",
      content: "",
      banner: "",
      body: "",
      show: true,
    };
  },

  mounted() {
    this.$axios.get("/goods").then((resf) => {
      const user = resf.data;
      console.log(user);
      this.$store.commit("record", user);
      for (let i = 0; i < user.length; i++) {}
    });
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.header {
  width: 100%;
  background-color: #00bfff;
}
</style>

stay router Write the following code in :( Add a guard navigation to prevent jumping )

router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    next()
  } else {
    let token = window.sessionStorage.getItem('name')
    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)
}

The following is the source code :

components/Header.vue

<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">{
   { user.name }}</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Header",
  data() {
    return {};
  },
  mounted() {},
  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.removeItem("LeftList");
          this.$message({
            message: " You have logged out ! Please log in again ",
            type: "warning",
          });
          this.$router.push({ path: "/login" });
        })
        .catch((err) => err);
    },
  },
  computed: {
    ...mapState(["user"]),
  },
};
</script>

<style scoped>
.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>

plugins/axios.js

"use strict";

import Vue from 'vue';
import axios from "axios";
let config = {

  baseURL:'  http://localhost:3000'
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function(config) {
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

_axios.interceptors.response.use(
  function(response) {
    return response;
  },
  function(error) {
    return Promise.reject(error);
  }
);

Plugin.install = function(Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin)

export default Plugin;

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Admin from '../views/Admin.vue'
import User from '../views/User.vue'
import Header from '@/components/Header';
import Home from '../views/Home.vue'
Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    name:'Home',
    component:Home
  },
  {
    path: '*',
    redirect: '/login'
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hazsh].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/login',
    name: 'Login',
    // route level code-splitting
    // this generates a separate chunk (about.[hazsh].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
  },
  {
    path: '/user',
    name: 'User',
    // route level code-splitting
    // this generates a separate chunk (about.[hazsh].js) for this route
    // which is lazy-loaded when the route is visited.
    components: {
      default: User,
      Header: Header
    }
  },
  {
    path: '/admin',
    name: 'Admin',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    components: {
      default: Admin,
      Header: Header
    }
  }
]

const router = new VueRouter({
  routes,
  mode:'history'
})
router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    next()
  } else {
    let token = window.sessionStorage.getItem('name')
    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/index.js

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

Vue.use(Vuex)

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

views/Admin.vue

<template>
  <div class="admin">
    <div class="header">
      <router-view name="Header"></router-view>
    </div>
    <router-view></router-view>
    <el-tabs
      v-model="activeName"
      :tab-position="tabPosition"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label=" User management " name="first">
        <template>
         
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label=" Number ">
               </el-table-column>
            <el-table-column prop="name" label=" user name "> </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 label=" operation ">
              <template v-slot="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteData(scope.$index,tableData)"
                  > Delete </el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
      <!-- {
   {banner[0].id}} -->
      <el-tab-pane v-if="show" label=" Commodity management " name="second">
        <template>
          <el-table :data="table" style="width: 80%">
            <el-table-column prop="id" label=" Number "> </el-table-column>
            <el-table-column prop="name" label=" Name of commodity "> </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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "Admin",
  computed: {
    ...mapState(["tableData"]),
    ...mapState(["table"]),
  },
  components: {
    Header: "Header",
  },
  data() {
    return {
      tabPosition: "left",
      activeName: "first",
      content: "",
      banner: "",
      body: "",
      show: true,
    };
  },

  mounted() {
    this.$axios.get("/users").then((res) => {
      console.log(res);
      this.banner = res.data;
      console.log(this.banner);

      //   const index = data.list.findIndex(item=>item.id === body.id);
      //   console.log(index);
    });
    this.$axios.get("/goods").then((resf) => {
      const user = resf.data;
      console.log(user);
      this.$store.commit("record", user);
      for (let i = 0; i < user.length; i++) {}
    });
    // this.$axios.get("/goods").then((good)=>{
    //     console.log(good);
    //     this.goods = good.data,
    //      const user = resf.data;
    //     console.log(user);
    //     this.$store.commit("record", user);
    //
    //     window.sessionStorage.setItem('List',JSON.stringify(good))
    // })

    /*  this.$axios.delete("/api/users/" + user.id).then((rest) => {
      console.log(rest);
    }); */
  },

  methods: {
   /*  deleteData(index,row){
				this.tableData.splice(index, 1)
				console.log(" Deleted ")
				console.log("index The value of is :"+index)
				console.log("row The value of is :",row)
			}, */
    getUserList(){
      this.$axios.get("/users").then((res) => {
      console.log(res);
      this.banner = res.data;
      console.log(this.banner);

      //   const index = data.list.findIndex(item=>item.id === body.id);
      //   console.log(index);
    });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //  Delete 
     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 !",
            
          });
          this.tableData.splice(index, 1)
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: " Delete cancelled ",
          });
        });
      // console.log(index, row);
      //  Pass a parameter id post Just pass it directly 
      //  Deconstruction 
      // const {data,res} = await('/api/get/user',{ id })

      //  If it is get request 
      /*       const {data,res} = await('/api/get/user',{ 
        params:{
          // id:id
          id
        } 
       }) */
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.header {
  width: 100%;
  background-color: #00bfff;
}
</style>

views/Home.vue

<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>
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      username: "",
      password: 123,
      loading: false,
    };
  },
  methods: {
    login() {
      this.$axios.get("/users").then((res) => {
        const home = res.data;
        this.$store.commit("addrecord", home);
        console.log(home);

        this.loading = true;
        var timer = setTimeout(() => {
          this.loading = false;
          for (let i = 0; i < home.length; i++) {
            console.log(home[i].name);
            if (this.username == home[i].name && this.password == 123) {
              this.loading = false;
              this.$message({
                message: " congratulations , Landing successful !",
                type: "success",
              });
              
              return this.$router.push("/admin");
            }
          }
          for (let j = 0; j < home.length; j++) {
            console.log(home[j].name);
            if (this.username != home[j].name || this.password != 123) {
              this.$message.error(" Wrong , This is an error message ");
              return this.$router.push("/home");
            }
          }
        }, 2000);
        console.log(res);
      });
      this.$axios.get("/goods").then((resf) => {
        const user = resf.data;
        console.log(user);
        this.$store.commit("record", user);
        for (let i = 0; i < user.length; i++) {}
      });
    },
  },
};
</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-top: 20px;
}
.input {
  margin-bottom: 20px;
}
</style>

views/Login.vue

<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>
// @ is an alias to /src

export default {
  name: "Login",
  data() {
    return {
      username: "admin",
      password: 123,
      loading: false,
    };
  },
  methods: {
    login() {
      this.$axios.get("/users").then((res) => {
        const home = res.data;
        this.$store.commit("addrecord", home);
        console.log(home);
        this.loading = true;
        setTimeout(() => {
          for (let i = 0; i < home.length; i++) {
            console.log(home[i].name);
            if (this.username == home[i].name && this.password == 123) {
              if (this.username != 'admin' && this.password ==123) {
                this.loading = false;
              this.$message({
                message: " Congratulations on your successful landing , Welcome to User page ",
                type: "success",
              });
              this.loading = false;
              this.$store.commit("setUser", res.data[i]);
              window.sessionStorage.setItem("name", res.data.name);
              return this.$router.push("/user");
              }else{
              this.loading = false;
              this.$message({
                message: "Hello,Welcome to the admin page!",
                type: "success",
              });
              this.loading = false;
              this.$store.commit("setUser", res.data[i]);
              window.sessionStorage.setItem("name", res.data.name);
              return this.$router.push("/admin");
              }
            }
          }
          
          for (let j = 0; j < home.length; j++) {
            this.loading = false;
            console.log(home[j].name);
            if (this.username != home[j].name || this.password != 123) {
              this.$message.error(
                " Wrong , There may be a problem with your account password , Please fill in again "
              );
              return this.$router.push("/home");
            }
          }
          console.log(res);
        }, 2000);
      });

      this.$axios.get("/goods").then((resf) => {
        const user = resf.data;
        console.log(user);
        this.$store.commit("record", user);
        for (let i = 0; i < user.length; i++) {}
      });
    },
  },
};
</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-top: 20px;
}
.input {
  margin-bottom: 20px;
}
</style>

views/User.vue

<template>
  <div class="admin">
    <div class="header">
      <router-view name="Header"></router-view>
    </div>
    <router-view></router-view>
    <el-tabs
      v-model="activeName"
      :tab-position="tabPosition"
      type="card"
      @tab-click="handleClick"
    >
      <!-- {
   {banner[0].id}} -->
      <el-tab-pane v-if="show" label=" Commodity management " name="first">
        <template>
          <el-table :data="table" style="width: 90%">
            <el-table-column prop="id" label=" Number "> </el-table-column>
            <el-table-column prop="name" label=" Name of commodity "> </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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "Admin",
  computed: {
    ...mapState(["table"]),
  },
  components: {
    Header: "Header",
  },
  data() {
    return {
      tabPosition: "left",
      activeName: "first",
      content: "",
      banner: "",
      body: "",
      show: true,
    };
  },

  mounted() {
    this.$axios.get("/goods").then((resf) => {
      const user = resf.data;
      console.log(user);
      this.$store.commit("record", user);
      for (let i = 0; i < user.length; i++) {}
    });
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.header {
  width: 100%;
  background-color: #00bfff;
}
</style>

App.vue

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

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

<style>
</style>

main.js

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import './assets/css/normalize.css'
Vue.config.productionTip = false

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

The deleted data here is false deletion , Prevent real deletion of local data .

Realization effect :

 

 

 

 

Verify whether the account exists

Here is a more convenient code to verify login

    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 {
            var index = uname.indexOf(this.username);
            console.log(passw[index]);
            if (passw[index] == this.password) {
              this.loading = false;
              this.$message({
                message: " congratulations , Landing successful !",
                type: "success",
              });
              this.$router.push("./Page");
            } else {
              this.loading = false;
              this.$message.error(" Wrong password , Please re-enter ");
            }
          }
        }, 2000);
      });
    },

This code can wrap the existing data in an array , And compare the entered account and password with the account in the array , Judge whether he exists , If it does not exist, it will show that the account does not exist , If the account name is consistent with the account in the data , Will judge whether its password corresponds to it , If it doesn't correspond, judge him as the password is wrong , If it's all right , Then go to the next page  

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

Random recommended