这节课开始，我们要一起来学习知识图谱项目的最后一个环节，我将带大家来用前后端的技术，封装一个对话的窗口界面，让用户可以用对话的方式，查询电影的内容。

整个前后端要完成的任务，分为两个大的部分：首先我们需要写一个HTML网页，来展示对话内容；然后用Flask框架，封装一个后端的处理逻辑，来调用知识图谱的查询方法，返回查询结果。

这节课，先来使用的是TailwindCSS这个前端框架，完成静态网页的布局。TailwindCSS这个框架有很多内置的CSS样式，用它布局网页，可以大大提高开发效率。

代码示例

1、HTML基本结构 

内容不可见，请联系管理员开通权限。

2、聊天窗口 

内容不可见，请联系管理员开通权限。

3、左侧边栏 

内容不可见，请联系管理员开通权限。

4、对话框 

内容不可见，请联系管理员开通权限。

5、完整代码及注释 

内容不可见，请联系管理员开通权限。

使用TailwindCSS框架，布局网页是很高效的，但要顺畅的使用它，还是有门槛的，要求有比较扎实的原生CSS基础。如果大家有前端基础，强烈建议去深入学习一下这个框架。

本文链接：http://edu.ichenhua.cn/edu/note/606

版权声明：本文为「陈华编程」原创课程讲义，请给与知识创作者起码的尊重，未经许可不得传播或转售！