1. 开发前，先思考如下问题
一、文章列表页的三种布局方式？
超过三张图片：横排三张图（选最后三张图）
图片少于3张：图文左右排列（选最后一张图）
无图片：只显示文章内容（字数控制）
二、文章详情页的布局？
- 图文混排
三、关于文章模块的数据库设计问题？
1.文章表:id、u_id、title、content、create_time
2.图片表:id、a_id、img_url
3.评论表：id、u_id、a_id、content、comment_time
四、各层接口的设计？
1. 数据库设计
-
t_article文章表
image.png -
t_img文章图片表
image.png
t_comment文章评论表
image.png
自己添加数据,图文混合 如下：
<div>
<img src="http://hcoder.oss-cn-beijing.aliyuncs.com/public/images/xcp2.png" width="100%" />grace.hcoder.net<br />富文本可以展示html标签 ^_^
</div>
2. entity
image.png
其中，Article、Img、Comment类参照以前写法，自行完成
其余vo包中的两个视图对象类如下：
image.png
3. mapper
- ArticleMapper接口，需要声明如下方法，自行实现
List<ArticleVO> selectAll();
ArticleVO getArticleById(int aId);
- ImgMapper接口
List<Img> selectImgsByAId(int aId);
- CommentMapper接口
List<CommentVO> selectCommentsByAId(int aId);
4. service
- ArticleService接口
List<ArticleVO> selectAll();
ArticleVO getArticleById(int aId);
- ImgMapper接口
List<Img> selectImgsByAId(int aId);
- CommentMapper接口
List<CommentVO> selectCommentsByAId(int aId);
5.各个Service接口的实现自行完成
- service层单元测试，自行完成
6. controller
- ArticleController
package com.soft1721.jianyue.api.controller;
import com.aliyun.oss.OSSClient;
import com.soft1721.jianyue.api.entity.Article;
import com.soft1721.jianyue.api.entity.Img;
import com.soft1721.jianyue.api.entity.User;
import com.soft1721.jianyue.api.entity.vo.ArticleVO;
import com.soft1721.jianyue.api.entity.vo.CommentVO;
import com.soft1721.jianyue.api.service.ArticleService;
import com.soft1721.jianyue.api.service.CommentService;
import com.soft1721.jianyue.api.service.ImgService;
import com.soft1721.jianyue.api.util.ResponseResult;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.Resource;
import java.io.File;
import java.io.IOException;
import java.net.URL;
import java.util.*;
@RestController
@RequestMapping(value = "/api/article")
public class ArticleController {
@Resource
private ArticleService articleService;
@Resource
private CommentService commentService;
@Resource
private ImgService imgService;
@GetMapping(value = "/list")
public ResponseResult getAll() {
List<ArticleVO> articleList = articleService.selectAll();
return ResponseResult.success(articleList);
}
@GetMapping(value = "/{aId}")
public ResponseResult getArticleById(@PathVariable("aId") int aId) {
ArticleVO article = articleService.getArticleById(aId);
List<CommentVO> comments = commentService.selectCommentsByAId(aId);
Map<String,Object> map = new HashMap<>();
map.put("article",article);
map.put("comments",comments);
return ResponseResult.success(map);
}
7.swagger测试结果
- /api/article/list接口，获取文章列表页数据
image.png
-
/api/article/{aId}接口，获取文章详情页数据
image.png
