柚见(伙伴匹配系统)第五期

后端个人信息接口

前端修改用户信息，点击提交；现在无法对接到后端，需要在后端新写一个接口/user/update。

控制层新增用户信息更新接口。
在这里插入图片描述

HttpServetRequest request:
前端的请求头中获取cookie,在后端查询登录态进行鉴权

User getLoginUser(HttpServetRequest request)

在这里插入图片描述

前端对接

const onSubmit = async (values) => {  
  const res =await myAxios.post("/user/login",{  
    password:password.value,  
    userAccount:userAccount.value  
    })  
  
  if(res.code===0 && res.data)  
  {  
    showSuccessToast("登录成功")  
  
    //登录成功跳转路由-- 回到主页  
    // router.push('/');  
    await router.replace("/");  
  
  }else{  
    showFailToast("登陆失败")  
  }  
  
}

用户信息获取

在用户个人信息页面上调取后端接口获取用户的信息。

//向后端发请求获取真数据  
const  user=ref();  
  
onMounted(async ()=>{  
  const res= await myAxios.get("user/current")  
  if(res.data && res.code===0)  
  {  
    showSuccessToast("获取用户信息成功")  
    user.value=res.data;  
  }else{  
    showFailToast("获取用户信息失败")  
  }  
})

在这里插入图片描述

种cookie

前端: 在全局的axios开启cookie配置,使得请求头中携带cookie

axios+vue 请求时如何携带cookie_vue axios cookie-CSDN博客

在这里插入图片描述

后端设置cookie允许在哪个域名下可携带。
(便于之后共享cookie)

server:  
port: 8080  
servlet:  
context-path: /api  
session:  
cookie:  
domain: localhost

用户信息修改

然后我们再回到最上面，用户信息修改。(这里一般情况下都会有点小问题。)

在这里插入图片描述

提取公共方法,将获取当前对象的方法实现封装

新建文件夹services,新建文件user.ts （访问后端获取，当前用户的信息。单独提取出来使用。然后通过get方法获取到想要的信息。）

import myAxios from "../plungins/myAxios.js";  
import { setCurrentUserState} from "../states/user.ts";  
  
export const getCurrentUser=async ()=>{  
  
    // const currentUser=getCurrentUserState();  
    // if(currentUser)    // {    //     return currentUser;    // }    //缓存还需要更新,麻烦  
    //当系统访问量不大的时候就 直接钩子函数每次刷新页面更新最新的数据  
  
    //不存在,则从远程获取当前对象  
    const res= await myAxios.get("user/current");  
    if(res.code === 0)  
    {  
        setCurrentUserState(res.data);  
        return res.data;  
    }  
  
    return null;  
  
}

在这里插入图片描述

实现一次访问,前端缓存当前用户的信息,之后再用到就从缓存中取,减少访问数据库次数

在这里插入图片描述

新建states文件夹，新建user.ts （创建一个方法可获取到的用户信息。相当于java中的get/set，然后全局都可以调用这个方法来获取当前用户的状态数据。）

在这里插入图片描述

然后是user.vue 页面的修改
在这里插入图片描述

await,异步方法,使用拿到的是promise对象

  
  
<template>  
  <template v-if="user">  
    <van-cell title="昵称" is-link @click="toEdit('username','昵称',user.username)" :value="user.username" />  
    <van-cell title="账户" is-link @click="toEdit('userAccount','账户',user.userAccount)" :value="user.userAccount"/>  
    <van-cell title="头像">  
      <img style="height: 48px;" :src="user.avatarUrl">  
    </van-cell>    <van-cell title="性别" is-link @click="toEdit('gender','性别',user.gender)" :value="user.gender"/>  
    <van-cell title="电话" is-link @click="toEdit('phone','电话',user.userPhone)" :value="user.userPhone"/>  
    <van-cell title="邮箱" is-link @click="toEdit('email','邮箱',user.email)" :value="user.email"/>  
    <van-cell title="星球编号" :value="user.planetCode"/>  
    <van-cell title="注册时间" :value="user.createTime"/>  
  </template>  
</template>  
  
<script setup>  
import {useRouter} from "vue-router";  
import {onMounted, ref} from "vue";  
  
import {showFailToast, showSuccessToast} from "vant";  
import {getCurrentUser} from "../services/user.ts";  
import {setCurrentUserState} from "../states/user.ts";  
  
  
//点击路由跳转  
//1.创建路由对象  
const router = useRouter();  
//2.路由跳转函数  
const toEdit=(editKey,editName,currentValue)=>{  
  router.push({  
    path:'/user/edit',  
    query:{  
      editKey,  
      editName,  
      currentValue,  
    }  
  })  
  
}  
  
  
//假数据模拟  
// const user={  
//   id: 789,  
//   userAccount: "963",  
//   username: "lxy11",  
//   phone: "13625635478",  
//   createTime: new Date(),  
//   email: "lxy11@123.com",  
//   avatarUrl: "https://pic.imgdb.cn/item/65b8f58d871b83018a468905.png",  
//   gender: '女',  
//   planetCode: "963"  
// }  
  
//向后端发请求获取真数据  
const  user=ref();  
  
onMounted(async ()=>{  
  const res= await getCurrentUser();  
  if(res)  
  {  
    user.value=res;  
    showSuccessToast("获取用户信息成功")  
  }else{  
    showFailToast("获取用户信息失败")  
  }  
})  
  
</script>  
<style scoped>  
  
</style>

UserEditPage.vue页面修改
在这里插入图片描述

<script setup>  
import {ref} from 'vue'  
import {useRoute, useRouter} from "vue-router";  
import myAxios from "../plungins/myAxios.js";  
import {showFailToast, showSuccessToast} from "vant";  
import {getCurrentUserState} from "../states/user.ts";  
import {getCurrentUser} from "../services/user.ts";  
  
  
const route = useRoute();  
const router=useRouter();  
  
const editUser=ref({  
  editKey:route.query.editKey,//gender  
  currentValue:route.query.currentValue,//'女'  
  editName:route.query.editName,//'性别'  
})  
const onSubmit = async (values) => {  
  //向后端发请求获取真数据  
  // const  user=await getCurrentUser();  
  
  // 获取当前用户  
  let user=await getCurrentUserState();  
  
  //如果在当前页面刷新,user=null,why  
  if(!user)  
  {  
    user=await getCurrentUser();  
  }  
  
  //使用axios向后端发起请求  
  const res = await myAxios.post("/user/update",{  
    //还未实现登录,使用默认id  
    //'id':1,    'id':user.id,  
    //[] 语法,将其括起来,不用写死,可以传递变量  
    [editUser.value.editKey]: editUser.value.currentValue  
  })  
  
  if(res.data>0 && res.code===0)  
  {  
    showSuccessToast("修改成功")  
    //返回上一页  
    router.back();  
  }else{  
    showFailToast("修改失败")  
  }  
  
};  
  
  
  
</script>  
<template>  
  <van-form @submit="onSubmit">  
    <van-cell-group inset>  
      <van-field          v-model="editUser.currentValue"  
          :name="editUser.editKey"  
          :label="editUser.editName"  
         :placeholder="`请输入${editUser.editName}`"  
      />  
  
    </van-cell-group>    <div style="margin: 16px;">  
      <van-button round block type="primary" native-type="submit">  
        提交  
      </van-button>  
    </div>  </van-form>  
</template>  
  
<style scoped>  
  
 </style>