Vue3學習（二十三）- 儲存文件內容正常顯示

久曲健發表於2024-03-10
Vue

寫在前面

情人節已經接近尾聲了，雖然跟我沒什麼關係，但是我還是很渴望，能遇到一個良人相伴一生。

現在時間:

image.png

內心異常平靜，相對吵鬧我更喜歡安靜的晚上，沒人打擾，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、效果

image.png

寫在最後

有點諷刺呀，coding居然隨機到約定這首歌，真的畫面感拉滿呀。
我曾和一個女孩說過，以後我們結婚，我一定要身著西裝，拿著手捧花，輕唱這首歌緩緩的走向你，去牽你的手，這首歌的詞真的太好了，我真好喜歡，但事與願違！
image.png

可今天偏偏是情人節，我還是單身，哈哈，有點小尷尬吧，但是也沒什麼，物是人非，一切都是最好的安排，祝好，熟悉的陌生人！

image.png

相關文章