基于vue框架搭建的通用后台管理系统

登录

通过路由守卫beforeEach判断是否存在token,如果token存在且账号密码正确,则能登录到首页。

登录页面:

 登录逻辑(较为简单版本)

login() {
      if (this.form.account == "admin" && this.form.password == "123456") {
        const token = mock.Random.guid();
        cookie.set("token", token);
        this.$router.push("/home");
      } else {
        this.$alert("账号或者密码错误", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "warning",
              message: `请重新输入`,
            });
          },
        });
      }
    },

首页部分

首页部分分为三部分,导航栏部分使用的是由Element ui 所提供的组件,主页面则使用 ECharts 对 mock 模拟的数据进行渲染,顶部 header 部分包含一个面包屑组件也可对页面进行跳转。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值