模拟京东 10.docx
- 文档编号:25227724
- 上传时间:2023-06-06
- 格式:DOCX
- 页数:15
- 大小:486.58KB
模拟京东 10.docx
《模拟京东 10.docx》由会员分享,可在线阅读,更多相关《模拟京东 10.docx(15页珍藏版)》请在冰豆网上搜索。
模拟京东10
模拟京东(九)
课程计划:
1、后台广告tab页面搭建
2、左侧广告位树形加载
3、大广告列表查询
4、大广告添加
5、前台系统大广告轮播
6、大广告优化
1后台广告tab页面搭建
1.1添加jsp页面
1.2修改top.jsp
在top.jsp中添加广告的tab页。
1.3跳转到ad_main.jsp页面
1.3.1修改jsp页面的请求路径
1.3.2编写controller
1.4跳转到ad_left页面
1.4.1修改jsp页面的请求路径
1.4.2编写controller
2左侧广告位树形加载
2.1Treeview插件
jQueryTreeview提供了一个无序灵活的可折叠的树形菜单,它是jquery的一款插件。
2.2页面初始加载左侧tree
2.2.1分析
1、编辑“广告”tab页,加载树形广告位,而且加载的是的最顶级的元素;
2、根据数据库分析,最顶级元素(节点)就是parentId为0的元素,即在这里就是:
新巴巴商城;
3、点击新巴巴商城时,又根据该id查询该父节点下的子节点。
4、如何判断是否是最顶级元素?
由于我们这里用的的是jquery的树形插件TreeView,在执行jquery的treeview方法是,url后默认有一个形参为:
root=“source”。
2.2.2页面初始化js
2.2.3编写service接口、实现类
service接口:
实现类:
2.2.4编写controller
2.2.5配置dubbo服务
略。
2.2.6数据展示
3大广告列表查询
3.1分析
1、当点击节点时,如果该节点是一个父节点,那么则加载该节点下的子节点;
2、当点击节点时,如果该节点不是一个父节点,那么则加载广告位下所有的广告。
3.2在ad中添加属性
3.3编写service接口、实现类
service接口:
实现类:
3.4编写Controller
3.5jsp页面回显
4大广告添加
4.1去添加页
4.1.1分析
添加广告时,需要指定高广告属于哪个广告位下的,因此在添加时,我们需要带上positionId,用于在广告保存。
4.1.2更新list方法
4.1.3修改jsp页面的请求路径
4.1.4编写Controller
4.2大广告添加
4.2.1修改jsp页面的请求路径
4.2.2编写service接口、实现类
service接口:
实现类:
4.2.3编写Controller
4.2.4列表优化
1、图片显示---略
2、id倒序----略
5前台系统大广告轮播
5.1分析
1、页面需要什么格式的数据
2、数据格式:
[{key:
value,…},{key:
value,…},{key:
value,…}……]
3、通过数据格式分析,我们需要将List转成json串在页面进行解析。
4、既然将List转成json串在页面进行解析,根据商品添加模块中多附件上传的经验,我们可以通过@ResponseBody注解实现。
5.2@ResponseBody实现原理
5.2.1分析
1、在将springmvc框架时,我们知道springmvc支持json,而且依赖的jar包是jacksonjar包,所有springmvc的对象与json之间的转换其实是通过该jar中的ObjectMapper对象实现。
2、ObjectMapper可以去空操作。
3、显示图片的属性为:
src,而Ad对象中是picture;显示图片的链接的是href属性,而ad对象中是url属性。
因此这里可以通过@JsonProperty注解指定。
5.2.2ObjectMapper对象使用
5.3更改Ad对象
5.4编写JsonUtils工具类
作用:
将通过ObjectMapper将对象转成json串。
5.5编写service接口、实现类
编写service接口:
实现类:
5.6更新Controller的index方法
5.7在portal中配置dubbo服务
6大广告位优化
优化:
添加缓存。
将json保存到redis中。
6.1修改adService接口、实现类
service接口:
实现类:
6.2更新Controller方法
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 模拟京东 10 模拟