知识星球-伙伴匹配系统05

绝地灬酷狼 2023-10-14 19:59 2阅读 0赞

#### 伙伴匹配系统05 ####

*   *  实现目标：
     *  1.开发登录
     *   *  1.1新建一个UserLogin.vue组件，添加路由跳转
         *  1.2发现Vant有现成的直接拿来用
         *  1.3UserLoginPage.vue代码展示
         *  1.4测试，访问
     *  2.完善用户信息页面
     *   *  2.1更新用户信息页面组件代码
         *  2.2修复后台不认识前台
         *  2.3重新登录，成功获取到当前登录用户的信息
     *  3.开发修改个人信息
     *   *  3.1先写后端接口==>更新用户信息的接口
         *  3.3前端添加一个states/user.ts
         *  3.4将请求用户信息的抽出来单独封装
         *  3.5优化用户信息界面代码
         *  3.6完善修改界面代码
         *  3.7测试

### 实现目标： ###

1.开发登录

2.完善用户信息展示页面，解决问题

3.用户修改页面前端，后端开发和联调

### 1.开发登录 ###

#### 1.1新建一个UserLogin.vue组件，添加路由跳转 ####

![image-20230814194256315][]

#### 1.2发现Vant有现成的直接拿来用 ####

![image-20230814194744229][]

#### 1.3UserLoginPage.vue代码展示 ####

<template>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              v-model="userAccount"
              name="userAccount"
              label="账号"
              placeholder="请输入账号"
              :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
              v-model="userPassword"
              type="password"
              name="userPassword"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    
    </template>
    
    <script setup lang="ts">
    
    import {useRouter} from "vue-router";
    import { ref } from 'vue';
    
    const router = useRouter();
    
    
    import MyAxios from "../plugins/myAxios";
    import {Toast} from "vant";
    
    
    const userAccount = ref('');
    const userPassword = ref('');
    
    const onSubmit = async () => {
      const res = await MyAxios.post('/user/login',{
        userAccount:userAccount.value,
        userPassword:userPassword.value,
      })
      console.log(res,'用户登录')
      if(res.code === 0 && res.data){
        Toast.success('登录成功')
        router.replace('/');//replace指替换掉页面，用户如果返回的话就不会回到登录页面了
      }else {
        Toast.fail('登录失败')
      }
    };
    
    </script>
    
    <style scoped>
    
    </style>

![image-20230814204355140][]

#### 1.4测试，访问 ####

http://localhost:3000/#/user/login

![登录][60f71196534c73a07cfc0d76fa5da95a.gif]

![image-20230814204201844][]

好，当我们登录成功之后就可以拿到用户信息页面，可以将死数据换为活的

### 2.完善用户信息页面 ###

#### 2.1更新用户信息页面组件代码 ####

<template>
    
      <template v-if="user">
        <van-cell title="昵称" is-link :value="user.username" @click="toEdit('username','昵称',user.username)"/>
        <van-cell title="账号" :value="user.userAccount"/>
        <van-cell title="头像" is-link to="/user/edit" :value="user.avatarUrl">
          <img style="height:48px" :src="user.avatarUrl">
        </van-cell>
        <van-cell title="性别" is-link :value="user.gender" @click="toEdit('gender','性别',user.gender)"/>
        <van-cell title="电话" is-link :value="user.phone" @click="toEdit('phone','电话',user.phone)"/>
        <van-cell title="邮箱" is-link :value="user.email" @click="toEdit('email','邮箱',user.email)"/>
        <van-cell title="星球编号" :value="user.planetCode"/>
        <van-cell title="注册时间" :value="user.createTime"/>
      </template>
    
    </template>
    
    <script setup lang="ts">
    import {useRouter} from "vue-router";
    import {onMounted, ref} from "vue";
    import MyAxios from "../plugins/myAxios";
    import {Toast} from "vant";
    
    const router = useRouter();
    
    const user = ref();
    
    onMounted(async () => {
      const res = await MyAxios.get('/user/current');
      if (res.code === 0) {
        user.value = res.data;
        Toast.success('获取用户信息成功')
      } else {
        Toast.fail('获取用户信息失败')
      }
    })
    
    const toEdit = (editKey: string, editName: string, currentValue: string) => {
      router.push({
        path: '/user/edit',
        query: {
          editKey,
          editName,
          currentValue
        }
      })
    }
    </script>
    
    <style scoped>
    
    </style>

#### 2.2修复后台不认识前台 ####

然后等登录发现获取不到数据

![image-20230814211804076][]

登录之后再去查询的时候发现还是提示未登录，发现axios请求时没有带cookie传给后台

修改MyAxios.ts代码

![image-20230814211932620][]

#### 2.3重新登录，成功获取到当前登录用户的信息 ####

![image-20230814212723495][]

好接下来我们就可以开发一下用户信息的修改

### 3.开发修改个人信息 ###

#### 3.1先写后端接口==>更新用户信息的接口 ####

@PostMapping("/update")
        public BaseResponse<Integer> updateUser(@RequestBody User user,HttpServletRequest request){
        
            //1.校验参数是否为空
            if(user==null){
        
                throw new BusinessException(ErrorCode.PARAMS_ERROR);//表示请求参数错误的或者为空异常
            }
            //2.获取当前登录用户，将当前登录用户作为参数传递
            User loginUser = userService.getLoginUser(request);//实现如下图
            //3.校验权限
            int result = userService.updateUser(user,loginUser);//实现如下图
            //4.触发更新
            return ResultUtils.success(result);
        }

![image-20230814191539571][]

![image-20230814191449973][]

后端接口开发完成

#### 3.3前端添加一个states/user.ts ####

![image-20230814225927479][]

#### 3.4将请求用户信息的抽出来单独封装 ####

![image-20230814230022462][]

#### 3.5优化用户信息界面代码 ####

![image-20230814230257531][]

#### 3.6完善修改界面代码 ####

![image-20230814230200847][]

#### 3.7测试 ####

![修改][d355afd6cc3c6779ffa0f1df79f10348.gif]

[image-20230814194256315]: https://img-blog.csdnimg.cn/img_convert/e996361fab6f9ae89711a0a867f10d7c.png
[image-20230814194744229]: https://img-blog.csdnimg.cn/img_convert/1e0572ad8ae70b8f104cea4445a5cab9.png
[image-20230814204355140]: https://img-blog.csdnimg.cn/img_convert/703d03d45a0878743ab80f3a5a3a5622.png
[60f71196534c73a07cfc0d76fa5da95a.gif]: https://img-blog.csdnimg.cn/img_convert/60f71196534c73a07cfc0d76fa5da95a.gif
[image-20230814204201844]: https://img-blog.csdnimg.cn/img_convert/18bf5cdfd3217cf9422765c7de5c0a58.png
[image-20230814211804076]: https://img-blog.csdnimg.cn/img_convert/ad767293fea5e4395db2bdc765fadd08.png
[image-20230814211932620]: https://img-blog.csdnimg.cn/img_convert/540328207e92a8a679a24066b7e57c5f.png
[image-20230814212723495]: https://img-blog.csdnimg.cn/img_convert/736e891e3636f29a62739421c221e81b.png
[image-20230814191539571]: https://img-blog.csdnimg.cn/img_convert/b1290aeebc21bf7cffcc7ff367b7c42c.png
[image-20230814191449973]: https://img-blog.csdnimg.cn/img_convert/4580f308722137e11917c0eea46ffd5d.png
[image-20230814225927479]: https://img-blog.csdnimg.cn/img_convert/d7f4f96740ed2c9df25ede5a4d0b2acc.png
[image-20230814230022462]: https://img-blog.csdnimg.cn/img_convert/0aa231925f0718c15113e6dcd383a99e.png
[image-20230814230257531]: https://img-blog.csdnimg.cn/img_convert/0b6c6c7586035db4914686dfebde2838.png
[image-20230814230200847]: https://img-blog.csdnimg.cn/img_convert/acb4c6a14c182c37cea4cbba0a5a7243.png
[d355afd6cc3c6779ffa0f1df79f10348.gif]: https://img-blog.csdnimg.cn/img_convert/d355afd6cc3c6779ffa0f1df79f10348.gif