黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day17（九） [打印本页]

---

作者: 谷粒姐姐    时间: 2019-6-25 16:14
标题: 【郑州校区】Java的新项目学成在线笔记-day17（九）
3.4 前端
3.4.1 需求分析
在用户中心前端工程（xc-ui-pc-learning）开发退出页面。   3.4.2 Api方法
在用户中心工程增加退出的api方法
在base模块的login.js增加方法如下：

[AppleScript] 纯文本查看 复制代码

/*退出*/ export const logout = params => { 

  return http.requestPost('/openapi/auth/userlogout'); }

3.4.3退出页面
1、在用户中心工程创建退出页面
参考：


2、路由配置

[AppleScript] 纯文本查看 复制代码

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',

[AppleScript] 纯文本查看 复制代码

 component: Logout,  

   name: 'Logout',   

  hidden: true  

 },

   ....

3、退出方法 退出成功清除页面的sessionStorage 参考logout.vue
在created钩子方法请求退出方法

[AppleScript] 纯文本查看 复制代码

created(){    loginApi.logout({}).then((res) => {     

   if(res.success){          sessionStorage.removeItem('activeUser');     

     this.$message('退出成功');       

   this.logoutsuccess = true    

    }else{        

  this.logoutsuccess = false   

     }   

   },  

    (res) => {    

    this.logoutsuccess = false   

   });  }, 

3.4.4连接到退出页面
修改include/header.html

[AppleScript] 纯文本查看 复制代码

<a href="javascript:;" @click="logout" v‐if="logined == true">退出</a> 

在include/header.html中添加element-ui库：

[AppleScript] 纯文本查看 复制代码

<script src="/css/el/index.js"></script>  将此js加到head的最下边 

logout方法如下：

[AppleScript] 纯文本查看 复制代码

logout: function () {    

              this.$confirm('确认退出吗?', '提示', {       

           }).then(() => {         

             //跳转到统一登陆         

             window.location = "http://ucenter.xuecheng.com/#/logout"     

             }).catch(() => {            

        });      

        }, 

3.4.5 测试
1、用户登录成功
2、点击退出

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2