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

本文主要是介绍柚见(伙伴匹配系统)第五期，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

后端个人信息接口

前端修改用户信息，点击提交；现在无法对接到后端，需要在后端新写一个接口/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>