6. 写文章功能

1.思考

• 验证码过期
• 点击验证码60码的按钮的禁用问题？
• 下一个按钮
• 注册成功后，页面跳转问题
• 新用户跳转
• 文章的三种内容

2.后端

2.1数据库表无需更改

2.2 添加pom.xml依赖，增加fastjson依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.56</version>
</dependency>

2.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);

2.4 service

• ArticleService

void insertArticle(Article article);

• ImgServie

void insertImg(Img img);

2.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();
}

2.6 swagger测试

3.前端

• write.vue

<template>
    <view class="container">
        <!-- 文章标题输入框，和title变量绑定 -->
        <input type="text" v-model="title" placeholder="请输入标题" />
        <!-- 选择图片的按钮，点击触发chooseImg方法 -->
        <button class="add-btn" @tap="chooseImg">+图片</button>
        <!-- 文章内容输入的多行文本域，绑定content变量 -->
        <textarea placeholder="输入内容" v-model="content" class="content" />
        <text>预览</text>
        <!-- 使用graceUI的富文本解析功能，来预览文章内容 -->
        <view class="grace-text"><rich-text :nodes="content" bindtap="tap"></rich-text></view>
        <button class="green-btn" @tap="postArticle">发布文章</button>
    </view>
</template>
<script>
export default {
    data() {
        return {
            title: '',
            content: '',
            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 + '/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>
.content{
}   
</style>