您好,登錄后才能下訂單哦!
這篇文章主要講解了“springboot后端存儲富文本內(nèi)容的方法是什么”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“springboot后端存儲富文本內(nèi)容的方法是什么”吧!
springboot:后端快速應(yīng)用開發(fā)框架。
tinymce:簡單的富文本編輯器。
base64:Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一,Base64就是一種基于64個可打印字符來表示二進(jìn)制數(shù)據(jù)的方法。編碼規(guī)則:把3個字節(jié)變成4個字節(jié);每76個字符加一個換行符;最后的結(jié)束符也要處理。對于圖片來說,base64 編碼就是可以將一副圖片數(shù)據(jù)編碼成一串字符串,使用該字符串代替圖像地址。
獲取tinymce富文本編輯器的內(nèi)容(html形式),通過axios發(fā)送到后端,后端接收到內(nèi)容后直接存儲到數(shù)據(jù)庫。
我配置好的富文本編輯器效果如下:
注意這里有一個問題就是圖片該如何傳輸,我這里是直接獲取base64格式的圖片后直接上傳,這是一個比較簡單的方法。
html內(nèi)容如下:
可以看到圖片的內(nèi)容極其長,這是base64格式編碼導(dǎo)致的,不過好處是當(dāng)前端請求富文本內(nèi)容時,如果一篇文章中有很多圖片的話,瀏覽器不用多次發(fā)起圖片請求,而是圖片和文字一起發(fā)送到了前端。
前端通過axios將富文本發(fā)送給后端的代碼:
axios({ method: 'post', url: 'http://localhost:8081/users/news', data: { "categoryId": 1, "userId": 1, "title": "震驚??!60歲老頭竟然。。。。", "context": tinymce.activeEditor.getContent() } }).then((res)=>{ console.log(res.data) })
還有一個方法是圖片內(nèi)容和文字內(nèi)容分開上傳,內(nèi)容依舊是html格式,但是“<img src=“圖片路徑”>”,這里的圖片路徑需要重寫為圖片上傳后存儲在服務(wù)器上的路徑。
注意:存儲富文本的內(nèi)容的數(shù)據(jù)類型為longtext,防止內(nèi)容過長無法保存
存儲結(jié)果如下:
@ApiOperation("發(fā)表新聞") @PostMapping("/news") public Result updateNews(@RequestParam Long userId,@RequestParam Integer categoryId,@RequestParam String title,@RequestParam String context){ System.out.println("發(fā)表新聞"+context); Result result = new Result(); News news = new News(categoryId,userId,title,context); boolean flag = newsService.save(news); if (!flag){ result.setFlag(false); return result; } result.setFlag(true); return result; }
感謝各位的閱讀,以上就是“springboot后端存儲富文本內(nèi)容的方法是什么”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對springboot后端存儲富文本內(nèi)容的方法是什么這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。