java web 网页 ui_基于云开发开发 Web 应用(二):界面 UI 开发

本文介绍了使用 Vue 进行 Web 应用开发时的界面 UI 设计,包括创建 Router、Page,以及优化用户体验的策略。开发者构建了首页、列表页和结果页,通过 v-model、@keydown 事件监听回车触发操作,autofocus 使得页面加载后输入框自动聚焦。同时,利用 v-skeleton-loader 显示骨架图以改善数据加载时的用户体验。
摘要由CSDN通过智能技术生成

工作量分析

在我们进行这部分开发的时候,接下来我们需要进行相应的功能安排和分类。

bf38461879b1980f7728a92532e6015c.png

简单看来,我需要开发 3 个页面:

首页:首页负责用户默认访问。

列表页:列表页面则是在搜索过程中,如果有多个结果,则进入到列表页面。如果有单个结果,则应该进入到详情页面。

结果页:结果页负责显示命令的具体的翻译结果。

根据实际的工作拆分组件的化,我需要有一个 Layout 组件来负责整体的页面的环境渲染。但是,考虑到组件的复用,于是决定将首页的 Title 进行优化,使首页和详情页保持一致。

8477949f2e0b48886ba4b26357018063.png

在新版的布局情况下,我就可以将顶部的的 title 和底部的 Link 放在最外侧的组件中。

创建 Router & Page

在思考情况后,接下来我们来创建 Router 和 Page。首先,删除 views 页面的 About.vue(因为这个页面我们不需要)。然后创建 List.vue 和 Result.vue ,用作后续的开发准备。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值