1、pom.xml依赖,增加fastjson依赖
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
//遍历图片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部分
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 += '';
}
});
}
});
}
选择图片上传方法
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 += '';
}
});
}
});
}
发布文章方法
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: '
},
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部分