测试圈相亲平台开发流程（6）：搜索页-前端开发

本平台并非真实运营和使用，仅在于学习研究平台前后端研发技术使用。

今天继续开始做这个平台的三大页之一：搜索页。

关于这里的设计其实就是对成员列表的管理。增加，还是搜索，还是查看，还是删除。

这个页面和第二个页面详情页是 需要联系起来的。

也就是说。本页面有俩个按钮，分别为新增和搜索。

点击新增后，右侧页面出现新增的各个字段空输入框。点击搜索后，在输入框输入微信号，右侧页面显示对应成员的详情。

而右侧也就是第二个大页面，则有修改/保存/删除 功能。不过这是我们下节课要干的活。

本节课就完成第一个左侧页面吧~

Part1把页面清扫一下

毕竟下载下来的东西很多都没用，该删的删。也就是下图这些：

对应页面上显示的是一样的：

Part2全局使用bootstrap5

给我们的v_love/src/mian.js 加上红框三句后，我们全局的vue页面就都可以直接用bootstarp5的样式了

Part3我们先给页面的文案改一改删一删

1微信搜索部分，注意其中我们给页面的所有输入框都文案居中了哈：

2添加元素

找到确切位置后，改成这样：

看看效果：

Part4新增用户

dom层改成这样：

效果：

顺便看看目前整体效果：

期待它的完工哦~

下节课预告，详情页面，也就是展开后的第二个页面~