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

Vue3学习（二十三）- 保存文档内容正常显示已关闭评论
66 次浏览

A+

所属分类：Web前端

摘要

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

便宜好用的国外VPS推荐

写在前面

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

现在时间:

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);     }   }); };