4. 章列表和详情页

1. 思考问题

1.文章列表页的三种布局方式？
2.文章详情页的布局？
3.关于文章模块的数据库设计问题？

2.解决问题

1. • 超过三张图片：横排三张图（选最后三张图）
   • 图片少于3张：图文左右排列（选最后一张图）
   • 无图片：只显示文章内容（字数控制）
2. 图文混排
3. • 文章表:id、u_id、title、content、create_time
   • 图片表:id、a_id、img_url
   • 评论表：id、u_id、a_id、content、comment_time

3.关于数据库文章内容的样式

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

4.后端

4.1 entity

entity.png

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

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

vo

vo

4.2 mapper

• ArticleMapper接口，需要声明如下方法

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

• ImgMapper接口

List selectImgsByAId(int aId);

• CommentMapper接口

List selectCommentsByAId(int aId);

4.3 Service接口及实现、单元测试

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

4.5 swagger测试

5.前端

• index.vue

    
        
            
                
                {{article.title}}
                
                
                    
                        
                            
                        
                    
                
                
                
                    
                        
                            {{article.title}}...
                        
                        
                            
                        
                    
                
                
                
                    {{article.title}}...
                
                
                
                    
                    {{article.nickname}}
                    {{article.createTime}}
                
            
        
        
            
                +
            
            
                +
            
        


    

• article_detail.vue