一、登录退出功能

0前端项目初始化步骤

前端项目初始化步骤.png

0.1安装Vue脚手架

npm install vue/cli --save

0.2通过vue脚手架创建项目

vue ui 可以调出可视化项目创建界面
也可以通过
vue create +项目名称

0.3配置Vue路由

在创建脚手架项目时选择配置路由即可

0.4element-UI

通过可视化界面安装element插件即可

也可以通过命令行来安装

0.5配置axios库

通过可视化界面依赖里面添加

1 登录页面的概述

前端项目初始化步骤.png

1.1登录中token的原理

登录token原理讲解.png

1.2登录界面所用elment-ui组件

登录界面所用e-ui组件.png

1.3 Vue-cli项目初始化处理

（1）首先进入./App.vue这个文件里，删除template>标签里的默认内容

（2）然后删除./src/component中的所以默认组件，包括Home.vue和About.vue,这里删除后会报错，因为在路由里面引用了这两个组件

（3）最后在./router/index.js里面把路由routes数组里面的东西删除了

1.4创建Login.vue组件

（1）然后在./src/router/index.js里面引入Login组件，并设置路由和重定向，如图所示：

router使用方法.png

路由使用.png

（2）然后再返回App.vue组件中，添加路由占位符如图所示

添加路由占位符.png

（3）最后在./src/assets/css/global.js里面设置全局变量，设置完全集变量要从入口main.js中引入，如图所示

main入口引入全局样式表.png

1.5 element-ui的使用方法

（1）首先进入element-ui官网，然后选择需要的组件然后复制代码到组件的template标签里面

element使用方法.png

（2)在组件引用后需要在./src/plugins/element.js中导入：

element使用方法2.png

（3）表单数据绑定

1.首先需要在标签中添加:model="xxx"，然后再给表单数据绑定

表单数据绑定1.png

2.然后再data中存入一个对象

表单数据绑定2.png

1.6 表单验证

（1)首先在element-ui找到表单验证模块，选择你需要的表单验证类型。使用方法需要在绑定：rules=“xxx”属性，然后在data中定义一个xxx对象，使用时在表单中加入prop=“xxx”

表单验证1.png

表单验证2.png

1.7 重置表单

首先是在为当前组件实例定义一个名，这里叫loginFormRef，在重置表单上添加一个点击事件，打印出this，可以看见通过this.$refs.loginFormRef.resetFields()可以对表单进行重置，如图所示

登录表单重置.gif

1.8 表单预校验

主要作用就是校验表单格式是否合法，用法与1.7表单重置类似，如图所示

登录表单与校验gif.gif 最终代码：

login(){
            // 预校验
            this.$refs.loginFormRef.validate(async(valid)=>{
                // console.log(valid);
               if(!valid) {
                   return;
                   }
               else{
                //login是请求路径，this.loginForm是请求对象
               const { data:res } = await this.$http.post('login',this.loginForm)
            //    console.log(res);
                if(res.meta.status !== 200) {
                   return this.$message.error('登录失败')
                   }else{
                       this.$message.success('登录成功');
                    //    将登录成功后的token，保存到客户端的sessionStorage中，因为需要登录成功后才能访问其它API
                       window.sessionStorage.setItem('token',res.data.token);
                    //    将导航栏路径改为/home
                       this.$router.push('/home')

                   }
               }

1.9 配置axios发起登录请求

（1）首先要在main.js里面配置相关信息，如图所示

（2）然后在login.vue利用axios进行请求

1.10 登录成功后完成的操作

登录验证通过后，进入主页

1.11 路由导航守卫控制页面访问权限

beforeEach函数就叫路由守卫，它接受一个回调函数， to代表将要访问的路径，from代表从哪个路径跳转过来，next是一个函数，表示放行

电商后台管理系统-1.登录退出功能模块