SpringBoot集成Web课MySpace

提示 : 这篇分享流程不会非常详细, 只是介绍方法

AcGit

后端

之前是y总直接提供的接口, 我们需要自己写一遍

建表 -> 实体类 -> Mapper -> Service -> Controller

• 表 内容比Bot还要少一些, 实际接口需要的内容就只有content
  
• Mapper 继承BaseMapper就行
• Service 写对应的增删改查, 和bot没什么区别
• Controller也是一样

service部分代码, 校验我用@Validated以及对应注解做了

 public class PostService {
    private final PostMapper mapper;

    public R postList() {
        return R.data(mapper.selectList(null));
    }

    public R userPostList() {
        User user = UserUtil.getUser();
        QueryWrapper<Post> query = new QueryWrapper<>();
        query.eq("user_id", user.getId());
        return R.data(mapper.selectList(query));
    }

    public R add(Post post) {
        User user = UserUtil.getUser();
        post.setUserId(user.getId());
        post.setUsername(user.getUsername());
        post.setPhoto(user.getPhoto());
        post.setCreateTime(DateUtil.date());
        return R.data(mapper.insert(post));
    }

    public R update(Post post) {
        User user = UserUtil.getUser();
        QueryWrapper<Post> query = new QueryWrapper<>();
        query.eq("id", post.getId()).eq("user_id", user.getId());
        Post post1 = mapper.selectOne(query);
        if (post1 == null) {
            return R.fail("当前帖子不存在或没有权限修改该帖子");
        }
        post.setCreateTime(DateUtil.date());
        return R.data(mapper.update(post, query));
    }

    public R remove(Integer id) {
        User user = UserUtil.getUser();
        QueryWrapper<Post> query = new QueryWrapper<>();
        query.eq("id", id).eq("user_id", user.getId());
        return R.data(mapper.delete(query));
    }
}

前端

个人前端半吊子水平, 用词可能不太准确,请见谅

个人中心页面

• 布局
  
• 外面红色框对应一个页面 : 个人中心(可以通过我的Bot页面改造)
• 导航栏: 和第一个Narbar一样, 封装成组件, 我直接抄的AcWing的(doge

<template>
  <ul class="nav nav-tabs" style="margin-top: 15px; margin-left: 20px">
    <li class="nav-item">
      <router-link
        :class="route_name == 'myspace_posts' ? 'nav-link active' : 'nav-link'"
        :to="{ name: 'myspace_posts' }"
        >动态</router-link
      >
    </li>

    <li class="nav-item">
      <router-link
        :class="route_name == 'myspace_bots' ? 'nav-link active' : 'nav-link'"
        :to="{ name: 'myspace_bots' }"
        >我的Bots</router-link
      >
    </li>
  </ul>
</template>

<script>
import { useRoute } from 'vue-router'
import { computed } from 'vue'
export default {
  name: "MyspaceNavBar",
  setup () {
    const route = useRoute();
    let route_name = computed(() => route.name);
    return {
      route_name,
    }
  },
}
</script>

<style scoped>
.nav-link {
  color: #337ab7;
}
</style>

• 里面的红色框对应多个页面
  • Bots: 直接用之前写的就行
  • Posts: 复制粘贴MySpace里面的代码
• 左下角发帖框: 复制粘贴MySpace里面的代码
• 首页: 所有用户的帖子