1.添加pom依賴
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.56</version>
</dependency>
2.數(shù)據(jù)庫(kù)表和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);
- 接口實(shí)現(xiàn)及單元測(cè)試省略
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) {
//調(diào)用FastJson的序列化工具，將前端傳過來的圖片數(shù)組字符串反序列化為Java的List對(duì)象
List<String> imgList = JSONArray.parseArray(imgs, String.class);
//遍歷圖片List，創(chuàng)建Img對(duì)象寫入數(shù)據(jù)庫(kù)
for (String imgUrl:imgList) {
Img img = new Img();
img.setAId(aId);
img.setImgUrl(imgUrl);
imgService.insertImg(img);
}
return ResponseResult.success();
}
6.swagger測(cè)試
7.前端
- 注意：在首頁點(diǎn)擊“寫文章”按鈕，要判定登錄狀態(tài)，如果沒登錄，跳轉(zhuǎn)到登錄頁面；如果已經(jīng)登錄，跳轉(zhuǎn)到寫文章頁面
- write.vue
<template>
<view class="container">
<view class="write">
<!-- 文章標(biāo)題輸入框，和title變量綁定 -->
<textarea v-model="title" placeholder="請(qǐng)輸入標(biāo)題" class="write-title" />
<!-- 選擇圖片的按鈕，點(diǎn)擊觸發(fā)chooseImg方法 -->
<image src="../../static/pic.png" @tap="chooseImg" class="add-btn"></image>
</view>
<!-- 文章內(nèi)容輸入的多行文本域，綁定content變量 -->
<textarea placeholder="請(qǐng)輸入內(nèi)容" v-model="content" class="content" />
<text class="yulan">預(yù)覽區(qū)：</text>
<!-- 使用graceUI的富文本解析功能，來預(yù)覽文章內(nèi)容 -->
<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">發(fā)布文章</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數(shù)組
_this.imgs.push(uploadFileRes.data);
//將圖片地址拼接HTML標(biāo)簽，加入文章內(nèi)容
_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) {
//獲得發(fā)布文章成功返回的文章id
var aId = res.data.data;
console.log(aId);
uni.showToast({
title: '發(fā)布成功'
});
//將文章id和文章對(duì)應(yīng)的圖片地址數(shù)組傳到后臺(tái)，存入數(shù)據(jù)庫(kù)
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數(shù)組
},
success: res => {
if (res.data.code === 0) {
console.log('文章圖片地址已寫入數(shù)據(jù)庫(kù)');
}
}
});
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>
