前端#

1. Vue 3开发框架（提高页面开发的效率）
2. Vant UI（基于Vue的移动端组件库）组件库（React版本叫Zent）
3. Vite（打包工具，速度快）
4. Nginx单机部署

后端#

1. Java编程语言+SpringBoot框架
2. SpringMVC + MyBatis + MyBatis Plus
3. MySQL数据库
4. Redis缓存
5. Swagger + Knife4j接口文档

主页设计：#

导航条：展示当前页面名称 主页搜索框 => 搜索页（标签筛选页） 内容 tab栏：

• 主页（推荐页+广告）
  • 搜索框
  • banner
  • 推荐信息流
• 队伍页
• 用户页（消息 - 暂时考虑发邮件）

开发：#

很多页面要复用组件 / 样式，重复写很麻烦、不利于维护，因此抽象一个通用的布局（Layout）

创建Layout文件夹 创建BasicLayout.vue 基本布局文件 书写基本布局代码

创建两个页面 根据选中内容切换页面

代码：

1
<script setup lang="ts">
2
import { ref } from 'vue';
3
import Index from '../pages/index.vue';
4
import Team from '../pages/team.vue';
5

6

7
const onClickLeft = () => history.back();
8
//@ts-ignore
9
const onClickRight = () => showToast('提示内容');
10

11

12
const active = ref('index');
13
//@ts-ignore
14
const onChange = (index: number) => showToast({
15
  message: `标签 ${index}`,
16
  position: 'bottom',
17
});
18

19
</script>
20

21
<template>
22
  <van-nav-bar fixed title="标题" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
23
    <template #right>
24
      <van-icon name="search" size="18" />
25
    </template>
26
  </van-nav-bar>
27

28
  <div id="content">
29
    <template v-if="active === 'index'">
30
      <Index />
31
    </template>
32
    <template v-else-if="active === 'team'">
33
      <Team />
34
    </template>
35
  </div>
36

37
  <van-tabbar v-model="active" @change="onChange">
38
    <van-tabbar-item icon="home-o" name="index">主页</van-tabbar-item>
39
    <van-tabbar-item icon="search" name="team">队伍</van-tabbar-item>
40
    <van-tabbar-item icon="friends-o" name="user">个人</van-tabbar-item>
41
  </van-tabbar>
42
</template>
43

44
<style scoped></style>

新增标签表（分类表）#

使用标签比较灵活

思考有哪些分类：

性别：男、女 方向：Java、C++、Go、前端 目标：考研、春招、秋招、社招、考公、竞赛（蓝桥杯）、转行、跳槽 段位：初级、中级、高级、王者 身份：大一、大二、大三、大四、学生、待业、已就业、研一、研二、研三 状态：乐观、有点丧、一般、单身、已婚、有对象 【为了可以用户自定义标签 所以才需要表 否则可以直接写死】

字段: id bigint 主键 标签名 varchar 非空 （加唯一索引） 上传标签的用户 userId int （普通索引） 父标签id parentId int（标签分类） 是否为父标签 isParent tinyint （0、1） 创建时间 createTime datatime 关系时间 updateTime datatime 是否删除 isDelete tinyint （0、1）

思考需求： 怎么查询所有标签，并分好组？ 一次全量查询，然后根据父id分类 根据父标签查询子标签？根据id查询

确认需求可完成 再确定这个表可行

SOL 语言分类： DDL define 建表、操作表 DML manage更新删除数据，影响实际表里的内容 DCL control控制，权限 DQL query 查询

修改用户表#

1.直接在用户表补充tags字段，[Java'，男]存json字符串 优点：查询方便、不用新建关联表，标签是用户的固有属性（除了该系统、其他系统可能要用到，标签是用户的固有属性) 节省开发成本 查询用户列表，查关系表拿到这100个用户有的所有标签id，，再根据标签id去查标签表。 性能低可以用缓存缓解。 缺点：用户表多一列，可能会导致原先的一些内容需要修。

2.加一个关联表，记录用户和标签的关系 关联表的应用场景：查询灵活，可以正查反查缺点：要多建一个表、多维护一个表 重点：企业大项目开发中尽量减少关联查询，会影响扩展性和性能。

搜索标签#

1. 允许用户传入多个标签，多个标签都存在才搜索出来 and。 like ‘%Java%’ and like ‘%C++%’
2. 允许用户传入多个标签，有任何一个标签存在就能搜索出来or。 like ‘%java%’ or like ‘%C++%’

两种方式：

1. SQL查询
2. 内存查询 方案选择：⁡⁡        ⁠ ⁠       ⁠  ⁠              

• 如果参数可以分析，根据用户的参数去选择查询方式，比如标签数
• 如果参数不可分析，并且数据库连接足够、内存空间足够，可以并发同时查询，谁先返回用谁。
• 还可以 SQL 查询与内存计算相结合，比如先用 SQL 过滤掉部分 tag

建议通过实⁡⁡⁡际测试来分析哪种⁠查⁠询比⁠较快，数据⁠量大⁠的时候验⁠证效果更明显！                 ⁡               

1
public List<User> getUserByTags(List<String> tagNameList) {
2
    if (CollectionUtils.isEmpty(tagNameList)) {
3
        throw new BusinessException(ErrorCode.PARAMS_ERROR);
4
    }
5
    // 方式1:直接使用SQL查询
6
    QueryWrapper<User> queryWrapper = new QueryWrapper<>();
7
    for (String tagName : tagNameList) {
8
        queryWrapper = queryWrapper.like("tags", tagName);
9
    }
10
    List<User> users = userMapper.selectList(queryWrapper);
11
    return users.stream().map(this::getSafetyUser).toList();
12

13
    // 方式2:全量查询或先传入一个常用标签来查询 然后在内存中判断
14
    QueryWrapper<User> queryWrapper = new QueryWrapper<>();
15
    List<User> users = userMapper.selectList(queryWrapper);
16

17
    return users.stream().filter(user->{
18
        String tags = user.getTags();
19
        if(StringUtils.isBlank(tags)) return false;
20
        // 使用Set可以在O(1)时间判断是否存在
21
        Set<String> tempTags = gson.fromJson(tags, new TypeToken<Set<String>>() {
22
        }.getType());
23
        for (String tagName : tagNameList) {
24
            if(!tempTags.contains(tagName)){
25
                return false;
26
            }
27
        }
28
        return true;
29
    }).map(this::getSafetyUser).toList();
30
}

1
return users.parallelStream().filter(user->{
2
    String tags = user.getTags();
3
    if(StringUtils.isBlank(tags)) return false;
4
    // 使用Set可以在O(1)时间判断是否存在
5
    Set<String> tempTags = gson.fromJson(tags, new TypeToken<Set<String>>() {
6
    }.getType());
7
    for (String tagName : tagNameList) {
8
        if(!tempTags.contains(tagName)){
9
            return false;
10
        }
11
    }
12
    return true;
13
}).map(this::getSafetyUser).toList();

1
    return users.stream().filter(user->{
2
        String tags = user.getTags();
3
        if(StringUtils.isBlank(tags)) return false;
4
        // 使用Set可以在O(1)时间判断是否存在
5
        Set<String> tempTags = gson.fromJson(tags, new TypeToken<Set<String>>() {
6
        }.getType());
7
        // 使用Optional判空
8
        tempTags = Optional.ofNullable(tempTags).orElse(new HashSet<>());
9

10
        for (String tagName : tagNameList) {
11
            if(!tempTags.contains(tagName)){
12
                return false;
13
            }
14
        }
15
        return true;
16
    }).map(this::getSafetyUser).toList();
17
}

使用 Swagger#

1. 引入依赖（Swagger 或 Knife4j：https://doc.xiaominfo.com/knife4j/documentation/get_start.html）
2. 自定义 Swagger 配置类
3. 定义需要生成接口文档的代码位置（Controller）
4. 千万注意：线上环境不要把接口暴露出去！！！可以通过在 SwaggerConfig 配置文件开头加上 @Profile({"dev", "test"}) 限定配置仅在部分环境开启
5. 启动即可
6. 可以通过在 controller 方法上添加 [@Api、@ApiImplicitParam(name ](/Api、@ApiImplicitParam(name ) = “name”,value = “姓名”,required = true) [@ApiOperation(value ](/ApiOperation(value ) = “向客人问好”) 等注解来自定义生成的接口描述信息

如果 springboot version >= 2.6，需要添加如下配置：

1
spring:
2
  mvc:
3
    pathmatch:
4
      matching-strategy: ANT_PATH_MATCHER

怎么抓取网页内容？#

推荐安装 FeHelper 前端辅助插件。

1）分析原网站是怎么获取这些数据的？哪个接口？

按 F12⁡⁡⁡⁡ 打开控制台⁠，⁠查⁠看⁠网络请⁠求，⁠复制⁠ c⁠url 代码便⁡于查看⁡和执行，⁡比如：

1
curl "https://api.zsxq.com/v2/hashtags/48844541281228/topics?count=20" ^
2
  -H "authority: api.zsxq.com" ^
3
  -H "accept: application/json, text/plain, */*" ^
4
  -H "accept-language: zh-CN,zh;q=0.9" ^
5
  -H "cache-control: no-cache" ^
6
  -H "origin: https://wx.zsxq.com" ^
7
  -H "pragma: no-cache" ^
8
  -H "referer: https://wx.zsxq.com/" ^
9
  --compressed

2） 用程序去调用接口 （java okhttp httpclient / python request 库等都可以）

3）处理（清洗）一下数据，之后就可以写到数据库里

导入流程#

1. 从 excel 中导入全量用户数据并去重（使用 Easy Excel 库来实现）
2. 抓取写了自我介绍的同学信息，提取出用户昵称、用户唯一 id、自我介绍信息
3. 从自我介绍中提取信息，然后写入到数据库中

EasyExcel#

地址：https://alibaba-easyexcel.github.io/index.html

两种读对象的方式：

1. 确定表头：建立对象，和表头形成映射关系
2. 不确定表头：每一行数据映射为 Map<String, Object>

两种读取模式：

1. 监听器：先创建监听器、在读取文件时绑定监听器。单独抽离处理逻辑，代码清晰易于维护；一条一条处理，适用于数据量大的场景。
2. 同步读：无需创建监听器，一次性获取完整数据。方便简单，但是数据量大时会有等待时常，也可能内存溢出。