测试圈相亲平台开发流程(8):详情页择偶部分-前端开发

简介: 测试圈相亲平台开发流程(8):详情页择偶部分-前端开发

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


今天继续开始做这个平台的三大页之一:详情页的择偶部分


上节课后我又对前面页面进行了细微的调整和优化。


清理出右侧页面的战场:

image.png结果如下:

image.png效果如下:

image.png


如法炮制,创建择偶要求组件:

还是去src/components文件夹下新建一个组件:Selection.vue

image.png

然后仿照我们Detail.vue的内容写出择偶标准,一般择偶标准没有过多字段。用户最好不要过多的要求对方条件,否则结果大概率为空。

image.png

暂时就这么多字段吧...

然后去Home.vue引入。

image.png

效果如下:

image.png

现在看着这个页面,总觉的少点什么...


哦对了!是保存/删除/匹配 按钮....


这三个按钮我觉得放在右侧底部就可以了... 而按钮所在可以放在Home.vue上也可以...其实,并不一定非要放在子组件中。


image.png

最后效果如下:

image.png


下节课预告,匹配结果弹层页面。


(如果觉得这个系列讲的过快可以私聊作者哦~ 话说作者培训班讲的可是非常细致的,每一句代码每一个操作都实际的展现在你面前,想报名的也私聊~)

相关文章
|
3月前
|
Kubernetes 测试技术 Perl
混沌测试平台 Chaos Mesh
混沌测试平台 Chaos Mesh
95 1
|
19天前
|
Web App开发 前端开发 安全
前端研发链路之测试
本文由前端徐徐撰写,介绍了前端测试的重要性及其主要类型,包括单元测试、E2E测试、覆盖率测试、安全扫描和自动化测试。文章详细讲解了每种测试的工具和应用场景,并提供了选择合适测试策略的建议,帮助开发者提高代码质量和用户体验。
25 3
前端研发链路之测试
|
12天前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
28 2
|
14天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
27天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
71 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
3月前
|
测试技术 Android开发 iOS开发
Appium 是一个开源的自动化测试框架,它支持多种平台和多种编程语言
Appium是一款开源自动化测试框架,支持iOS和Android多平台及多种编程语言。通过WebDriver协议,开发者可编写自动化测试脚本。在iPhone上实现屏幕点击等操作需安装Appium及其依赖,启动服务器,并设置所需的测试环境参数。利用Python等语言编写测试脚本,模拟用户交互行为,最后运行测试脚本来验证应用功能。对于iPhone测试,需准备真实设备或Xcode模拟器。
107 1
|
3月前
|
运维 Kubernetes 监控
|
3月前
|
前端开发 JavaScript 测试技术
React 与前端自动化测试也太重要啦!各种测试框架助力确保应用质量,快来开启优质开发之旅!
【8月更文挑战第31天】随着前端技术的发展,React 成为了构建用户界面的热门选择。然而,随着应用复杂性的增加,确保应用质量变得至关重要。本文介绍了前端自动化测试的重要性,并详细综述了常用的测试框架如 Jest、Enzyme 和 Cypress,以及如何通过它们进行高效的 React 组件测试。通过遵循最佳实践,如编写可维护的测试用例、覆盖关键场景、集成 CI/CD 流程和进行性能测试,可以显著提高应用的稳定性和可靠性。
53 0
|
3月前
|
JavaScript 前端开发 测试技术
Vue.js开发者必看!Vue Test Utils携手端到端测试,打造无懈可击的应用体验,引领前端测试新风尚!
【8月更文挑战第30天】随着Vue.js的普及,构建可靠的Vue应用至关重要。测试不仅能确保应用质量,还能提升开发效率。Vue Test Utils作为官方测试库,方便进行单元测试,而结合端到端(E2E)测试,则能构建全面的测试体系,保障应用稳定性。本文将带你深入了解如何使用Vue Test Utils进行单元测试,通过具体示例展示如何测试组件行为;并通过Cypress进行E2E测试,确保整个应用流程的正确性。无论是单元测试还是E2E测试,都能显著提高Vue应用的质量,让你更加自信地交付高质量的应用。
60 0
|
4月前
|
前端开发 开发者
领域驱动使用问题之在图研发平台中,领域驱动设计是如何帮助解决前端开发面临的问题的
领域驱动使用问题之在图研发平台中,领域驱动设计是如何帮助解决前端开发面临的问题的