JavaWeb商城项目笔记--- Day3 (购物车结算功能)

问题场景
  1. 用户选中某一件商品之后,会有点击结算的功能。此时,页面跳转到结算界面,并且在这个页面中显示一些相关的信息。
  2. 以京东为例:
    1. 购物车结算按钮
    在这里插入图片描述 2. 结算界面
    在这里插入图片描述
功能步骤
  1. 用户进入购物车页面,选中指定商品
  2. 用户点击结算按钮
  3. 界面跳转到结算界面,并附带购物车内选中的商品的相关信息
功能分析
  1. 这个功能的起始页面是购物车页面,终止页面是结算页面。我们需要考虑在用户点击了结算按钮并且跳转到具体的结算页面的这个过程中:
    1. 当用户点击了结算按钮之后,发生了哪些调用,响应了哪些数据
    2. 以及这些数据是怎么样跳转到结算页面的
    3. 在结算页面,如何获取这些数据,以及如何布局数据的位置
  2. 观察发现,在结算页面有如下一些信息如:商品的全部的信息,商品实际需要付款价格,收货人姓名,电话,地址等等。
  3. 我们考虑这些数据的来源:
    1. 商品信息:购物车中获取(session 或 cookie 如果是旧订单,则取自数据库)
    2. 收货人信息:用户现场填入 or 从已经设置的收货地址中选中
    3. 其他例如:订单编号(随机生成),下单时间,订单总价(计算选中物品价格之和),订单状态,等等
  4. 那么这个流程就是:当用户点击了结算按钮之后,调用了业务层,在业务层中,我们分别从数据源获取这些数据或者是新生成,总之,最终目标是得到结算页面需要的全部的信息,并且把这些信息打包组合,之后传递给订单详情页面。
  5. 在订单详情页面,我们根据传递过来的数据,根据页面布局,取其中需要的部分,放置在指定的位置,即可完成目标。
功能实现部分代码(以本项目为例)
  1. 用户点击结算(提交订单),之后发生的后台业务调用:
    1.在页面中的位置
    在这里插入图片描述 2. 左下角是点击之后跳转的路径(业务层)

  2. 业务层:主要功能组装数据,响应数据
    在这里插入图片描述

  3. 结算页面:主要是接收业务层响应回来的数据,根据页面布局,取需要的放置在指定的位置

    1. 结算页面(练习项目,仅仿照京东部分内容)
      在这里插入图片描述
    2. 结算页面代码部分
      在这里插入图片描述
总结
  1. 订单项的实体化,类似购物车的实体化。都是一些数据的组合
  2. 抽取大的逻辑框架:依旧是发起请求,组合数据,响应数据,布局数据
  3. 难点在于当项目中模块逐渐增加,代码逐渐增多之后,以上的4个步骤之间的请求响应关系可能不再直接,而趋于间接,就容易出错。
在Java Web上开发一个网上蛋糕商城的前台,主要分为用户界面设计、交互功能实现和数据展示等几个关键部分。以下是前台开发的一般实验思路: 1. **需求分析**: - 确定商城的主要功能,如商品浏览、搜索、购物车管理、订单流程(添加、确认、支付)和用户登录注册等。 - 明确界面风格,如响应式设计以适应不同设备。 2. **界面设计**: - 使用HTML/CSS构建静态页面布局,包括导航栏、轮播图、商品列表页、详情页和用户个人中心等。 - 利用Bootstrap或其他前端框架进行快速样式搭建。 3. **JavaScript或jQuery**: - 实现动态效果,如图片轮播、下拉菜单、按钮点击事件处理等。 - 利用AJAX异步加载数据,提升用户体验,避免页面刷新。 4. **UI组件化**: - 使用前端框架提供的组件库,比如React、Vue或Angular,提高开发效率并保证代码复用。 5. **用户认证与权限管理**: - 使用session或JWT进行用户身份验证,确保用户只能访问自己的数据。 - 设计用户权限系统,如管理员能查看和修改所有数据,普通用户只能查看和购买。 6. **数据绑定和模型驱动**: - 如果使用MVVM架构,如Angular,利用双向数据绑定连接视图和模型。 7. **前端状态管理**: - 使用Redux或Vuex管理应用状态,保证状态的一致性和可预测性。 8. **SEO优化**: - 为搜索引擎优化考虑,确保页面元素有正确的元信息和结构。 9. **性能优化**: - 压缩和合并CSS/JS文件,减少HTTP请求。 - 利用CDN加速资源加载。 10. **测试**: - 编写单元测试和集成测试,确保各个功能正常工作。 - 进行用户验收测试,收集用户反馈。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值