6. 写文章功能

1.思考

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

2.后端

2.1数据库表无需更改

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

    com.alibaba
    fastjson
    1.2.56

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