驗證碼過期
點擊驗證碼60碼的按鈕的禁用問題？
下一個按鈕
注冊成功后，頁面跳轉問題
新用戶跳轉
文章的三種內容
沒有圖，一到兩張張圖，大于三章圖
1、pom.xml依賴，增加fastjson依賴

<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文件的HTML部分

<template>
<view class="container">

<input type="text" v-model="title" placeholder="請輸入標題" />

<button class="add-btn" @tap="chooseImg">+圖片</button>

<textarea placeholder="輸入內容" v-model="content" class="content" />
<text>預覽</text>

<view class="grace-text">、
<rich-text :nodes="content" bindtap="tap"></rich-text>
</view>
<button class="green-btn" @tap="postArticle">發布文章</button>
</view>
</template>

js部分
data區

      return {
            title: '',
            content: '',
            userId: uni.getStorageSync('login_key').userId,
            imgs: []
        };

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 + '/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%"/>';
                      }
                  });
              }
          });
      }

選擇圖片上傳方法

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 + '/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'
                        });
                    }
                }
            });
        }

省略css部分