vue实现电商后台管理系统---（2）登录退出功能

最终的界面结果截图：

实现步骤与思路：
一、登录功能：
（1）在components文件夹下创建一个Login.vue的组件，在路由文件（index.js）中导入登录页组件：import Home from '../components/Home.vue'，并且给根组件（App.vue）添加一个路由占位符<router-view></router-view>，在路由文件中添加路由规则{ path: '/login', component: Login }。
（2）编写结构和样式以及行为：
思路：用户输入登录用户名和密码，如果用户输入的都符合规范则调用后台接口，如果后台返回的数据中的status为200则表示后台中有这个用户，也就代表登录成功，登录成功与否都会有消息提示，若登录成功则会跳转到主页中。
Login.vue的完整代码如下：

<template>
   <div class="login-container">
      <div class="login-box">
          <!-- 头像区域 -->
        <div class="portrait">
            <img src="../assets/portrait.jpg" alt="">
        </div>
        <!-- 表单区域 ref属性可以获取表单对象-->
        <el-form ref="loginFormRef" label-width="0px" class="login-form" :model="loginForm" :rules="loginFormRules">
            <!-- 用户名 -->
            <el-form-item prop="username">
            <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username" placeholder="请输入用户名">
            </el-input>
            <span class="el-icon-circle-close" @click="del"></span>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
            <el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" :type="typepwd" placeholder="请输入密码">
            </el-input>
             <span class="el-icon-view" @click="check"></span>
            </el-form-item>
            <el-form-item class="btns">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>

      </div>
</div>

</template>

<script>
export default {
    data:function(){
        return {
            // 密码输入框type属性值
            typepwd:'password',
            // 表单输入数据验证
            loginForm:{
                username:'',
                password:''
            },
            loginFormRules:{
            // 用户名输入校验规则
            username:[
                {required: true, message: '请输入登录用户名', trigger: 'blur'},
                { min: 2, max: 10, message: '长度在 2 到 5 个字符', trigger: 'blur' }
            ],
            // 密码输入校验规则
            password:[
                {required: true, message: '请输入登录密码', trigger: 'blur'},
                { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
            ]
            }
        }
    },
    methods:{
        // 重置按钮
        reset:function(){
            // console.log(this);
            this.$refs.loginFormRef.resetFields();
        },
        // 登录按钮
        login:function(){
            this.$refs.loginFormRef.validate(async valid => {
            // console.log(valid); validate()是表单对象的一个方法，用于验证输入的表单验证是否通过，都符合valid为true
            if(valid) {
                // 用async-await的方法为了获取简单的响应对象 用对象解构的方法获取具体的返回数据
            var {data:res}= await this.$http.post('login',this.loginForm);
            // console.log(res);
            if(res.meta.status==200){
                // alert('登录成功');改成使用element-ui的消息提示最近
                this.$message.success('登录成功');
                // 1.将登录成功之后的token保存到客户端的sessionStorage中，不保存在永久保存的localStorage
                     //项目中除了登录之外的其他API接口，必须在登录之后才能访问
                    //  token只应在当前网站打开期间生效，所以保存在sessionStorage中
                // setItem()方法设置指定的存储对象项的值。setItem()方法属于Storage对象，可以是localStorage对象 ，也可以是sessionStorrage对象。指定此域的localStorage的值
                window.sessionStorage.setItem('token',res.data.token);
                // 2.通过编程式导航跳转到后台主页，路由地址是/home
                this.$router.push('/home');
            }else {
                // alert('登录失败');
                this.$message.error('登录失败');
            }
            }else {
                alert('请输入规范的用户名和密码');
            }
            })
        },
        // 点击输入用户表单删除框中的内容
        del:function() {
            this.loginForm.username = '';
        },
        // 点击眼睛查看密码
        check:function(){
            this.typepwd = this.typepwd=='password'?'text':'password';
        }
    }
}
</script>

<style lang="less" scoped>
.login-container {
    height: 100%;
    background-color:#2b4b6b;
}
.login-box {
    width:450px;
    height:300px;
    background-color:#fff;
    border-radius: 3px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.portrait {
width: 130px;
height: 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;
}
.el-icon-view ,.el-icon-circle-close{
    position: absolute;
    right: 10px;
    top:15px;
}
</style>

全局样式表：

html,
body,
#app {
    height: 100%;
    padding: 0;
    margin: 0;
}

在编写这个组件的功能学习到的东西：

• 对less定义样式的语法有了初步的了解，可以使用less来嵌套写样式
• flex布局：在对登录按钮和重置按钮时使用

.btns {
    display:flex;
    justify-content: flex-end;
}

使其靠右对齐。

• 对element-ui的使用方法有了更进一步：如果在安装插件时选择的是按需分配，则需要自己手动导入每个用到的组件：首先需要在plugins文件夹下的element.js文件中导入，然后再在Login.vue中使用。同时有些组件导入后可以直接使用，但是有些组件需要先挂载到Vue的原型对象中才可以使用。
  项目中需要导入的组件：

import { Button, Form, FormItem, Input, Message } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
    // 导入Message消息提示组件，将其挂载到vue原型对象中，为了每个组件都可以使用this.$message来调用
Vue.prototype.$message = Message;

• 使用element-ui如何对表单添加校验规则：首先需要为表单单向绑定一个rules属性，然后在data中定义不同表单输入框的规则，再在每个输入框中使用prop属性进行绑定规则。
• 对表单进行重置：使用表单对象中的resetFields()方法来进行重置，获取表单对象使用给表单添加一个ref属性来获取。
• 对输入表单的值进行验证：使用表单对象中的validate()方法来进行验证，第一个参数是对用户输入的数据是否符合校验规则的判断，如果符合则为true，有一个不符合为false。
• 在入口文件中导入axios依赖并进行相关配置：

// 导入axios
import axios from 'axios';
// 配置默认请求地址
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
// 将axios挂载到vue原型上 为了可以通过this.$http就可以访问到
Vue.prototype.$http = axios;

• 将token值保存到sessionStorage中：使用setItem()方法为用户登录成功之后添加一个token属性，用来为其验证身份，为了判断是否登录成功，有token值则表示登录成功，没有则表示没有登录，以后访问的页面都需要先经过登录之后才可以访问。
• 挂载路由导航守卫：为了防止用户直接在地址栏输入网址就可以访问到除了登录页之外的页面，所以需要设置路由导航守卫来使用户进行登录后才可以访问除了登录页之外的其他页面：
  使用路由的beforeEach()方法来进行挂载。

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
    // to将要访问的路径
    // from代表从哪个跳转而来
    // next一个函数,表示放行,若有参数则表示强制跳转的路径
    if (to.path == "/login") return next();
    const tokenStr = window.sessionStorage.getItem('token');
    if (!tokenStr) return next('/login');
    next();
})

二、退出功能：
先简单的实现一下这个功能，在components文件夹下新建一个文件Home.vue,在主页Home.vue中写入来实现：

<template>
    <div>
        <el-button type="info" @click="quit">退出</el-button>
    </div>
</template>

<script>
export default {
    methods:{
        quit:function(){
            // 退出功能主要是利用清除token的原理来实现
            // 清除token
            window.sessionStorage.clear();
            // 退出后回到登录页面
            this.$router.push('/login');
            // 显示退出成功
            this.$message.success('退出成功');
        }
    }
}
</script>

<style lang="less" scoped>

</style>

输入用户名（admin），密码（123456），点击登录之后跳转到主页然后点击退出按钮进行退出，退回到登录页面。

三、将登录退出功能上传到码云：
提示：在编写登录退出功能前新建一个login分支git checkout -b login

（1）首先使用git status查看项目修改和新增的文件都有哪些

（2）将这些文件都添加到暂存区：git add .

（3）重新查看一下目录是否干净：

（4）把完成登录退出功能的项目的暂存区提交到本地仓库：git commit -m "文本说明"

（5）将login分支合并到master主分支：首先需要切换到主分支（git checkout master），git branch是查看哪个分支在当前目录，然后再进行合并：git merge 被合并分支的名称


（6）将分支推送到码云：git push，如果是新建的分支第一次推送到码云则使用git push -u origiin 远程分支的名称（都是要切换到要推送分支的目录下进行推送）。
1）推送主分支：


2）推送login分支：

到这里登录退出功能就告一段落咯。