前言
还是之前的音乐系统，首页一直是没想好写些什么，想写一个基于数据分析筛选的歌曲推荐功能，但是目前技术选型没太有考究等以后再实现吧，昨天突然想到可以把首页设计成前40%页面是歌曲推荐后面接下来就是一段匿名论坛功能，说干就干，直接构思，设计，实现。
sql设计
sql经过了数个功能的设计实现之后，现在的sql结构已经基本成熟，对此业务目前我使用了5个表，post（核心帖子表），post_data（帖子数据表），post_draft（帖子草稿表），post_images（帖子图片关联表），post_topics（话题表）
post表
post_data表
post_draft表
post_images
post_topics
这是这5个表的sql结构，然后下面是设计的UI：
接口实现
主要是设计了4个接口功能
发帖接口
使用Optional进行校验参数，大致发帖封为两种方式，一个是前端已经有了草稿，草稿里储存了一个随机的postId，储存帖子信息的时候直接使用这个postId即可，如果为null，则再后端再创建一下uuid即可，分为实名和匿名，匿名就捏造姓名和头像，其他的就是简单的写DB的操作
@Overridepublic Result postPost(Optional<PostPostDto> optional) {if (!optional.isPresent()) {return Result.error("传入空参数");}PostPostDto postPostDto = optional.get();String content = postPostDto.getContent();String remark = postPostDto.getRemark();String account = postPostDto.getAccount();Integer topicId = postPostDto.getTopicId();Integer wordNum = postPostDto.getWordNum();List<String> picList = postPostDto.getPicList();Boolean isNameless = postPostDto.getIsNameless();Post post = BeanUtil.toBean(postPostDto, Post.class);if (post.getId() == null) {// 说明是没有草稿直接发布的，就直接uuid一个即可post.setId(RandomUtil.randomInt());}PostData postData = BeanUtil.toBean(postPostDto, PostData.class);if (isNameless) {// 是匿名Faker faker = new Faker(new Locale("zh-CN"));String adjective = faker.name().fullName();String name = faker.animal().name();String nickname = adjective + "的" + name;post.setNickname(nickname);post.setAvatar(NAMELESS_AVATAR_URL);} else {// 实名的话就直接去查account的信息UserCommentPo userInfo = infoMapper.getInfoByAccount(Long.valueOf(account));post.setAvatar(userInfo.getAvatar());post.setNickname(userInfo.getUsername());}save(post);// 设置postImages的值ArrayList<PostImages> postImagesList = new ArrayList<>();picList.forEach((pic) -> {PostImages tempPostImages = new PostImages();tempPostImages.setPostId(post.getId());tempPostImages.setImageUrl(pic);postImagesList.add(tempPostImages);});postImagesMapper.insert(postImagesList);// 设置postData的值postData.setPostId(post.getId());postDataMapper.insert(postData);return Result.ok("操作正确");}查询话题
这个太简单就是查一下数据库，用了mp的语法
@Overridepublic Result getTopics() {LambdaQueryWrapper<PostTopics> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.select(PostTopics::getId, PostTopics::getTitle).eq(PostTopics::getIsDie, false);List<PostTopics> postTopics = postTopicsMapper.selectList(queryWrapper);return Result.ok(postTopics);}查询帖子的历史草稿
这个主要是数据库设计上的思维巧妙，其实业务上并无难度，就是没难度的查询
@Overridepublic Result listDraftsByTimes(Integer postId) {// 构建查询条件LambdaQueryWrapper<PostDraft> queryWrapper = new LambdaQueryWrapper<>();queryWrapper.eq(PostDraft::getPostId, postId).eq(PostDraft::getIsDie, false).orderByDesc(PostDraft::getUpdateTime);// 查询草稿列表List<PostDraft> drafts = postDraftMapper.selectList(queryWrapper);return Result.ok(drafts);}保存草稿
这段代码没啥难度，也和发帖差不多，就是判断现在有没有postId，没有的话，我就设置一个，主要是sql设计上的难度，炸一想，我也想不出来，根据业务推出来的业务结构，业务就是历史草稿功能。
@Overridepublic Result saveDraft(PostDraft draft) {// 设置更新时间draft.setUpdateTime(LocalDateTime.now());draft.setIsDie(false);// 如果第一次生成草稿就先创建一个新的postIdif (draft.getPostId() == null) {draft.setPostId(Math.abs(RandomUtil.randomInt()));}postDraftMapper.insert(draft);return Result.ok(draft.getPostId());}前端的函数
前端的实现同样精彩，只说几点主要的逻辑，防抖限流就不讲了
编辑部分使用wangeditor实现，编辑html格式实现富文本，搞了一个定时器每一秒，统计一次字数。返回顶部和发布设置 按钮，使用Element-plus里的scroll组件里的监听事件实现，发图片使用的是Element-plus的upload组件，然后接入aliyun-oss的sdk。另外就是草稿恢复等功能，其实没什么逻辑难度有点无关紧要，就是查询历史草稿，然后点击恢复就把item传到编辑器里。
待完成实现
草稿箱接口
帖子展示接口
帖子的管理接口
帖子举报接口
帖子数据可视化管理接口