1.数据表
-
新增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实现类及单元测试省略
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接口中的根据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);
}
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>
<!-- 登录用户和文章作者不是同一个人，就显示关注或取消关注按钮 -->
<button v-if="userId != article.uId && !followed" class="btn follow-btn" @tap="follow">+ 关注</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类型，会序列化上个页面传递的参数
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;
}
},
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: {
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: '已取消关注'
});
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>
网友评论