评论和关注功能

1.数据库t_follow的设计：id,from_uid,to_uid1 4代表1号作者关注了4号用户


t_folow.png

t_follow.data.png

2.高频操作？实际项目如何处理？
点赞，关注，喜欢，统计阅读量
先把数据存入缓存数据库，然后使用定时任务持久化到底层数据库

后端

  • entity：1.Follow
@Data
public class Follow {
    private Integer id;
    private Integer fromUId;
    private Integer toUId;
}

2.FollowVO对象视图类

@Data
public class FollowVO {
    private Integer toUId;
    private String nickname;
    private String avatar;
}```
3.mapper接口设计FollowMapper
insert方法，删除记录，根据fromID查所以，根据toid查所有，单一查（from,to）

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);
}

5.实现类

  • FollowServiceImpl
package com.soft1721.jianyue.api.service.impl;

import com.soft1721.jianyue.api.entity.Follow;
import com.soft1721.jianyue.api.entity.VO.FollowVO;
import com.soft1721.jianyue.api.mapper.FollowMapper;
import com.soft1721.jianyue.api.service.FollowService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;


@Service
public class FollowServiceImpl implements FollowService {
    @Resource
    private FollowMapper followMapper;

    @Override
    public Follow getFollow(int fromUId, int toUId) {

        return followMapper.getFollow(fromUId, toUId);
    }

    @Override
    public List<FollowVO> getFollowsByUId(int fromUId) {
        return followMapper.getFollowsByUId(fromUId);
    }

    @Override
    public void insertFollow(Follow follow) {
        followMapper.insertFollow(follow);

    }

    @Override
    public void deleteFollow(int fromUId, int toUId) {
        followMapper.deleteFollow(fromUId,toUId);
    }
}
  • CommentServiceImpl类
package com.soft1721.jianyue.api.service.impl;

import com.soft1721.jianyue.api.entity.Comment;
import com.soft1721.jianyue.api.entity.VO.CommentVO;
import com.soft1721.jianyue.api.mapper.CommentMapper;
import com.soft1721.jianyue.api.service.CommentService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;
@Service
public class CommentServiceImpl implements CommentService {

    @Resource
    private CommentMapper commentMapper;
    @Override
    public List<CommentVO> selectCommentsByAId(int aId) {

        return commentMapper.selectCommentsByAId(aId);
    }

    @Override
    public void addComment(Comment comment) {
        commentMapper.insert(comment);

    }
}

6.单元测试：

  • FollowServiceImplTest类
package com.soft1721.jianyue.api.service.impl;

import com.soft1721.jianyue.api.entity.Follow;
import com.soft1721.jianyue.api.entity.VO.FollowVO;
import com.soft1721.jianyue.api.service.FollowService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

import javax.annotation.Resource;
import java.util.List;

@RunWith(SpringRunner.class)
@SpringBootTest
public class FollowServiceImplTest {
    @Resource
    private FollowService followService;

    @Test
    public void getFollow() {
        Follow followVO = followService.getFollow(1,4);
        System.out.println(followVO);
    }

    @Test
    public void getFollowsByUId() {
        List<FollowVO> followVO = followService.getFollowsByUId(1);
        System.out.println(followVO);
    }

    @Test
    public void insertFollow() {
        Follow follow = new Follow();
        follow.setFromUId(4);
        follow.setToUId(11);
        followService.insertFollow(follow);
    }

    @Test
    public void deleteFollow() {
        followService.deleteFollow(1,4);
    }
}
  • CommentService
package com.soft1721.jianyue.api.service.impl;

import com.soft1721.jianyue.api.entity.Comment;
import com.soft1721.jianyue.api.entity.VO.CommentVO;
import com.soft1721.jianyue.api.mapper.CommentMapper;
import com.soft1721.jianyue.api.service.CommentService;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

import javax.annotation.Resource;

import java.util.ArrayList;
import java.util.List;

import static org.junit.Assert.*;
@RunWith(SpringRunner.class)
@SpringBootTest
public class CommentServiceImplTest {
    @Resource
    private CommentMapper commentMapper;
    @Resource
    private CommentService commentService;

    @Test
    public void selectCommentsByAId() {
        List<CommentVO> list = new ArrayList<>();
        list = commentMapper.selectCommentsByAId(1);
        System.out.println(list);
    }
    @Test
    public void addComment() {
        Comment comment = new Comment();
        comment.setAId(2);
        comment.setUId(4);
        comment.setContent("very good!");
        /* comment.setCommentTime(new Date(2019,04,10,9,43,35));*/
        commentService.addComment(comment);
    }

}

7.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接口中的根据id获取文章的方法，增加一个参数：登录用户的id，来判断登录用户是否已经关注了文章作者

@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);
}

前端代码：

article_detail.vue

<template>
    <view class="container">
        <text class="article-title">{{ article.title }}</text>
        <view class="article-info">
            <image :src="article.avatar" class="avatar small"></image>
            <text class="nickname">{{ article.nickname }}</text>
            <!-- <text class="info-text">{{ handleTime(article.createTime) }}</text> -->
            <text>{{article.createTime}}</text>
            <!-- 登录用户和文章作者不是同一个人，就显示关注或取消关注按钮 -->
            <button v-if="userId != article.uId && !followed" class="follow-btn" @tap="follow">关注</button>
            <button v-if="userId != article.uId && followed" class="follow-btn cancel" @tap="cancelFollow">取消</button>
        </view>

        <view class="grace-text" style="margin-top: 10px;"><rich-text :nodes="article.content" bindtap="tap"></rich-text>
        <button v-if="userId != article.uId && !liked" class="follow-btn1" @tap="like">
            <image src="../../static/heart1.png"></image>
        </button>
        <button v-if="userId != article.uId && liked" class="follow-btn1 cancel" @tap="cancelLike">
            <image src="../../static/heart.png"></image>
        </button>
        </view>
        <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">
                <text>{{ comment.nickname }}</text>
                <text>{{ comment.content }}</text>
                <view>
                    <text style="margin-right: 10px;">{{ comments.length - index }}楼</text>
                    <!-- <text>{{ handleTime(comment.commentTime) }}</text> -->
                    <text>{{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类型，会序列化上个页面传递的参数
        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 === '已关注') {
                        _this.followed = true;
                        _this.liked=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 + '，评论内容：' + 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: '关注成功'
                        });
                        this.followed = true;
                    }
                }
            });
        },
        like:function(){
            uni.request({
                url: this.apiServer + '/like/add',
                method: 'POST',
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data: {
                    fromId: this.userId,
                    toId: this.article.uId
                },
                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: '已取消关注'
                        });
                        this.followed = false;
                    }
                }
            });
        },
        cancelLike:function(){
            uni.request({
                url: this.apiServer + '/like/cancel',
                method: 'POST',
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data: {
                    fromId: this.userId,
                    toId: this.article.uId
                },
                success: res => {
                    if (res.data.code === 0) {
                        uni.showToast({
                            title: ''
                        });
                        this.liked = false;
                    }
                }
            });
        }
    }
};
</script>

<style>
.content {
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 5px;
    border-bottom: 1px solid #eee;
}
.img-list {
    display: flex;
    flex-direction: column;
}
.img-item {
    width: 100%;
    height: 150px;
    margin-bottom: 5px;
}
.img-item image {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.comment-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    padding: 5px;
}
.comment-item .left {
    flex: 1 1 15%;
}
.comment-item .right {
    flex: 1 1 85%;
    display: flex;
    flex-direction: column;
}
.comment-box {
    /* border: 1px solid #fff;
    border-radius: 5px;
    background-color: #eee;
    height: 50upx; */
    margin-top: 20upx;
}
.follow-btn {
    height: 33px;
    width: 80px;
    font-size: 12pt;
    text-align: center;
    padding-bottom: 20px;
    margin-right: 0px;
    background: #10AEFF;
    color: #fff;
}
.cancel{
    background-color: #aaa;
}
.green-btn{
    background: #10AEFF;
    color: #fff;
}
.article-title{
    font-size: 40upx;
    font-weight: 700;
}
.grace-text{
    font-weight: 500;
    font-size: 40upx;
    border-bottom:10px solid #fff;
}
.article-info{
    display: flex;
    border-top:70upx solid #FFFFFF;
}
.follow-btn1{
    width: 200upx;
    height: 100upx;
    background: #fff;
}
.follow-btn1 image{
    width: 100upx;
    height: 50upx;
}
</style>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343

推荐阅读更多精彩内容