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

这篇具有很好参考价值的文章主要介绍了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);
    }
  });
};