列表页

2.解决问题

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

3.关于数据库文章内容的样式
<div>
<img src="http://hcoder.oss-cn-beijing.aliyuncs.com/public/images/xcp2.png" width="100%" />grace.hcoder.net<br />富文本可以展示html标签 _
</div>

4.后端
4.1 mapper

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

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

ImgMapper接口

List<Img> selectImgsByAId(int aId);

CommentMapper接口

List<CommentVO> selectCommentsByAId(int aId);

4.2 Service接口及实现、单元测试
4.3 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);
}

4.5 swagger测试
5.前端

index.vue

    <view class="article-box">
        <view class="article" v-for="(article,index) in articles" :key="index">
            <!-- 标题 -->
            <text class="article-title" @tap="gotoDetail(article.id)">{{article.title}}</text>
            <!-- 大于等于三张图片的显示方式 -->
            <view class="" v-if="article.imgs.length >= 3">
                <view class="thumbnail-box">
                    <view class="thumbnail-item" v-for="(item,index1) in article.imgs" :key="index1" v-if="index1<3">
                        <image :src="item.imgUrl"></image>
                    </view>
                </view>
            </view>
            <!-- 小于三张图片的显示方式 -->
            <view class="" v-else-if="article.imgs.length >= 1">
                <view class="text-img-box">
                    <view class="left">
                        <text>{{<!-- handleContent -->article.title}}...</text>
                    </view>
                    <view class="right">
                        <image :src="article.imgs[article.imgs.length - 1].imgUrl"></image>
                    </view>
                </view>
            </view>
            <!-- 没有图片的显示方式 -->
            <view class="text-box" v-else>
                <text>{{<!-- handleContent -->article.title}}...</text>
            </view>
            <!-- 文章作者等信息 -->
            <view class="article-info">
                <image :src="article.avatar" class="avatar small"></image>
                <text class="info-text">{{article.nickname}}</text>
                <text class="info-text1">{{article.createTime}}</text>
            </view>
        </view>
    </view>
    <view>
        <navigator url="../write/write" hover-class="navigator-hover" v-if="login" @tap="islogin()">
            <button class="btn">+</button>
        </navigator>
        <navigator url="../signin/signin" hover-class="navigator-hover" @tap="islogin()" v-else>
            <button class="btn">+</button>
        </navigator>
    </view>


</view>

</template>

<script>
export default {
data() {
return {
articles: [],
login:false
};
},
onLoad: function() {
this.getArticles();
},
onShow: function() {
const loginKey = uni.getStorageSync('login_key');
console.log(loginKey);
if (loginKey) {
this.login = true;
} else {
this.login = false;
}
},

    onPullDownRefresh: function() {
        this.getArticles();
    },
    methods: {
        
        changeTab: function() {
            uni.navigateTo({
                url: '../write/write'
            })
        },
        getArticles: function() {
            var _this = this;
            uni.request({
                url: this.apiServer + '/article/list',
                method: 'GET',
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                success: res => {
                    _this.articles = res.data.data;
                },
                complete: function() {
                    uni.stopPullDownRefresh();
                }
            });
        },
        gotoDetail: function(aId) {
            uni.navigateTo({
                url: '../article_detail/article_detail?aId=' + aId
            });
        },
        handleTime: function(createTime) {
            var date = new Date(createTime);
            var year = date.getFullYear();
            var month =
                date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            // 拼接
            return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
        },
        handleContent: function(content) {
            content = content.replace(/(\n)/g, '');
            content = content.replace(/(\t)/g, '');
            content = content.replace(/(\r)/g, '');
            content = content.replace(/<\/?[^>]*>/g, '');
            content = content.replace(/\s*/g, '');
            return content.substring(0, 50);
        },
        islogin: function() {
            if (this.login) {
                console.log('已登录');
            } else {
                console.log('未登录');
            }
        }

    }
};

</script>

<style scoped>

/* 圆形按钮 */
.btn {
    /* 阴影效果，四个参数分别是：水平阴影位置、垂直阴影位置、阴影尺寸位置大小、阴影颜色 */
    box-shadow: 2px 5px 10px #AAA;
    width: 65px;
    height: 65px;
    margin: 10px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    border: none;
    outline: none;
    bottom: 35px;
    right: 20px;
    background: linear-gradient(40deg, #ffd86f, #fc6262);
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    font-size: 30px;
}

.icon-text {
    color: #FFFFFF;
    font-size: 35px;
}

.article-box {
    height: auto;
    width: 100%;
}

.article-title {
    font-weight: bold;
}

.article {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    border-bottom: 1px solid #EEEEEE;
    height: 210px;
}

.thumbnail-box {
    margin-top: 10px;
    display: flex;
    height: 120px;
    width: 100%;
}

.thumbnail-item {
    flex: 1 1 33%;
    height: 110px;
    margin-right: 5px;
    margin-left: 5px;
}

.thumbnail-item image {
    width: 100%;
    height: 100%;
}

.avatar {
    width: 50px;
    height: 50px;
}

.info-text {
    margin-left: 10px;
    font-size: 18px;
}

.info-text1 {
    margin-left: 5px;
    color: #CCCCCC;
    font-size: 16px;
}

.text-img-box {
    display: flex;
    margin-top: 15px;
}

.text-box {
    margin-top: 15px;
}

.left {
    flex: 1 1 70%;
}

.right {
    flex: 1 1 40%;
    height: 110px;
}

.right image {
    width: 100%;
    height: 100%;
}

.article-info {
    display: flex;
    align-items: center;
}
</style>

article_detail.vue

<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>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343