项目日记(在线办公项目)day2021/03/02

项目日记day0302

一、退出登录功能的实现

1.对SpringScurity进行退出登录的相关配置

此时要注意，因为退出登陆后凭证既销毁，所以要将"/login/logout"添加到不需要凭证可以访问的设置上，否则会报跨域错误。

2.在登陆处理器中编写退出登录的方法

/**
     * 退出登录
     * @return
     */
    @GetMapping("/logout")
    public Result logout(){
        return Result.success("您已成功退出系统!");
    }

3.在前端中使用下拉菜单command事件实现退出效果的实现

4.效果：

二、个人信息的获取

个人信息的获取有两种方法实现：

• 通过路由传参实现
• 向服务器发送请求，服务器向前端返回用户信息

1.通过路由传参实现

Vue中路由传参有三种方式：

1.使用路径传参

在路由配置中设置参数变量，格式path:/showBookDesc/:book_id(:book_id为占位符，接收方使用该参数名获得传入的参数)

在静态路由中使用<router-link :to="showBook/"+book.book_id>XXX</router-link>

在动态路由中使用this.$router.push({path:`showBook/${book_id}`})

注意：ShowBook为路由配置中path属性值，页面刷新后数据不会丢失，地址栏中不显示参数。

2.使用静态路由直接传递参数

静态路由使用方式：<router-link :to="{name:'ShowBook',params:{'book_id':book.book_id}}">

动态路由使用方式：this.$router.push({name:'ShowBook',params:{book_id:book_id}}})

注意：ShowBook为路由配置中name属性值，参数为一个json对象，页面刷新后数据会丢失。

3.使用query传递参数

静态路由使用方式：<router-link :to="{path:'/ShowBook',query:{book_id=book_id}}">XXX</router-link>

动态路由使用方式：

this.$router.push({
    path:"/main/main", //指定路由路径
    query:{ //指定参数
        account_name:result.data
    }
});

注意：ShowBook为路由配置中的path属性值，页面刷新后数据不丢失，地址栏中使用?号分隔符传参。

Vue中获取路由参数的方式：

• this.$route.params.book_id
• this.$route.query.book_id

当前案例使用query传参：

当前案例使用路径传参：

使用以上两种方式进行参数传递，地址栏中都会显示传递的参数，如果要使用静态路由传参的方式，页面刷新后数据又会丢失，所以最好的方法是通过服务器来获取用户信息。

2.服务器获取用户信息

在服务端的主菜单生成控制器中，加入一个获取用户信息的方法，获取当前登陆者的用户名。

/**
     * 获取用户信息
     * @param curAccount 当前登录用户，通过@SessionAttribute注解获取Constant.SESSION_CUR_ACCOUNT为key的值，赋给curAccount
     * @return 当前登录者的姓名
     */
    @GetMapping("/getUserInfo")
    public String getUserInfo(@SessionAttribute(Constant.SESSION_CUR_ACCOUNT) CurAccount curAccount){
        return curAccount.getAccount_name();
    }

修改前端

测试：