1.數(shù)據(jù)表

• 新增t_follow表

  
  
  follow.png

2.entity包

• Follow實體類

@Data
public class Follow {
    private Integer id;
    private Integer fromUId;
    private Integer toUId;
}

• FollowVO 視圖對象類

@Data
public class FollowVO {
    private Integer toUId;
    private String nickname;
    private String avatar;
}

3.Mapper

• FollowMapper

public interface FollowMapper {

    @Results({
            @Result(property = "id", column = "id"),
            @Result(property = "fromUId", column = "from_uid"),
            @Result(property = "toUId", column = "to_uid")
    })
    @Select("SELECT * FROM t_follow WHERE from_uid = #{fromUId} AND to_uid = #{toUId} ")
    Follow getFollow(@Param("fromUId") int fromUId, @Param("toUId") int toUId);

    @Results({
            @Result(property = "toUId", column = "to_uid"),
            @Result(property = "nickname", column = "nickname"),
            @Result(property = "avatar", column = "avatar")
    })
    @Select("SELECT a.to_uid,b.nickname,b.avatar FROM t_follow a LEFT JOIN t_user b ON a.to_uid = b.id WHERE a.from_uid = #{fromUId}  ")
    List<FollowVO> getFollowsByUId(int fromUId);

    @Insert("INSERT INTO t_follow (from_uid,to_uid) VALUES (#{fromUId},#{toUId}) ")
    void insertFollow(Follow follow);

    @Delete("DELETE  FROM t_follow WHERE from_uid = #{fromUId} AND to_uid = #{toUId} ")
    void deleteFollow(@Param("fromUId") int fromUId, @Param("toUId") int toUId);
}

• CommentMapper增加方法

@Insert("INSERT INTO t_comment(u_id,a_id,content,comment_time) VALUES(#{uId}, #{aId}, #{content},#{commentTime}) ")
void insert(Comment comment);

4.service

• FollowService

public interface FollowService {
    Follow getFollow(int fromUId, int toUId);

    List<FollowVO> getFollowsByUId(int fromUId);

    void insertFollow(Follow follow);

    void deleteFollow(int fromUId, int toUId);
}

• CommentService

public interface CommentService {
    List<CommentVO> selectCommentsByAId(int aId);
    void addComment(Comment comment);
}

• service實現(xiàn)類及單元測試省略

5.controller

• FollowController

@RestController
@RequestMapping(value = "/api/follow")
public class FollowController {
    @Resource
    private FollowService followService;


    @PostMapping("/add")
    public ResponseResult followUser(@RequestParam("fromUId") int fromUId, @RequestParam("toUId") int toUId) {
        Follow follow = new Follow();
        follow.setFromUId(fromUId);
        follow.setToUId(toUId);
        followService.insertFollow(follow);
        return ResponseResult.success();
    }

    @PostMapping("/cancel")
    public ResponseResult cancelFollow(@RequestParam("fromUId") int fromUId, @RequestParam("toUId") int toUId) {
        followService.deleteFollow(fromUId, toUId);
        return ResponseResult.success();
    }
}

• CommentController

@RestController
@RequestMapping(value = "/api/comment")
public class CommentController {
    @Resource
    private CommentService commentService;

    @PostMapping("/add")
    public ResponseResult addComment(@RequestParam("aId") int aId, @RequestParam("uId") int uId, @RequestParam("content") String content) {
        Comment comment = new Comment();
        comment.setAId(aId);
        comment.setUId(uId);
        comment.setContent(content);
        comment.setCommentTime(new Date());
        commentService.addComment(comment);
        return ResponseResult.success();
    }
}

• 修改一下ArticleController接口中的根據(jù)id獲取文章的方法童漩，增加一個參數(shù)：登錄用戶的id，來判斷登錄用戶是否已經(jīng)關(guān)注了文章作者

@GetMapping(value = "/{aId}")
public ResponseResult getArticleById(@PathVariable("aId") int aId,@RequestParam("userId") int userId) {
    ArticleVO article = articleService.getArticleById(aId);
    int toUId = article.getUId();
    Map<String, Object> map = new HashMap<>();
    Follow follow = followService.getFollow(userId, toUId);
    if (follow != null) {
        map.put("followed", MsgConst.FOLLOWED);
    } else {
        map.put("followed", MsgConst.NO_FOLLOWED);
    }
    List<CommentVO> comments = commentService.selectCommentsByAId(aId);
    map.put("article", article);
    map.put("comments", comments);
    return ResponseResult.success(map);
}

6.swagger測試

7.前端

• 文章詳情頁

<template>
    <view class="container">
        <text class="article-title">{{ article.title }}</text>
        <view class="article-info">
            <image :src="article.avatar" class="avatar small"></image>
            <text style="margin-left: 10px;">{{ article.nickname }}</text>
            <text class="info-text">{{ handleTime(article.createTime)}}</text>
            <!-- 登錄用戶和文章作者不是同一個人，就顯示關(guān)注或取消關(guān)注按鈕 -->
            <button v-if="userId != article.uId && !followed" class="btn follow-btn" @tap="follow">+ 關(guān)注</button>
            <button v-if="userId != article.uId && followed" class="btn follow-btn cancel" @tap="cancelFollow">取消</button>
        </view>

        <view class="grace-text" style="margin-top: 10px;">
            <rich-text :nodes="article.content" bindtap="tap"></rich-text>
        </view>
        <button v-if="!liked" class="like-btn" @tap="like">收藏 </button>
        <button  v-if="liked" class="cancel-like" @tap="cancelLike">取消</button>
        <text class="info-text">評論 {{ comments.length }}</text>
        <view class="comment-item" v-for="(comment, index) in comments" :key="index">
            <view class="left">
                <image :src="comment.avatar" class="avatar small"></image>
            </view>
            <view class="right">
                <view class="right-content">
                    <text>{{ comment.nickname }}</text>
                    <text>{{ comment.content }}</text>
                </view>
                <view class="right-time">
                    <text style="margin-right: 10px;">{{ comments.length - index }}樓·{{comment.commentTime}}</text>
                    <!-- <text>{{  handleTime(comment.commentTime)}}</text> -->
                </view>
            </view>
        </view>
        
        <input class="uni-input comment-box" type="text" placeholder="寫下你的評論" v-model="content" required="required" />
        <button class="green-btn" @tap="send">提交</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                article: {
                    aId: 0,
                    uId: 0,
                    title: '',
                    content: '',
                    avatar: '',
                    nickname: '',
                    createTime: ''
                },
                comments: [],
                content: '',
                userId: uni.getStorageSync('login_key').userId,
                followed: false,
                liked:false
            };
        },
        onLoad: function(option) {
            //option為object類型，會序列化上個頁面?zhèn)鬟f的參數(shù)
            this.article.aId = option.aId;
        },
        onShow: function() {
            this.getArticle();
        },
        onPullDownRefresh: function() {
            this.getArticle();
        },
        methods: {
            getArticle: function() {
                var _this = this;
                uni.request({
                    url: this.apiServer + '/article/' + this.article.aId,
                    method: 'GET',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        userId: this.userId
                    },
                    success: res => {
                        // console.log(res.data.data.article);
                        _this.article.aId = res.data.data.article.id;
                        _this.article.uId = res.data.data.article.uid;
                        _this.article.title = res.data.data.article.title;
                        _this.article.content = res.data.data.article.content;
                        _this.article.nickname = res.data.data.article.nickname;
                        _this.article.avatar = res.data.data.article.avatar;
                        _this.article.createTime = res.data.data.article.createTime;
                        _this.comments = res.data.data.comments;
                        if (res.data.data.followed === '已關(guān)注') {
                            _this.followed = true;
                        }
                    },
                    complete: function() {
                        uni.stopPullDownRefresh();
                    }
                });
            },
            handleTime: function(date) {
                var d = new Date(date);
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
                var hour = d.getHours() < 10 ? '0' + d.getHours() : '' + d.getHours();
                var minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : '' + d.getMinutes();
                var seconds = d.getSeconds() < 10 ? '0' + d.getSeconds() : '' + d.getSeconds();
                return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
            },
            send: function() {
                console.log('評論人編號：' + this.userId + ',文章編號：' + this.article.aId + '，評論內(nèi)容：' + this.content);
                uni.request({
                    url: this.apiServer + '/comment/add',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        aId: this.article.aId,
                        uId: this.userId,
                        content: this.content
                    },
                    success: res => {
                        if (res.data.code === 0) {
                            uni.showToast({
                                title: '評論成功'
                            });
                            this.getArticle();
                            this.content = '';
                        }
                    }
                });
            },
            follow: function() {
                uni.request({
                    url: this.apiServer + '/follow/add',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        fromUId: this.userId,
                        toUId: this.article.uId
                    },
                    success: res => {
                        if (res.data.code === 0) {
                            uni.showToast({
                                title: '關(guān)注成功'
                            });
                            this.followed = true;
                        }
                    }
                });
            },
            like: function() {
                uni.request({
                    url: this.apiServer + '/like/add',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        uId: this.userId,
                        aId: this.article.aId
                    },
                    success: res => {
                        if (res.data.code === 0) {
                            uni.showToast({
                                title: '收藏成功'
                            });
                            this.liked = true;
                        }
                    }
                });
            },
            cancelFollow: function() {
                uni.request({
                    url: this.apiServer + '/follow/cancel',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        fromUId: this.userId,
                        toUId: this.article.uId
                    },
                    success: res => {
                        if (res.data.code === 0) {
                            uni.showToast({
                                title: '已取消關(guān)注'
                            });
                            this.followed = false;
                        }
                    }
                });
            },
            cancelLike: function() {
                uni.request({
                    url: this.apiServer + '/like/cancel',
                    method: 'POST',
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        uId: this.userId,
                        aId: this.article.aId
                    },
                    success: res => {
                        if (res.data.code === 0) {
                            uni.showToast({
                                title: '已取消收藏'
                            });
                            this.liked = false;
                        }
                    }
                });
            }
        }
    };
</script>

<style>
    
    .link {
        cursor: pointer;
    }
    
    .article-title {
        font-weight: bold;
        padding: 10px;
        font-size: 22px;
    }

    .article-info {
        display: flex;
        margin-top: 20px;
        align-items: center;
    }

    .grace-text {
        margin-top: 10px;
    }

    .avatar {
        width: 60px;
        height: 60px;
        margin-left: 5px;
    }

    .info-text {
        margin-left: 10px;
        font-size: 18px;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
    }

    .btn {
        margin-right: 10px;
        width: 90px;
        height: 40px;
        background: #00C777;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #EEEEEE;
    }

    .content {
        width: 90%;
        margin: auto;
    }

    .comment-item {
        display: flex;
        margin-top: 5px;
    }

    .right {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
    }

    .right-content {
        display: flex;
        flex-direction: column;
    }

    .right-time {
        margin-top: 5px;
        color: #C1C1C1;
        font-size: 15px;
    }

    .uni-input {
        margin-top: 10px;
        font-size: 18px;
    }

    .green-btn {
        margin-top: 10px;
        width: 60%;
        cursor: pointer;
        border-radius: 10px;
        background: #00EE76;
        color: white;
    }

    .cancel {
        background-color:#AAAAAA;
    }
    .like-btn{
        width: 90px;
        height: 40px;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        color:#FF7900;
        border: 1px solid #FF7900;
        border-radius: 10px;
        margin-top: 10px;
    }
    .cancel-like{
        width: 90px;
        height: 40px;
        background-color: #aaa;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        margin-top: 10px;
    }
    
</style>