本帖最后由 谷粒姐姐 于 2018-3-23 10:36 编辑
二、 宣传活动任务前台分页展示 1. 活动促销列表分页展示功能实现
1.1. 基于 BootStrap + AngularJS 实现自定义分页
1、 表格部分 2、 分页工具条部分 3、 使用 Angular 动态加载数据,显示动态数据表格 4、 基于 Angular 实现分页工具条功能 流程分析 : 1) 客户端发送给服务器 两个参数 : 当前页码, 每页记录条数 2) 服务器端 根据当前页码和每页记录条数 查询结果返回: 总记录数,当前页数据 3) 客户端将返回当前页数据显示到表格中,根据返回总记录和每页记录条数,计算总页数,根据总页数和当前页码,显示分页工具条 (百度 默认显示 10 个页码,当前页居中 ) 在工具条上,将静态数据换为动态数据,绑定点击事件 prev() 加载上一页数据显示 next() 加载下一页数据显示 selectPage(page) 加载指定页数据显示 isActivePage(page) 判断是否为当前显示页码 将显示所有页码,加入 pageList 集合对象,遍历显示出来 服务器返回数据格式 修改 6_1.json 分页工具条显示 10 个页码代码分析 1.2.实现速运快递前台系统活动促销列表分页数据查询 1、 修改 promotion.html 页面分页列表 page.js 中请求路径 2、 将 Promotion 实体类抽取出来 ,从 bos_management 分离 bos_domain 项目 将 bos_management 中 cn.itcast.domain 包所有类 复制 bos_domain 中 分别在 bos_fore 和 bos_management 中 引入 bos_domain 依赖 3、 在 bos_fore 项目新建 PromotionAction 提供 pageQuery 方法 4、 在 bos_management 项目 提供 WebService 服务,根据 page 和 rows 返回分页数据分页能否使用 spring data 自带 Page 对象,作为 WebService 传输数据对象 并不是一个完全 POJO 类,没有 setter 方法 在 bos_domain 中创建 PageBean 对象 在 Promotion 加入@XmlRootElement 在 PromotionService 提供 WebService 服务接口方法 实现 5、 在 bos_management 发布 WebService 配置 配置 web.xml 配置 applicationContext-webService.xml 错误:11:35:03,497 ERROR JAXRSInvoker:244 - No subresource locator found for path / 11:35:03,518 WARN WebApplicationExceptionMapper:73 - javax.ws.rs.NotFoundException: HTTP 404 Not Found 解决: 忘记写@GET 错误:Caused by: javax.xml.bind.JAXBException: class cn.itcast.bos.domain.take_delivery.Promotion 以及其任何超类对此上下文都是未知的。解决: 如果 WebService CXF 返回带有泛型的集合 ,解决需要在使用带有泛型的集合类型上面@XmlSeeAlso 注解 测试 : 1.3. 速运快递前台分页列表数据显示
1、 显示活动图片 问题: bos_management 可能和 bos_fore 不在同一台服务器上 ,将路径改为 以 http 开头路径 在 bos_domain 抽取常量类 修改 bos_domain 的 Promotion 实体类 2、 处理活动状态 1 显示 “进行中” , 2 显示 “已结束” 2. 宣传活动详情页面展示 2.1. 什么是静态页面化技术 在访问 新闻、活动、商品 详情页面时, 路径可以是 xx【id】.html, 服务器端根据请求 id, 动态生成 html 网页,下次访问数据时,无需再查询数据,直接将 html 静态页面返回 ================= 减 少 数 据 库 交 互 , 提 高 查 询 性 能 将动态数据访问,缓存为一个静态 html 页面,提高查询效率 2.2. Freemarker 技术使用入门 Struts2 默认使用 freemarker 实现 自定义标签模板,项目导入 struts2 就已经导入 freemarker jar 包 模板文件 + Java 数据对象 ===== 输出 (任何格式文本 ) Freemarker 模板文件,通常扩展名.ftl (使用.html .jsp 都可以 ) 1、 安装 freemarker eclipse 编辑插件 将 “freemarker_eclipseplugin” 复制 eclipse 的 dropins 文件夹 ,重启开发工具 2、 编辑 freemarker 的模板文件 通常模板文件 放在 WEB-INF 下 或者 classes 下 ${变量} , 需要在程序中指定变量,合并到模板文件 一同输出 3、 编写测试代码 2.3. 宣传活动详情显示 1、 修改 promotion.html 点击不同活动,在 url 上拼接不同 id 2、 修改 index.html 3、 在 PromotionAction 加入 showDetail 的方法 4、 在 bos_fore 的 WEB-INF 新建 freemarker_templates 目录, 新建 promotion_detail.ftl 5、 在 bos_management 修改 PromotionService 加入服务接口 实现 问题: 图片无法显示 解决: 将路径中 /bos_management 替换为 http
|