Python 全栈系列157 搭建一个文档搜索服务流程_搭建最简单的文档搜索下载网站

说明

涉及到的技术相对杂一些，就不说的很细了，主要梳理一些要点，算是对这个小应用的总结。

最终效果大概是这样的：

内容

涉及到的技术大约有：

• 1 前端：

  • 1 Bootstrap4
  • 2 VUE
  • 3 Jquery
  • 4 Awesome Font
  • 5 MarkDown
  • 6 HTML

• 2 后端

  • 1 Flask
  • 2 ES

首先下载一个风格模板， 这篇文章简单介绍了下。

1 Bootstrap4

整体风格的控制使用BS4。

• 1 布局方面BS的栅格系统（12， 6， 4）这三种元素宽度用的比较多。
• 2 内容的展示使用卡片。

2 VUE

MVVM的确是更好的方式，风格也和后端更像。

• 1 内容的循环生成使用VUE
• 2 部分变量的生成还是使用Jinja
• 3 VUE的数据请求和jquery不太一样，不要放在computed去做异步请求，而是使用watch。

3 Jquery

在元素的控制上，Jquery更直观一些，但是显然更麻烦。

• 1 在VUE动态生成的元素上使用Jquery加上click时间。
• 2 载入页面后执行仍然可以用$(document).ready

4 Awesome Font

小图标加起来会让页面更友好

• 1 注意本次的模板用的都是 fas开头的class, 可以在这个网站搜索想要的图标

5 MarkDown

• 1 MarkDown转为HTML元素仍然是使用后端生成
• 2 前端样式的加载要放到body的后面，来覆盖当前模板的设置（不然有些显示不那么友好）

6 HTML

• 1 <a>打开新页面的方法是设置target="_blank"

7 Flask

• 1 使用LoginManager要注意添加默认方法，返回的应该是对象（不然后面logout会出问题）
• 2 视图调用视图。在视图函数里面使用request发起请求，host_ip可以通过规则构造。

8 ES

• 1 单次的增删改查。
• 2 Bulk方式批量增删改查。
• 3 可以一次性删除一个表es.delete_by_query(index='document', doc_type='design_script',body={"query": {"match_all": {}}} )

9 整体流程

• 1 在本地有一个py，将md文档读取后，按照id,content, title, update_time等关键字段组成ListOfDict,然后使用Bulk方式提交到ES。
• 2 在web页面的搜索框内输出内容
• 3 VUE按照防抖（50ms)方式监听变化，然后向ES提交全文匹配查询
• 4 ES返回结果列表，由VUE将文章渲染为一个个表格
• 5 JQuery为这个元素写了一个函数，点击内容会展开/收缩。
• 6 点击标题会打开一个按之前md格式渲染的一个页面。