Vue3学习(二十三)- 保存文档内容正常显示

  • Vue3学习(二十三)- 保存文档内容正常显示已关闭评论
  • 26 次浏览
  • A+
所属分类:Web前端
摘要

情人节已经接近尾声了,虽然跟我没什么关系,但是我还是很渴望,能遇到一个良人相伴一生。


写在前面

情人节已经接近尾声了,虽然跟我没什么关系,但是我还是很渴望,能遇到一个良人相伴一生。

现在时间:

Vue3学习(二十三)- 保存文档内容正常显示

内心异常平静,相对吵闹我更喜欢安静的晚上,没人打扰,enjoy自己独处的时间!

保存内容显示

1、任务拆解

  • 读取已保存内容
  • 将读取内容在富文本里显示

2、读取已保存内容

这个很好理解,就是增加获取富文本内容的接口,示例代码如下:

/*  * @decription 按照ID获取内容  * @author longrong.lang  * @date 2024/2/14 23:43  * @param id  * @return java.lang.String  */ public String find_content(Long id){     Content content=contentMapper.selectByPrimaryKey(id);     if(null != content){         return content.getContent();     }     return "没有找到匹配值!"; }  @GetMapping ("/find_content/{id}") public CommonResp find_content(@PathVariable Long id) {     CommonResp<String> resp = new CommonResp<>();     String content = docService.find_content(id);     resp.setContent(content);     resp.setMessage("获取内容成功!");     return resp; } 

3、将读取内容在富文本里显示

这部分更好理解,将接口返回的字符串,通过对应api在富文本显示即可,示例代码如下:

/*  *  *  * 按照id查询content  * */ const handleQueryContent = () => {   // 如果不清空现有数据,则编辑保存重新加载数据后,再点编辑,则列表显示的还是编辑前的数据   axios.get("/doc/find_content/"+doc.value.id).then((response) => {     const data = response.data;     if (data.success) {       editor.txt.html(data.content)     } else {       message.error(data.message);     }   }); }; 

4、效果

Vue3学习(二十三)- 保存文档内容正常显示

写在最后

有点讽刺呀,coding居然随机到约定这首歌,真的画面感拉满呀。
我曾和一个女孩说过,以后我们结婚,我一定要身着西装,拿着手捧花,轻唱这首歌缓缓的走向你,去牵你的手,这首歌的词真的太好了,我真好喜欢,但事与愿违!
Vue3学习(二十三)- 保存文档内容正常显示

可今天偏偏是情人节,我还是单身,哈哈,有点小尴尬吧,但是也没什么,物是人非,一切都是最好的安排,祝好,熟悉的陌生人!

Vue3学习(二十三)- 保存文档内容正常显示