JavaWeb商城项目笔记--- Day1 (查询商品分类)

功能出现场景
  1. 进入主页面之后,会显示一个所有可查看商品的信息
    在这里插入图片描述
  2. 由于这里商品信息不是固定而是动态的,因此需要考虑怎么样动态的获取到数据库中的商品信息分类,然后在前台显示出来。
  3. 这里的页面顶部代码,是抽取出来的 header.jsp ,其他需要这个顶部菜单栏,分类栏的页面都需要引用 header.jsp 。 (提取公共类思想,见上一篇博文)
功能解决思路
版本1 —— request.setAttribute + JSTL
  1. 首先,肯定有一套 servlet service dao 的代码用于处理查询语句,来查询到所有的商品分类表,并且返回一个 List 的集合
    在这里插入图片描述
  2. 在 servlet 获取到数据查询返回的数据之后,需要考虑如何在前台进行渲染呈现
  3. 首先想到将获取到的 List 集合放到 Request中,使用 request.setAttribute 方法。
  4. 然后前端使用 JSTL 的 c:forEach 方法,遍历 Request 传递过来的值(注意导入标签库)
    在这里插入图片描述
  5. 优点:易于理解,初学时候首先想到的方法
  6. 弊端:由于 Request 只做了一次赋值,当被取值之后就失效。也就是说之后第一次使用到部分代码的页面可以获取到所有的分类信息,其他页面无法再次获取到其中的值。
版本2 —— Json格式数据 + JQuery
  1. 由于版本1中,出现了不同页面之间,无法全部实现获取到商品分类信息的问题,如何解决这个问题就是版本2的目的

  2. 我们考虑:在 header.jsp 被其他页面调用的时候,每被调用一次,就执行一次数据库的查询,而非仅在第一次被调用的时候执行数据库的查询

  3. 那么就需要在 header.jsp 页面内通过非form或链接的方式直接直接调用 Servlet 。这里选择 JQuery 方式而非纯 Ajax 。
    关于两者区别,有一个简单的 Demo 案例:
    Ajax:https://blog.csdn.net/qq_36654606/article/details/86650080
    JQuery:https://blog.csdn.net/qq_36654606/article/details/86664224

  4. 当 Servlet 执行了业务操作,得到了商品分类集合,由于网络上无法直接传递 java 对象,且 request 方式又只能使用一次。因此现在如何传递已经得到的商品类型的集合信息到客户端,是现在需要解决的问题:这里有两种选择 xml or json。这里选择 Json 方式。
    在这里插入图片描述

  5. 当把查询到的商品分类的 List 对象传到前端之后,需要考虑前端如何获取这些对象,并呈现给用户,这里使用 Jquery 的 each 循环,来遍历接收到的响应数据,然后以< li >的方式重复输出
    在这里插入图片描述

  6. 优点:实现了不同页面在调用 header.jsp 的时候,都能获取到完整的商品分类信息。

  7. 缺点:由于每次调用 header.jsp 都会查询一次数据库,如果当多个用户同时使用,面临大量的查询数据库的操作,很明显会降低数据库的性能。

版本3 —— Json格式数据 + JQuery + redis
  1. 在版本2的基础上,我们考虑能否将类似商品分类信息这种会被经常访问到,但是又不会经常变化的数据存储到一个 缓存中。这样,只需要请求一次数据库,然后放置到缓存中,后来的请求先判断缓存中是否有数据,如果有,则直接取用。这样,就减去了对数据库的不断的操作。
  2. 现在问题是如何将数据存储到缓存?
    这里我们引入 redis 数据库(Nosql),这种数据库通常用来处理大量的数据的访问,常用于对内容的缓存。
  3. 若要使用这个数据库,我们首先要导入这个相关的类,并且启动这个服务,若不启动服务,则会报错。
  4. 然后是代码逻辑:我们在 Servlelt 中进行判定,调用商品分类 Servlelt 的请求进来之后首先判断缓存中是否有数据,如果没有,则正常执行查询操作,并且将数据放置到缓存中。那么,除去第一次请求,之后的请求都将使用缓存中的数据
    在这里插入图片描述
总结
  1. 商品分类的核心依旧是对数据库的查询,如何响应到前端,以及前端如何接受这些数据并且经过渲染呈现给用户的过程。

  2. 在这个例子中,我么查询完的数据在响应给客户端的时候做了如下处理:
    2.1 转换为 json 格式的字符串
    2.2 存储到缓存,以便于多次访问

  3. 前端接收数据,我们做了如下处理:
    2.1 使用 JQuery 接收数据,并作处理
    2.2 使用 JSTL 渲染数据呈现样式

  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. **测试**: - 编写单元测试和集成测试,确保各个功能正常工作。 - 进行用户验收测试,收集用户反馈。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值