VUE项目实战14退出功能及优化EL按需导入提交Git

Posted 2021-10-10 光仔December

接上篇《13、登录与退出功能-保存token和页面权限控制》
上一篇我们介绍了如何保存token和进行页面权限控制，本篇我们来编写退出功能，以及优化Element-UI按需导入的形式。

一、退出功能实现

之前在登录页面，输入账号密码，通过后台接口进行认证，将获取到的token值保存在sessionStorage中，以保持登录状态。那么，有登录就有退出，我们来实现退出的功能。

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

核心代码只有这两行：

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

下面我们来具体实现。首先在Home.vue页面加一个退出的按钮：

<template>
    <div>
        <p>Home 组件</p>
        <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>

退出按钮使用el-button的“info”样式（灰色），并绑定了logout方法，将sessionStorage中的“token”项去除，并且将页面重新引导至登录页面。

效果：

再去查看sessionStorage中的token参数，已经被清除：

二、重新优化Element-UI按需导入

在项目的src/plugins文件夹下，有一个element.js，里面引入了我们需要的Element-UI的组件：

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

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message = Message

组件都是通过import引入的，大家可以发现基本上都

是“import xxx from 'element-ui'”的格式，我们可以将这种统一引入的方式进行合并，如下：

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

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message = Message

今后如果有新的Element-UI组件被加入进来，我们直接在上面花括号的“Message”后面加逗号，并新增新的组件名称在后面，即可（如果太长的话可以进行换行）。

三、提交登录代码

我们的登录模块的代码算是已经全部开发完毕了，现在我们需要将编写好的登录模块的代码，提交至远程的Gitee码云托管平台。

在vscode中，新建一个终端：

然后在终端中，首先执行“git status”，查看项目目前状态：

上面是发生了修改的文件，下面是新增的文件，这些都是与仓库进行对比后发生变化的内容。
我们将这些内容先提交到我们本地的暂存区，使用“git add .”命令：

此时再执行status命令，可以看到都变成了绿色，证明我们的变化都提交到了本地暂存区。
此时我们将变更内容提交至本地的login分支上（目前就在login分支，直接提交），指令为“git commit -m "完成了登录功能"”：

且目前我们可以看到此时项目在“login”分支上，接下来我们将login分支上的代码合并到master分支上：

首先使用“checkout”指令切换到master分支上，然后执行“merge”命令，合并login分支的所有代码。

代码合并完成之后，我们将本地仓库的代码，提交到远程仓库中，使用“git push”（之前我们已经设置好远程仓库地址了）：

这样就把最新的master代码，推送到了云端的码云中。
我们打开码云平台，找到我们的仓库，看看远程代码的更新情况：

目前我们只有一个master分支，需要将我们的login分支也推送到云端，此时需要切换到login分支，然后在push后面添加“-u origin login”即“git push -u origin login”，该指令代表我们要将本地的代码，提交到远程仓库的login分支：

我们查看一下码云平台的分支，可以看到login分支也创建进去了：

后面我们编写完代码，测试完毕无问题后，可以将分支代码合并到主分支上，然后提交主分支的代码。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/acmman/article/details/120399144