vue实现AI问答Markdown打字机结果

上线结果

功能清单

• AI问答，笔墨输出跟随打字机结果
  
• 格式化回复内容（markdown格式）
  
• 制止回复，复制回复内容
  
• 回复时自动向下滚动
  
• 全屏切换
  
• 汗青问答查察
  

主要技能

• vue @2.7.1
  
• markdown-it @14.1.0
  
• @microsoft/fetch-event-source @2.0.1
  
• highlight.js @10.7.1
  

实现思绪

• 配景接口支持流式返回也就是 ：Accept: 'text/event-stream' 哀求头
  
• 前端通过fetch-event-source哀求数据，也可以通过axios，但是要举行转换
  
• 前端通过markdwon-it团结highlight.js表现返回的数据，并高亮和格式化代码
  

核心代码

1.markdown利用

2.接口哀求

        通过 onmessage方法，返回接口数据，拼接后渲染。
避坑

• 调试模式下要关闭compress，否则不会返回流，会一次性返回，无法实现打字机结果，参考如下图：
  
  
  
• markdown输出后，代码无法靠左对齐，无法像下图如许：
  
  
  

        注意添加样式：

总结

        至此一个AI问答打字机结果的功能就实现了，核心在于：流式输出，markdown 格式化
        如果你以为看完有代价，可以免费点个赞👍，也可以品评区一起学习交流。
        

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。