5."简阅"——文章列表页和详情页

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

自己添加数据,图文混合 如下：

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

2. entity

image.png

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

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

image.png

3. mapper

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

List selectAll();

ArticleVO getArticleById(int aId);

• ImgMapper接口

List selectImgsByAId(int aId);

• CommentMapper接口

List selectCommentsByAId(int aId);

4. service

• ArticleService接口

List selectAll();

ArticleVO getArticleById(int aId);

• ImgMapper接口

List selectImgsByAId(int aId);

• CommentMapper接口

List 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 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测试结果

• /api/article/list接口，获取文章列表页数据

image.png

• /api/article/{aId}接口，获取文章详情页数据

  
  
  image.png