写文章

1.添加pom依赖
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.56</version>
</dependency>

2.数据库表和entity无需修改

3.mapper
•ArticleMapper，新增文章方法，增加@Options注解，返回自增主键
@Insert("INSERT INTO t_article (u_id,title,content,create_time) VALUES (#{uId},#{title},#{content},#{createTime}) ")
@Options(useGeneratedKeys = true, keyProperty = "id", keyColumn = "id")
void insertArticle(Article article);

•ImgMapper，新增图片接口
@Insert("INSERT INTO t_img(a_id,img_url) VALUES (#{aId},#{imgUrl})")
void insertImg(Img img);

4.service
•ArticleService接口增加方法

void insertArticle(Article article);
•ImgServie接口增加方法

void insertImg(Img img);
•接口实现及单元测试省略

5. controller
   •ArticleController
   @PostMapping("/add")
   public ResponseResult postArticle(@RequestParam("uId") int uId,
   @RequestParam("title") String title,
   @RequestParam("content") String content) {
   Article article = new Article();
   article.setUId(uId);
   article.setTitle(title);
   article.setContent(content);
   article.setCreateTime(new Date());
   articleService.insertArticle(article);
   //新增文章后，将获取到的自增主键返回给客户端，用于图片地址的写入
   return ResponseResult.success(article.getId());
   }

•新建ImgController，注入ImgService，编写如下方法
@PostMapping("/add")
public ResponseResult addImg(@RequestParam("aId") int aId,
@RequestParam("imgs") String imgs) {
//调用FastJson的序列化工具，将前端传过来的图片数组字符串反序列化为Java的List对象
List<String> imgList = JSONArray.parseArray(imgs, String.class);
//遍历图片List，创建Img对象写入数据库
for (String imgUrl:imgList) {
Img img = new Img();
img.setAId(aId);
img.setImgUrl(imgUrl);
imgService.insertImg(img);
}
return ResponseResult.success();
}

6.swagger测试

7.前端
•注意：在首页点击“写文章”按钮，要判定登录状态，如果没登录，跳转到登录页面；如果已经登录，跳转到写文章页面
•write.vue
<template>
<view class="container">

    <view class="write">
        <!-- 文章标题输入框，和title变量绑定 -->
        <textarea v-model="title" placeholder="请输入标题" class="write-title" />
        <!-- 选择图片的按钮，点击触发chooseImg方法 -->
        <image src="../../static/pic.png" @tap="chooseImg" class="add-btn"></image>
    </view>
    <!-- 文章内容输入的多行文本域，绑定content变量 -->
    <textarea placeholder="请输入内容" v-model="content" class="content" />
    <text class="yulan">预览区：</text>
            <!-- 使用graceUI的富文本解析功能，来预览文章内容 -->
            <view class="grace-text">
                <text class="grace-title">{{title}}</text>
                <br/>
                <text class="grace-content">{{content1}}</text>
                <rich-text :nodes="content" bindtap="postArticle"></rich-text>
            </view>

    <button class="green-btn" @tap="postArticle">发布文章</button>
</view>

</template>

<script>
export default {
data() {
return {
title: '',
content: '',
content1:'',
userId: uni.getStorageSync('login_key').userId,
imgs: []
};

},
onLoad() {
},
methods: {
    chooseImg: function() {
        var _this = this;
        uni.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album'],
            success: function(res) {
                console.log(JSON.stringify(res.tempFilePaths));
                uni.uploadFile({
                    url: _this.apiServer + '/cream/upload',
                    filePath: res.tempFilePaths[0],
                    name: 'file',
                    success: uploadFileRes => {
                        //图片上传成功，回显图片地址
                        console.log(uploadFileRes.data);
                        //将图片地址加入imgs数组
                        _this.imgs.push(uploadFileRes.data);
                        //将图片地址拼接HTML标签，加入文章内容
                        _this.content += '<img src="' + uploadFileRes.data + '" width = "100%"/>';
                    }
                });
            }
        });
    },
    postArticle: function() {
        var _this = this;
        uni.request({
            url: this.apiServer + '/article/add',
            method: 'POST',
            header: { 'content-type': 'application/x-www-form-urlencoded' },
            data: {
                uId: this.userId,
                title: this.title,
                content: '<div>' + this.content + '</div>'
            },
            success: res => {
                if (res.data.code === 0) {
                    //获得发布文章成功返回的文章id
                    var aId = res.data.data;
                    console.log(aId);
                    uni.showToast({
                        title: '发布成功'
                    });
                    //将文章id和文章对应的图片地址数组传到后台，存入数据库
                    uni.request({
                        url: this.apiServer + '/img/add',
                        method: 'POST',
                        header: { 'content-type': 'application/x-www-form-urlencoded' },
                        data: {
                            aId: aId,
                            imgs: JSON.stringify(_this.imgs)  //序列化imgs数组
                        },
                        success: res => {
                            if (res.data.code === 0) {
                                console.log('文章图片地址已写入数据库');
                            }
                        }
                    });
                    uni.switchTab({
                        url: '../index/index'
                    });
                }
            }
        });
    }
}

};
</script>

<style scoped>
.write{
width: 95%;
margin: auto;
display: flex;
justify-content: space-between;
}
.write-title{
flex: 1 1 80%;
padding-top: 10px;
border-bottom: 1px dotted #C1C1C1;
height: auto;
}
.add-btn{
width: 50px;
height: 55px;
margin-right: 5px;
color: #CCCCCC;
}

.content{
    height: 100px;
    width: 95%;
    margin: auto;
    padding: 10px;
}
.grace-text{
    margin-top: 10px;
}
.green-btn{
    margin-top: 20px;
    width: 60%;
    background: #00C777;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.grace-title{
font-size: 20px;
font-weight: 900;

}
.grace-content{
font-size: 15px;
}

</style>