asp.net mvc post 后台model_前端项目 025 电商后台管理系统01

这个后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于 Vue 技术栈的 SPA 项目。

01 . 登录/退出功能

1 .1 登录概述

• 在登录页面输入用户名和密码
• 调用后台接口进行验证
• 通过验证之后，根据后台的响应状态跳转到项目主页

1.2. 登录业务的相关技术点
 http 是无状态的
 通过 cookie 在客户端记录状态
 通过 session 在服务器端记录状态
 通过 token 方式维持状态

存在跨域问题，回你采用token的方式进行登陆，token的原理如图所示

token原理

1.3 登录功能实现

1.3.1. 登录页面的布局

通过 Element-UI 组件实现布局

• el-form
• el-form-item el-input
• el-button
• 字体图标

登陆

代码结构

代码结构

1.3.2 登陆组件的数据绑定和数据验证

实现表单的数据绑定 v-model

<

绑定的数据：

 loginForm: {
 username: 'admin',
 password: '123456'}

实现表单的数据验证

防止用户犯错的情况下，尽可能让用户发现并纠正错误

From 使用 :rules="loginFormRules"属性来传入约定的校验规则

From-Item 使用prop="password" prop="username" 属性设置需要校验的字段名

loginFormRules

表单的重置

通过ref的引用拿到表单的实力对象

 resetLoginForm() {
 this.$refs.loginFormRef.resetFields()
    },

resetFields()是Element-UI自带的函数

登陆组件登陆前的预验证 this.$refs.loginFormRef.validate（）

login

登录组件根据预验证是否发起请求，

login

Message弹窗组件挂载到Vue原型当中

Vue

路由导航守卫控制访问权限
如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

// 为路由对象，添加 beforeEach 导航守卫 

退出功能实现原理
基于 token 的方式实现退出比较简单，只需要销毁本地的 token 即可。这样，后续的请求就不会携带 token ，必须重新登录生成一个新的 token 之后才可以访问页面。

// 清空token window.sessionStorage.clear() 
// 跳转到登录页 this.$router.push('/login')