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

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

代码示例

1、完整代码

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

2、代码注释

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

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

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

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