4.文章列表页和详情页

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
四、各层接口的设计？

2.数据库设计

t_article

article.png
t_comment

comment.png
t_img

img.png
自行填充一些数据
t_article的content字段样例

grace.hcoder.net
富文本可以展示html标签 ^_

3.entity

entity.png

其中，Article、Img、Comment类参照以前写法，自行完成

其余vo包中的两个视图对象类如下：

articleVo.png

commentVo.png

4.mapper

ArticleMapper接口，需要声明如下方法，自行实现

List selectAll();
ArticleVO getArticleById(int aId);

ImgMapper接口

List selectImgsByAId(int aId);

CommentMapper接口

List selectCommentsByAId(int aId);

5.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 articleList = articleService.selectAll();
        return ResponseResult.success(articleList);
    }

    @GetMapping(value = "/{aId}")
    public ResponseResult getArticleById(@PathVariable("aId") int aId) {
        ArticleVO article = articleService.getArticleById(aId);
        List comments = commentService.selectCommentsByAId(aId);
        Map map = new HashMap<>();
        map.put("article",article);
        map.put("comments",comments);
        return ResponseResult.success(map);
    }

7.swagger测试

8.前端

index.vue

article_detail.vue