Vue电商后台管理系统（1）

<template><div class="login_container"><div class="login_box"><!-- 头像区域 --><div class="avatar_box"><img src="../assets/logo.png" alt /></div><!-- 登录表单区域 --><el-formref="loginFormRef":model="loginForm":rules="loginFormRules"label-width="0px"class="login_form"><!-- 用户名 --><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><!-- 密码 --><el-form-item prop="password"><el-inputv-model="loginForm.password"prefix-icon="iconfont icon-3702mima"type="password"></el-input></el-form-item><!-- 按钮区域 --><el-form-item class="btns"><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div></div>
</template>

css样式：

<style lang="less" scoped>
.login_container {background-color: #2b4b6b;height: 100%;
}.login_box {width: 450px;height: 300px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);.avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}
}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;
}.btns {display: flex;justify-content: flex-end;
}
</style>

实现登录功能

绑定账户信息

<template><div class="long-content"><div class="biao"><div class="hide"><img src="../../assets/logo.png" alt="" /></div><div class="form"><el-form:model="ruleForm":rules="rules"ref="ruleForm"class="demo-ruleForm"><el-form-item prop="username"><el-inputv-model="ruleForm.username"prefix-icon="el-icon-user-solid"></el-input></el-form-item><el-form-item prop="password"><el-inputtype="password"v-model="ruleForm.password"prefix-icon="el-icon-lock"></el-input></el-form-item></el-form></div><div class="botton"><el-button type="primary" size="medium" @click="submitForm('ruleForm')">登录</el-button><el-button type="info" size="medium">重置</el-button></div></div></div>
</template><script>
export default {name: "",data() {return {ruleForm: {username: "",//用户名password: "",//密码},rules: {//校验用户名username: [{ required: true, message: "请输入用户户名", trigger: "blur" },{ min: 3, max: 8, message: "长度在 3 到 5 个字符", trigger: "blur" },],//校验密码password: [{ required: true, message: "请输入密码", trigger: "blur" },{min: 3,max: 12,message: "长度在 3 到 12 个字符",trigger: "blur",},],},};},methods: {//登录submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {let url = this.$store.state.url;this.$axios.post(`${url}login`, this.ruleForm).then((res) => {console.log(res);if (res.meta.status == 200) {// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中//1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问//1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中window.sessionStorage.setItem("token", res.data.token);this.$message.success(res.meta.msg);this.$router.push("/home");} else {this.$message.error(res.meta.msg);return false;}});} else {return false;}});},},
};
</script>

实现退出功能
当用户登录后进入后台，点击退出按钮即可实现退出功能。

即在Home.vue中添加一个退出按钮，并为其添加点击事件，当用户点击时，删除当前存储在session中的token信息，并且跳转至登录页面。

<template><div><el-button type="info" @click="logout">退出</el-button></div>
</template><script>
export default {methods: {logout() {window.sessionStorage.clear()this.$router.push('/login')}}
}
</script><style lang="less" scoped>
</style>

实现导航守卫功能
至此，登录功能基本实现，但存在一个bug，即在用户未登录的情况下，在地址栏输入http://localhost:8080/#/home地址时，也可以跳转至后台。

为了解决此bug，我们在router里挂载一个导航守卫路由，即在用户每次跳转前，验证用户所要跳转的地址，若为login页面则放行，若为其他页面，则查询当前session中是否有对应的token，若有则放行，反之，则强制跳转至登陆页面。

航守卫功能

至此，登录功能基本实现，但存在一个bug，即在用户未登录的情况下，在地址栏输入http://localhost:8080/#/home地址时，也可以跳转至后台。

Vue电商后台管理系统（1）相关推荐

Vue电商后台管理系统项目开发实战（一）
前言当下根据不同的应用场景,电商系统一般都提供了PC端,移动APP,移动Web,微信等多种访问方式.如下图. 不同的客户端共用同一个服务器,数据库,API.本次项目着重设计PC后台管理,供电商后台管 ...
9.1黑马Vue电商后台管理系统商品管理模块完善：编辑商品的功能
在原视频中,老师跳过了这个功能,我觉得自己去实现也可以锻炼自己,于是自己补充了编辑功能同用户管理,权限管理等之前各个模块的编辑功能不同,因为商品具有很多可编辑的选项,所以选择像添加商品一样,单独放在 ...
10.1 黑马Vue电商后台管理系统之完善订单管理模块--加入修改订单模块
效果如下: 实现如下: 1.我仍然保留了添加地址这一个对话框,但只是绑定在另一个按钮上面,而点击左侧第一个按钮就会跳转到"修改订单"模块 <template v-slot=& ...
10.2 黑马Vue电商后台管理系统完善订单模块--搜索订单（修改后端）
效果如下: 搜索时列表动态变化,在我专栏下另一篇文章写了,这篇文章不再讲述,这篇文章只讲述如何从后端(打开vue_api_server这个文件夹,而不是vue_shop)修改代码来实现这个功能我的思 ...
vue电商后台管理系统--订单管理篇
渲染订单table表格 <el-table :data="orderList" border stripe><el-ta ...
html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
Vue全家桶 - 电商后台管理系统项目开发实录（详）
目录 1. 项目概述 1.1 电商项目基本业务概述 1.2 电商后台管理系统的功能 1.3 电商后台管理系统的开发模式(前.后端分离) 2. 项目初始化 2.1 前端项目初始化步骤码云相关操作 2. ...
【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
文章目录 0. 项目介绍电商管理系统(Element-UI) 开发模式前端技术栈后端技术栈 1. 配置--初始化前端项目 ① 安装 Vue 脚手架 ② 通过 Vue 脚手架创建项目 ③ 配置 ...
Vue项目实战之电商后台管理系统(二) 主页模块
前言目录前言一.主页布局 1.1 整体布局 1.2 头部区域布局 1.3 左侧菜单布局 1.3.1 静态布局 1.3.2 通过axios请求拦截器来进行权限验证 1.3.3 通过axios获取左 ...

Vue电商后台管理系统（1）

Vue电商后台管理系统（1）

登录

Vue电商后台管理系统（1）相关推荐

最新文章

热门文章