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

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

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

需要使用的技术栈：脚手架、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
目录
相关文章
爱的不是纯牛奶-47754
|
1月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能：策略与实践
在现代Web开发中，代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略，包括动态导入、路由分割等方法，并探讨在React、Vue、Angular等前端框架中的具体应用。
爱的不是纯牛奶-47754
39 1
多客潇潇
|
9天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣，提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心，通过用户行为数据分析和机器学习提高匹配准确性。
多客潇潇
38 3
DK方方
|
7天前
|
前端开发 搜索推荐 安全
陪玩系统架构设计陪玩系统前后端开发，陪玩前端设计是如何让人眼前一亮的?
陪玩系统的架构设计、前后端开发及前端设计是构建吸引用户、功能完善的平台关键。架构需考虑用户需求、技术选型、安全性等，确保稳定性和扩展性。前端可选用React、Vue或Uniapp，后端用Spring Boot或Django，数据库结合MySQL和MongoDB。功能涵盖用户管理、陪玩者管理、订单处理、智能匹配与通讯。安全性方面采用SSL加密和定期漏洞扫描。前端设计注重美观、易用及个性化推荐，提升用户体验和平台粘性。
DK方方
33 0
html的七十二变
|
25天前
|
缓存 监控 前端开发
探索前端性能优化：关键策略与代码实例
本文深入探讨前端性能优化的关键策略，结合实际代码示例，帮助开发者提升网页加载速度和用户体验，涵盖资源压缩、懒加载、缓存机制等技术。
html的七十二变
66 4
ZOMI酱
|
25天前
|
人工智能 自然语言处理 前端开发
【AI系统】LLVM 前端和优化层
本文介绍了 LLVM 编译器的核心概念——LLVM IR，并详细讲解了 LLVM 的前端 Clang 如何将 C、C++ 等高级语言代码转换为 LLVM IR。文章还探讨了编译过程中的词法分析、语法分析和语义分析三个关键步骤，以及 LLVM 优化层的 Pass 机制，包括分析 Pass 和转换 Pass 的作用及依赖关系。
ZOMI酱
27 3
跃@sir
|
1月前
|
Web App开发 缓存 监控
前端性能优化实战：从代码到部署的全面策略
前端性能优化实战：从代码到部署的全面策略
跃@sir
32 1
Star时光
|
1月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战：从代码到部署的全面指南
前端性能优化实战：从代码到部署的全面指南
Star时光
36 1
一缕微风绕指柔
|
1月前
|
缓存 监控 前端开发
前端性能优化：从代码到部署的全面策略
前端性能优化：从代码到部署的全面策略
一缕微风绕指柔
38 0
想飞的雪糕
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
192 2
你都不懂
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
56 0

热门文章

最新文章

  • 1
    从0开始打造一款APP：前端+搭建本机服务，定制暖冬卫衣先到先得
  • 2
    WeaveFox：蚂蚁集团推出 AI 前端智能研发平台，能够根据设计图直接生成源代码，支持多种客户端和技术栈
  • 3
    前端页面加载性能指标之LCP
  • 4
    前端必须掌握的设计模式——单例模式
  • 5
    （前端3D模型开发）网页三维CAD中加载和保存STEP模型
  • 6
    探索无界：前端开发中的响应式设计深度实践与思考###
  • 7
    探索前端性能优化：关键策略与代码实例
  • 8
    前端自动化测试
  • 9
    探索无界：前端开发中的响应式设计哲学####
  • 10
    前端状态管理：Vuex 核心概念与实战
  • 1
    前端基础之HTML
    16
  • 2
    前端必须掌握的设计模式——观察者模式
    23
  • 3
    uniapp开发鸿蒙，是前端新出路吗？
    37
  • 4
    WeaveFox：蚂蚁集团推出 AI 前端智能研发平台，能够根据设计图直接生成源代码，支持多种客户端和技术栈
    334
  • 5
    陪玩系统架构设计陪玩系统前后端开发，陪玩前端设计是如何让人眼前一亮的?
    33
  • 6
    前端必须掌握的设计模式——代理模式
    20
  • 7
    前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
    36
  • 8
    婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
    38
  • 9
    前端必须掌握的设计模式——适配器模式
    17
  • 10
    前端echarts加标记点及标记线和提示框
    30

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)