测试圈相亲平台开发流程(6):搜索页-前端开发

105 阅读1分钟

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

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

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

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

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

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

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

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

Part1把页面清扫一下

毕竟下载下来的东西很多都没用,该删的删。也就是下图这些:图片对应页面上显示的是一样的:图片

Part2全局使用bootstrap5

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

图片

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

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

图片

2添加元素

找到确切位置后,改成这样:

图片

看看效果:

图片

Part4新增用户

dom层改成这样:图片

效果:

图片

顺便看看目前整体效果:

图片

期待它的完工哦~

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