闲淘开发笔记

前端开发

前端初始化

安装脚手架

1
npm install -g @vue/cli

创建 vue 项目

1
vue create xiantao-fronted

引入 arco design 组件库

1
npm install --save-dev @arco-design/web-vue

在 main.ts 文件全部引入

1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';

const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

页面开发

帖子 / 用户推荐（搜索）页面

  1. card 卡片组件

查看帖子页面

  1. 引入 Drawer 组件和图片轮播图组件

后端开发

导入新依赖

引入 MyBatis-Plus

引入相应依赖：

1
2
3
4
5
<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.2</version>
</dependency>

编写 yml 文件：

1
2
3
4
5
6
7
8
mybatis-plus:
  configuration:
    map-underscore-to-camel-case: false
  global-config:
    db-config:
      logic-delete-field: isDelete
      logic-delete-value: 1
      logic-not-delete-value: 0

编写配置类（分页配置）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Configuration
public class MybatisPlusConfig {

    /**
     * 新的分页插件,一缓和二缓遵循mybatis的规则,需要设置 MybatisConfiguration#useDeprecatedExecutor = false 避免缓存出现问题(该属性会在旧插件移除后一同移除)
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor();
        paginationInnerInterceptor.setDbType(DbType.MYSQL);
        paginationInnerInterceptor.setOverflow(true);
        interceptor.addInnerInterceptor(paginationInnerInterceptor);
        return interceptor;
    }

}

引入 knife4j

引入相应依赖：

1
2
3
4
5
<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>knife4j-spring-boot-starter</artifactId>
    <version>2.0.9</version>
</dependency>

编写配置类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@Configuration
@EnableSwagger2WebMvc
@EnableKnife4j
@Profile({"dev","test"})
public class Knife4jConfig {

    @Bean
    public Docket docket() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.hjj.xiantao.controller")) // 指定 controller 层路径
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("文档标题")
                .description("文档描述")
                .termsOfServiceUrl("服务条款地址")
                .version("文档版本")
                .license("开源版本号")
                .licenseUrl("开源地址")
                .contact(new Contact("作者名", "作者网址", "作者邮箱"))
                .build();
    }

}

配置跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 覆盖所有请求
        registry.addMapping("/**")
                // 允许发送 Cookie
                .allowCredentials(true)
                // 放行哪些域名（必须用 patterns，否则 * 会和 allowCredentials 冲突）
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

用户相关功能开发

用户注册功能

  1. 校验参数是否为空
  2. 账号不少于 4 位，密码不少于 6 位，密码和校验密码一致
  3. 用户密码加密再存入数据库
  4. 返回用户 id

用户登录功能

  1. 校验参数是否为空
  2. 账号不少于 4 位，密码不少于 6 位
  3. 返回脱敏用户信息

用户退出登录

  1. 校验用户是否登录
  2. 删除登录态

帖子相关功能开发

发布帖子

  1. 判断用户是否登录
  2. 校验参数（是否为空，校验 title 和 content 的长度，价格是否大于 0，至少有一个标签和上传一张图片）
  3. 插入数据库

删除帖子（仅限管理员）

  1. 判断是否登录
  2. 校验参数
  3. 从数据库查找帖子相关的点赞、收藏和图片，先删除这些再删除帖子

自己删除帖子/下架商品

  1. 判断是否登录
  2. 校验参数
  3. 判断删除的帖子是否为自己创建
  4. 从数据库查找帖子相关的点赞、收藏，先删除这些再删除帖子（不必删除帖子图片，因为别人还能看到你的商品/图片）

点赞帖子

  1. 判断是否登录
  2. 校验参数（是否已点赞）
  3. 查询点赞的帖子是否存在
  4. 将帖子表的点赞数 +1，再向帖子点赞表插入记录

帖子取消点赞

  1. 判断是否登录
  2. 校验参数（是否点赞）
  3. 查询取消点赞的帖子是否存在
  4. 将帖子表的点赞数 -1，再向帖子点赞表删除记录

收藏帖子

  1. 判断是否登录
  2. 校验参数（是否已点赞）
  3. 查询收藏的帖子是否存在
  4. 将帖子表的收藏数 +1，再向帖子收藏表插入记录

帖子取消收藏

  1. 判断是否登录
  2. 校验参数（是否点赞）
  3. 查询取消收藏的帖子是否存在
  4. 将帖子表的收藏数 -1，再向帖子收藏表删除记录

查询自己点赞的帖子

  1. 判断是否登录
  2. 查询自己点赞的帖子

查询自己收藏的帖子

  1. 判断是否登录
  2. 查询自己收藏的帖子