到目前为止，我们在代码层面上，已经实现了搜索功能，但在使用上还不是很方便，比如要搜别的词，就需要去修改代码，还不能称为是一个完整项目。所以，接下来我们就要用前后端的技术，对模型进行封装，让用户通过表单提交的方式，实现灵活的搜索功能。

最终的效果，我们已经在第一节课给大家演示过了，这节课要带大家完成的是前端，也就是界面部分。为了快速布局出一个美观的界面，我们用TailwindCSS这个CSS框架来实现，主要是表单和搜索结果两个部分。

代码示例

1、完整代码 

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

2、代码注释 

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

这节课很短，但包含的知识点非常多。如果大家没有前端基础，学起来吃力的话，可以直接使用我给大家提供的源码来完成项目。系统的前端基础和TailwindCSS框架的内容，我会在后面单独开一个专题给大家讲解。

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

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