AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-04-20 98
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 版权限开发（附带教程及代码）

需要使用的技术栈：脚手架、vuex、router以及element-ui和axios

目录

验证账号是否存在

不会安装的可以看一下之前的安装教学demo1需要安装的技术栈

先看实现效果：

a4ddc9aab45c473bae643448e02c38ee.gif

获取数据的话可以找我要一下本地数据的接口，如果想自己用mokejs模拟数据的话也可以 。不会模拟的话可以参考这篇mokejs模拟数据

接下来正式写demo

先写登录页面样式

Login.vue页面

<template>
  <div class="home">
    <div class="homebox" v-loading="loading">
      <h3>KGC后台管理系统</h3>
      <el-input
        class="input"
        v-model="username"
        style="width: 500px"
        placeholder="用户名"
      ></el-input>
      <el-input
        class="input"
        placeholder="密码"
        style="width: 500px"
        v-model="password"
        show-password
      ></el-input>
      <el-button
        type="primary"
        size="medium "
        @click="login"
        style="width: 500px"
        >登陆</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>

96c2e479e959497b96f8250cfb415b0b.png

之后可以先写后台系统页面

273f72299c3845dfbbaa0ef2b3b137f2.png

<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="用户管理" name="first">
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号"> </el-table-column>
            <el-table-column prop="name" label="用户名"> </el-table-column>
            <el-table-column prop="role" label="角色"> </el-table-column>
            <el-table-column prop="phone" label="手机号码"> </el-table-column>
            <el-table-column prop="email" label="邮箱"> </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteData(scope.$index, tableData)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
      <!-- {{banner[0].id}} -->
      <el-tab-pane label="商品管理" name="second">
        <template>
          <el-table :data="table" style="width: 80%">
            <el-table-column prop="id" label="编号"> </el-table-column>
            <el-table-column prop="name" label="商品名称"> </el-table-column>
            <el-table-column prop="price" label="单价"> </el-table-column>
            <el-table-column prop="number" label="库存"> </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>

头部样式：

<template>
  <div class="header">
    <div class="header-left">
      <div class="left">KGC后台管理系统</div>
    </div>
    <div class="header-right">
      <div class="header-right__logout">
        <el-button type="danger" size="20" @click="logout">退出</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("您确定要退出吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.sessionStorage.removeItem("LeftList");
          this.$message({
            message: "你已经退出登陆！请重新登录账号",
            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>

把normal.css在app.vue 中或者在main中引入即可

19444d4ae9fe474483c9404739c8f2d2.png

e614d2ca64f6468f8858e935cd896f5a.png

2dc0f954af77446ababb9b8f8c953dc6.png

接下来就可以现在这个页面中尝试获取数据

使用JSON-data数据

安装：npm install -g json-server

fd32e40e1d8c4846ab8a9f72f565fc41.png5a1c447714bb4db9865be1db8e8682d6.png

使用vuex获取数据

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

aff1c700922b4f2395bc0bbe21de99e3.png

ee85934774814d7e981e90175e0423dd.png

用同样的方法引入商品管理

ca42960241e7407787fdda0fd62c66ea.png

这里想直接在点击登录页面后进入此网页

就在登录按钮中获取数据

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

当我们点击登陆时会看到获取到的数据

9e6bc7f64a5044a3bfd81b4a0b75c7af.png

这时可以设置一个延迟两秒钟的定时器用来加载页面，加载完毕后结束

login() {
      this.$axios.get("/users").then((res) => {
        const home = res.data;
        this.$store.commit("addrecord", home);
        console.log(home);
        // 开启加载动画
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.$message({
            message: "恭喜你登陆成功，欢迎来到User页面",
            type: "success",
          });
        }, 2000);
      });
    },

效果如下：

1518572a8f5c4738953949306f02d7b7.gif

通过循环开始遍历数据中存在的账号以及密码

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);
            console.log(home[i].pwd);
          }
          this.loading = false;
          this.$message({
            message: "恭喜你登陆成功，欢迎来到User页面",
            type: "success",
          });
        }, 2000);
      });
    },

效果如下：

ee8a6fecf13946a98cecf6010d4fc735.png

因为密码都是123所以这里就不获取他的密码了，直接判断他为123

if (this.username == home[i].name && this.password == 123) {
              // 如果为真，那么就让登陆通过
              this.loading = false;
              this.$message({
                message: "恭喜你登陆成功，欢迎来到User页面",
                type: "success",
              });
            }

再次判断如果账号为超级管理员，那么就进入超级管理员页面，如果账号密码不是超级管理员，就进入普通的用户页面，否则不允许进入页面

User页面如下：

<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="商品管理" name="first">
        <template>
          <el-table :data="table" style="width: 90%">
            <el-table-column prop="id" label="编号"> </el-table-column>
            <el-table-column prop="name" label="商品名称"> </el-table-column>
            <el-table-column prop="price" label="单价"> </el-table-column>
            <el-table-column prop="number" label="库存"> </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>

在router里写入以下代码：（加入一个守卫导航防止跳转）

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
// 重写了原型上的push方法，统一的处理了错误信息
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

下面为源代码：

components/Header.vue

<template>
  <div class="header">
    <div class="header-left">
      <div class="left">KGC后台管理系统</div>
    </div>
    <div class="header-right">
      <div class="header-right__logout">
        <el-button type="danger" size="20" @click="logout">退出</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("您确定要退出吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.sessionStorage.removeItem("LeftList");
          this.$message({
            message: "你已经退出登陆！请重新登录账号",
            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
// 重写了原型上的push方法，统一的处理了错误信息
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="用户管理" name="first">
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号">
               </el-table-column>
            <el-table-column prop="name" label="用户名"> </el-table-column>
            <el-table-column prop="role" label="角色"> </el-table-column>
            <el-table-column prop="phone" label="手机号码"> </el-table-column>
            <el-table-column prop="email" label="邮箱"> </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteData(scope.$index,tableData)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
      <!-- {{banner[0].id}} -->
      <el-tab-pane v-if="show" label="商品管理" name="second">
        <template>
          <el-table :data="table" style="width: 80%">
            <el-table-column prop="id" label="编号"> </el-table-column>
            <el-table-column prop="name" label="商品名称"> </el-table-column>
            <el-table-column prop="price" label="单价"> </el-table-column>
            <el-table-column prop="number" label="库存"> </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("进行了删除操作")
    console.log("index的值是："+index)
    console.log("row的值是：",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);
    },
    // 删除
     deleteData(index,row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.tableData.splice(index, 1)
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(index, row);
      // 传一个参数id post就直接传
      // 解构写法
      // const {data,res} = await('/api/get/user',{ id })
      // 如果是get请求
      /*       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后台管理系统</h3>
      <el-input
        class="input"
        v-model="username"
        style="width: 500px"
        placeholder="用户名"
      ></el-input>
      <el-input
        class="input"
        placeholder="密码"
        style="width: 500px"
        v-model="password"
        show-password
      ></el-input>
      <el-button
       type="primary"
        size="medium "
        @click="login"
        style="width: 500px"
        >登陆</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: "恭喜你，登陆成功！",
                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("错了哦，这是一条错误消息");
              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后台管理系统</h3>
      <el-input
        class="input"
        v-model="username"
        style="width: 500px"
        placeholder="用户名"
      ></el-input>
      <el-input
        class="input"
        placeholder="密码"
        style="width: 500px"
        v-model="password"
        show-password
      ></el-input>
      <el-button
        type="primary"
        size="medium "
        @click="login"
        style="width: 500px"
        >登陆</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: "恭喜你登陆成功，欢迎来到User页面",
                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(
                "错了哦，可能是你的账号密码有问题，请重新填写"
              );
              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="商品管理" name="first">
        <template>
          <el-table :data="table" style="width: 90%">
            <el-table-column prop="id" label="编号"> </el-table-column>
            <el-table-column prop="name" label="商品名称"> </el-table-column>
            <el-table-column prop="price" label="单价"> </el-table-column>
            <el-table-column prop="number" label="库存"> </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')

这里的删除数据是假删除，防止真实删除本地数据。

实现效果：

bb543803c5a14f99acbd1b5fe4c0f3d9.png

dfae17fe9d704f20b59cd5638ada8728.png

335387039abb42f3bf6a6dac8570bb8c.png

8d395ab98c6448198ed000aaf9fa3c4b.png

d239b4d454584a668486780d9175b660.png

92f235b53c1c4edc89f1c52ff88b5458.png

验证账号是否存在

这里更新一条更方便的验证登录的代码

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("账号不存在，请重新输入！");
          } else {
            var index = uname.indexOf(this.username);
            console.log(passw[index]);
            if (passw[index] == this.password) {
              this.loading = false;
              this.$message({
                message: "恭喜你，登陆成功！",
                type: "success",
              });
              this.$router.push("./Page");
            } else {
              this.loading = false;
              this.$message.error("密码错误，请重新输入");
            }
          }
        }, 2000);
      });
    },

50289a2ec652469193b348cc2cbca167.png

这段代码可以将存在的数据用数组包裹起来，并将输入的账号和密码与数组里的账号相对比，判断他是否存在，不存在的话就会显示账号不存在，如果账号名与数据中的账号一致，就会去判断其密码是否与之对应，如果不对应就判断他为密码错误，如果都正确，那么则进入下一页  


文章标签：
前端开发
数据安全/隐私保护
关键词：
前端代码
前端开发
前端后台
前端权限
前端系统
SouthernWind
目录
相关文章
想飞的雪糕
|
23天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇（二）：几行代码打包后接近100M？别慌，带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时，生成的可执行文件体积较大，通常接近 100 MB，而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时，使其能够在目标设备上独立运行，无需额外安装依赖。尽管体积较大，但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法，可以优化可执行文件的体积。
想飞的雪糕
99 3
前端全栈之路Deno篇（二）：几行代码打包后接近100M？别慌，带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
东方睿赢
|
6天前
|
前端开发 JavaScript
前端界的革命：掌握这些新技术，让你的代码简洁到让人惊叹！
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法，极大减少了代码冗余。React通过虚拟DOM和组件化思想，提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割，优化了应用性能和加载速度。这些新技术正引领前端开发的革命，使代码更加简洁、高效、可维护。
东方睿赢
11 2
众所周知
|
6天前
|
前端开发 JavaScript 测试技术
前端工程师的必修课：如何写出优雅、可维护的代码？
前端工程作为数字世界的门面，编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面，提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习，前端工程师可以写出高效且易于维护的代码，为项目的成功打下坚实基础。
众所周知
15 2
土木林森
|
11天前
|
监控 前端开发 JavaScript
前端开发的终极奥义：如何让你的代码既快又美，还不易出错？
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域，本文从性能优化、代码美化和错误处理三个方面，探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能；遵循命名规范、保持一致的缩进与空行、添加注释与文档，让代码更易读；通过输入验证、try-catch捕获异常、日志与监控，增强代码的健壮性。追求代码的“快、美、稳”，是每个前端开发者的目标。
土木林森
28 3
土木林森
|
13天前
|
前端开发 JavaScript 安全
揭秘！前端大牛们如何高效解决跨域问题，提升开发效率！
【10月更文挑战第30天】在Web开发中，跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案，包括JSONP、CORS、postMessage和Nginx/Node.js代理，对比它们的优缺点，帮助初学者提升开发效率。
土木林森
37 4
土木林森
|
13天前
|
前端开发 JavaScript 开发者
前端开发的终极技巧：如何让你的代码既简洁又高效，还能减少bug？
【10月更文挑战第30天】前端开发充满挑战与创新，如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧：1. 模块化，提高代码复用性；2. 组件化，降低代码耦合度；3. 使用现代框架，提高开发效率；4. 统一代码规范，降低沟通成本；5. 利用工具，优化代码质量。掌握这些技巧，让前端开发更高效。
土木林森
28 1
土木林森
|
20天前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器：深度解析递归组件与动态组件的奥妙，让你代码效率翻倍！
【10月更文挑战第23天】在Web开发中，组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身，适用于处理层级结构数据，如菜单和树形控件。动态组件则根据数据变化动态切换组件显示，适用于不同业务逻辑下的组件展示。通过示例，展示了这两种组件的实现方法及其在实际开发中的应用价值。
土木林森
28 1
想飞的雪糕
|
23天前
|
前端开发 安全 API
前端全栈之路Deno篇（三）：一次性搞懂和学会用Deno 2.0 的权限系统详解和多种权限配置权限声明方式
本文深入解析了 Deno 2.0 的权限系统，涵盖主包和第三方包的权限控制机制，探讨了通过命令行参数、权限 API 和配置文件等多种权限授予方式，并提供了代码示例和运行指导，帮助开发者有效管理权限，提升应用安全性。
想飞的雪糕
50 0
想飞的雪糕
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
127 2
你都不懂
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
37 0

热门文章

最新文章

  • 1
    前端性能优化参考资料
  • 2
    前端，测试如何修改后端接口返回的响应数据
  • 3
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 4
    前端 时间个性化 插件 jquery.timeago.js
  • 5
    前端分页插件pagination
  • 6
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 7
    wordpress页面前端添加编辑按钮
  • 8
    深入了解Webpack：前端模块打包工具
  • 9
    前沿技术探索：构建更智能的前端开发体验
  • 10
    GIS前端—Popup标注视图
  • 1
    告别‘老司机’时代，AJAX与Fetch API让你的前端与Python后端无缝对接！
    59
  • 2
    现代前端开发中的响应式设计原则与实践
    90
  • 3
    现代前端开发中的响应式设计实践与优化
    60
  • 4
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 5
    前端项目部署问题总结
    65
  • 6
    前端框架与库 - React生命周期与Hooks
    50
  • 7
    前端性能优化都有那些方案 ？
    73
  • 8
    高级前端常见的面试题？
    102
  • 9
    前端框架与库 - React基础：组件、Props、State
    71
  • 10
    技术心得：前端点击按钮，导入excel文件，上传到后台，excel接收和更新数据
    52

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • Linux指令入门-文件与权限
  • Linux指令入门-系统管理
  • 1分钟SAE部署Web在线游戏
  • 搭建微信小程序
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云OSS设置跨域访问