Java的新项目学成在线笔记-day17（九）

3.4 前端
3.4.1 需求分析
在用户中心前端工程（xc-ui-pc-learning）开发退出页面。 3.4.2 Api方法
在用户中心工程增加退出的api方法
在base模块的login.js增加方法如下：
[mw_shl_code=applescript,true]/退出/ export const logout = params => {
return http.requestPost('/openapi/auth/userlogout'); }
[/mw_shl_code]
3.4.3退出页面
1、在用户中心工程创建退出页面
参考：

2、路由配置

[mw_shl_code=applescript,true]import Logout from '@/module/home/page/logout.vue';
import order_pay from '@/module/order/page/order_pay.vue';
// import LoginMini from '@/module/home/page/login_mini.vue';
export default [{
path: '/',
component: Home,
name: '个人中心',
hidden: true
},
{
path: '/login',
component: Login,
name: 'Login',
hidden: true
},
{
path: '/logout',[/mw_shl_code]
[mw_shl_code=applescript,true] component: Logout,
name: 'Logout',
hidden: true
},
....[/mw_shl_code]
3、退出方法 退出成功清除页面的sessionStorage 参考logout.vue
在created钩子方法请求退出方法

[mw_shl_code=applescript,true]created(){ loginApi.logout({}).then((res) => {
if(res.success){ sessionStorage.removeItem('activeUser');
this.$message('退出成功');
this.logoutsuccess = true
}else{
this.logoutsuccess = false
}
},
(res) => {
this.logoutsuccess = false
}); },
[/mw_shl_code]
3.4.4连接到退出页面
修改include/header.html

[mw_shl_code=applescript,true]<a href="javascript:;" @click="logout" v‐if="logined == true">退出</a>
[/mw_shl_code]
在include/header.html中添加element-ui库：

[mw_shl_code=applescript,true]<script src="/css/el/index.js"></script> 将此js加到head的最下边 [/mw_shl_code]
logout方法如下：

[mw_shl_code=applescript,true]logout: function () {
this.$confirm('确认退出吗?', '提示', {
}).then(() => {
//跳转到统一登陆
window.location = "http://ucenter.xuecheng.com/#/logout"
}).catch(() => {
});
},
[/mw_shl_code]
3.4.5 测试
1、用户登录成功
2、点击退出