vue登录之后显示个人信息

104 阅读 0 评论 69 点赞

我是靠谱客的博主壮观星月，这篇文章主要介绍vue登录之后显示个人信息，现在分享给大家，希望可以做个参考。

1.登录之后跳转到个人信息页面

2.在个人信息页面将session中存储的数据取出

3.根据用户名查询数据库，进而显示到页面上

前端使用的是element-ui 框架，后台springboot

前端代码
1.登录之后跳转到个人信息页面，登录数据存到session中

复制代码

1
2
3
4
登录逻辑，
         window.sessionStorage.setItem("username",res.user.username);//存储user对象
                 console.log(res.user.username)

2.个人信息页面取session中，传到个人中心页面，将查出的数据显示在页面上

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 methods:{  
     async submit(){
         var name = sessionStorage.getItem("username");
          const {data:res} = await this.$http.post(`select/${name}`)
          this.userList=res.data
     },
    },
    
 <!-- 用户列表  border 边框 stripe 隔行变色 -->
       <el-table :data="userList" border stripe>
        <el-table-column type="index"></el-table-column>
          <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="密码" prop="password"></el-table-column>
        <el-table-column label="角色" prop="role"></el-table-column>  
        <el-table-column label="操作">
         </el-table-column>
      </el-table>

后端

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
dao层
 //显示个人信息
    public List<User>   getmessage(@Param("username") String username);
mapper层
 <select id="getmessage" resultType="com.ma.bean.User">
        SELECT *FROM user
       	WHERE username=#{username}
    </select>
controller层
//根据用户名查询
    @RequestMapping("/select/{username}")
    public String select(@PathVariable("username") String username){
        String flag="error";
        List<User> us = userDao.getmessage(username);
        System.out.println(us);
        HashMap<String, Object> res = new HashMap<>();
        if(us!=null){
            flag="ok";
        }
        res.put("flag",flag);
        res.put("shu",us);
        System.out.println(res);
        String res_json = JSON.toJSONString(res);
        return res_json;

    }