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

渡边彻彻泽一

已于 2023-08-21 19:57:17 修改

阅读量266

点赞数

分类专栏：伙伴匹配系统学习笔记文章标签： spring boot vue.js

于 2023-08-16 22:35:13 首次发布

本文链接：https://blog.csdn.net/qq_52642109/article/details/132330414

版权

伙伴匹配系统学习笔记专栏收录该内容

7 篇文章 4 订阅

订阅专栏

伙伴匹配系统06

目标

开发主页（默认推荐和自己兴趣相当的用户）
导入模拟数据100万条

1.开发主页

思路：最简单方式List列表

1.1先将SearchPage.vue中的复制代码拿来用一下

<template>
  <van-card
      v-for="user in userList"
      :desc="user.profile"
      :title="`${user.username} (${user.planetCode})`"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px;margin-top: 8px">
        {{ tag }}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini">联系我</van-button>
    </template>
  </van-card>
  <van-empty v-if="!userList||userList.length<1" image="search" description="数据为空" />
</template>

<script setup >
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import qs from 'qs';

const route =useRoute();

const { tags }=route.query;

const userList = ref([])

onMounted(async () =>{
  const userListData= await myAxios.get('/user/recommend', {
    params: {
    },
  })
      .then(function (response) {
        console.log('/user/recommend===>succeed',response);
        Toast.success('请求成功')
        return response?.data;
      })
      .catch(function (error) {
        console.error('/user/recommend===>error',error);
        Toast.fail('请求失败')
      });
  if (userListData){
    userListData.forEach(user=>{
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }

})


</script>

<style scoped>

</style>

1.2开发后台接口

    @GetMapping("/recommend")
    public BaseResponse<List<User>> recommendUsers(HttpServletRequest request) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        List<User> userList = userService.list(queryWrapper);
        List<User> list = userList.stream().map(user -> userService.getSafetyUser(user)).collect(Collectors.toList());
        return ResultUtils.success(list);
    }

1.3刷新前端主页,拿到数据

1.4我们发现我们可以将卡片列表单独抽出封装成一个组件UserCardList.vue

<template>
  <van-card
      v-for="user in userList"
      :desc="user.profile"
      :title="`${user.username} (${user.planetCode})`"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px;margin-top: 8px">
        {{ tag }}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini">联系我</van-button>
    </template>
  </van-card>
</template>

<script setup lang="ts">
import {UserType} from "../models/user";

interface UserCardListProps {
  userList: UserType[];
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  userList: [],
})

</script>

<style scoped>

</style>

优化搜索结果页面和主页，将原来的冗余代码换成UserCardList组件标签

这样最简单的主页就开发完成了

2.数据导入模拟一百万个用户

导入数据

1.用可视化界面即可：适合一次性导入，数据量可控

2.写程序：for循环，建议分批次，不要一把梭哈（可以用接口来控制）要保持可控，幂等性

3.执行SQL语句，适用于小数据量

编写一次性任务最简单是main方法，但这种方法不是万能的

@SpringBootApplication
@MapperScan("com.hyx.getfriend.mapper")
@EnableScheduling//开启一次性任务的注解
public class GetFriendApplication {

    public static void main(String[] args) {
        SpringApplication.run(GetFriendApplication.class, args);
    }

}