移动端开发套餐列表套餐详情页面静态化狒狒大锅盖

280 568

掌握移动端套餐列表页动态展示实现过程

掌握移动端套餐详情页

掌握Freemarker页面静态化技术

能够使用Freemarker生成html静态页面

能够搭建移动端开发环境

开发需求

环境搭建

预约流程如下：

1、访问移动端首页

2、点击体检预约进入体检套餐列表页面

3、在体检套餐列表页面点击具体套餐进入套餐详情页面

4、在套餐详情页面点击立即预约进入预约页面

效果如下图：

体检预约-->套餐列表-->套餐详情-->立即预约（发送手机验证码+Redis）

移动端工程搭建

创建healthmobile_web工程,导入坐标(依赖health_interface)

导入页面

配置web.xml（springmvc的核心控制器+post请求乱码过滤器）

创建springmvc.xml(配置dubbo,驱动注解)

导入通用组件

在health_parent工程的pom.xml文件中导入阿里短信发送的maven坐标

com.aliyunaliyun-java-sdk-core3.3.1com.aliyunaliyun-java-sdk-dysmsapi1.0.0在health_common工程中添加引入的依赖

com.aliyunaliyun-java-sdk-corecom.aliyunaliyun-java-sdk-dysmsapi1.2.2.healthmobile_web【路径】

1：pom.xml

2：静态资源（CSS、html、img等）

3：web.xml

4：springmvc.xml

5：spring-jedis.xml

6：redis.properties

7：log4j.properties

1：ValidateCodeUtils工具类：（产生验证码）

2：SMSUtils工具类：（短信服务，用于发送短消息服务（SMS））

3：RedisMessageConstant常量类：

【讲解】

在health_common工程中导入如下通用组件

packagecom.itheima.health.utils;importjava.util.Random;/***随机生成验证码工具类*/publicclassValidateCodeUtils{/***随机生成验证码*@paramlength长度为4位或者6位*@return*/publicstaticIntegergenerateValidateCode(intlength){Integercode=null;if(length4){code=newRandom().nextInt(9999);//生成随机数，最大为9999if(code<1000){code=code+1000;//保证随机数为4位数字}}elseif(length6){code=newRandom().nextInt(999999);//生成随机数，最大为999999if(code<100000){code=code+100000;//保证随机数为6位数字}}else{thrownewRuntimeException("只能生成4位或6位数字验证码");}returncode;}/***随机生成指定长度字符串验证码*@paramlength长度*@return*/publicstaticStringgenerateValidateCode4String(intlength){Randomrdm=newRandom();Stringhash1=Integer.toHexString(rdm.nextInt());Stringcapstr=hash1.substring(0,length);returncapstr;}}

-->创建工程-->导入坐标-->页面-->配置文件（web.xml、springmvc.xml、spring-jedis.xml）

-->导入通用组件（生成验证码、发送短信工具类、Redis存储常量类）

实现套餐列表功能

点击“体检预约”，跳转到“套餐列表”页面

1：前台代码编写

在/pages/setmeal.html,在mounted()钩子函数里面

完成需求：1.使用axios请求服务器,获得数据进行模型绑定2.数据遍历(v-for)2：后台代码编写

1.创建类SetmealMobileController.java

2.创建类SetmealService.java

3.创建类SetmealServiceImpl.java

4.创建类SetmealDao.java

5.创建配置文件SetmealDao.xml

完成需求：1：查询所有的套餐【讲解-需求】移动端首页为/pages/index.html，效果如下：

（1）在web.xml中配置：

（3）点击体检预约直接跳转到体检套餐列表页面（/pages/setmeal.html）

（1）setmeal.html，遍历v-for="setmealinsetmealList"

mounted钩子和created钩子

mounted钩子：页面被初始化后执行

created钩子：vue模型被初始化后执行

mounted钩子是在created钩子后面执行的。

在healthmobile_web工程中创建SetmealMobileController并提供getSetmeal方法，在此方法中通过Dubbo远程调用套餐服务获取套餐列表数据

packagecom.itheima.health.controller;importcom.alibaba.dubbo.config.annotation.Reference;importcom.itheima.health.constant.MessageConstant;importcom.itheima.health.entity.Result;importcom.itheima.health.pojo.Setmeal;importcom.itheima.health.service.SetmealService;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;importjava.util.List;@RestController@RequestMapping("/setmeal")publicclassSetmealMobileController{@Reference//(check=false)privateSetmealServicesetmealService;//获取所有套餐信息@RequestMapping("/getSetmeal")publicResultgetSetmeal(){try{Listlist=setmealService.findAll();returnnewResult(true,MessageConstant.GET_SETMEAL_LIST_SUCCESS,list);}catch(Exceptione){e.printStackTrace();returnnewResult(false,MessageConstant.GET_SETMEAL_LIST_FAIL);}}}

在SetmealService服务接口中扩展findAll方法

ListfindAll();

在SetmealServiceImpl服务实现类中实现findAll方法

publicListfindAll(){returnsetmealDao.findAll();}

在SetmealDao接口中扩展findAll方法

在SetmealDao.xml映射文件中扩展SQL语句

select*fromt_setmeal查看效果

套餐列表功能需要展示发布的所有套餐，用于体检人选择指定套餐。

套餐详情页面动态展示

在套餐详情页面需要展示当前套餐的信息（包括图片、套餐名称、套餐介绍、适用性别、适用年龄）、此套餐包含的检查组信息、检查组包含的检查项信息等。

前台代码编写

在/pages/setmeal_detail.html

完成需求：1.获取请求参数中套餐id的值2.获取套餐详细信息3.展示套餐信息（套餐信息、检查组集合、检查项集合）后台代码编写

1.类SetmealMobileController.java

2.类SetmealService.java

3.类SetmealServiceImpl.java

4.类SetmealDao.java

类CheckGroupDao

类CheckItemDao

5.配置文件SetmealDao.xml

配置文件CheckGroupDao.xml

配置文件CheckItemDao.xml

完成需求：1：根据套餐id查询对应的套餐信息2：查询每个套餐对应的检查组集合3：查询每个检查组对应的检查项集合【讲解-需求】前面我们已经完成了体检套餐列表页面动态展示，点击其中任意一个套餐则跳转到对应的套餐详情页面（/pages/setmeal_detail.html），并且会携带此套餐的id作为参数提交。

（1）在页面中已经引入了healthmobile.js文件，此文件中已经封装了getUrlParam方法可以根据URL请求路径中的参数名获取对应的值

（2）在setmeal_detail.html中调用上面定义的方法获取套餐id的值

1：{{setmeal.name}}：套餐信息

2：v-for="checkgroupinsetmeal.checkGroups：检查组信息

3：v-for="checkitemincheckgroup.checkItems"：检查项信息

在SetmealMobileController中提供findById方法

//根据id查询套餐信息@RequestMapping("/findById")publicResultfindById(intid){try{Setmealsetmeal=setmealService.findById(id);returnnewResult(true,MessageConstant.QUERY_SETMEAL_SUCCESS,setmeal);}catch(Exceptione){e.printStackTrace();returnnewResult(false,MessageConstant.QUERY_SETMEAL_FAIL);}}

在SetmealService服务接口中提供findById方法

SetmealfindById(intid);3.2.3.服务实现类在SetmealServiceImpl服务实现类中实现findById方法

publicSetmealfindById(intid){returnsetmealDao.findById(id);}

1：在SetmealDao接口中提供findById方法

SetmealfindById(intid);2：在CheckGroupDao接口中提供findCheckGroupListById方法

ListfindCheckGroupListById(Integerid);3：在CheckItemDao接口中提供findCheckItemListById方法

ListfindCheckItemListById(Integerid);

此处会使用mybatis提供的关联查询，在根据id查询套餐时，同时将此套餐包含的检查组都查询出来，并且将检查组包含的检查项都查询出来。

1：SetmealDao.xml文件：

select*fromt_setmealwhereid=#{id}2：CheckGroupDao.xml文件：

select*fromt_checkgroupwhereidin(selectcheckgroup_idfromt_setmeal_checkgroupwheresetmeal_id=#{id})

或者使用联合查询的sql语句

SELECTc.*FROMt_checkgroupc,t_setmeal_checkgroupscWHEREc.id=sc.checkgroup_idANDsc.setmeal_id=#{id}3：CheckItemDao.xml文件：

select*fromt_checkitemwhereidin(selectcheckitem_idfromt_checkgroup_checkitemwherecheckgroup_id=#{id})或者使用联合查询的sql语句

SELECTci.*FROMt_checkitemci,t_checkgroup_checkitemcgciWHEREci.id=cgci.checkitem_idANDcheckgroup_id=#{id}测试效果：

1：掌握sql语句的联合查询（sql语句的嵌套查询），应用在多对多场景2：掌握使用完成映射3：掌握使用完成集合的封装（完成对象的封装）拓展：不使用刚才使用的和。

也可以使用Java代码编写业务封装逻辑操作

1：SetMealDao.java

SetmealfindById(Integerid);2：CheckGroupDao.java

ListfindCheckGroupListBySetmealId(IntegersetmealId);3：CheckItemDao.java

ListfindCheckItemListByCheckGroupId(IntegercheckGroupId);使用java代码的方式进行判断

第一步：在SetmealServiceImpl.java中

@AutowiredCheckGroupDaocheckGroupDao;@AutowiredCheckItemDaocheckItemDao;@OverridepublicSetmealfindById(Integerid){Setmealsetmeal=setmealDao.findById(id);ListcheckGroupList=checkGroupDao.findCheckGroupListBySetmealId(setmeal.getId());//遍历checkGroupListfor(CheckGroupcheckgroup:checkGroupList){ListcheckItemList=checkItemDao.findCheckItemListByCheckGroupId(checkgroup.getId());checkgroup.setCheckItems(checkItemList);}setmeal.setCheckGroups(checkGroupList);returnsetmeal;}第二步：

CheckGroupDao.xml

SELECT*FROMt_checkgroupWHEREidIN(SELECTcheckgroup_idFROMt_setmeal_checkgroupWHEREsetmeal_id=#{setmealId})第三步：

CheckItemDao.xml

SELECT*FROMt_checkitemWHEREidIN(SELECTcheckitem_idFROMt_checkgroup_checkitemWHEREcheckgroup_id=#{checkGroupId})4.Freemarker页面静态化技术【目标】1：什么是页面静态化技术（作用：用于减少查询数据库的频率）

2：什么是Freemarker

3：Freemarker的操作入门

1：什么是页面静态化技术（作用：用于减少查询数据库的频率）

2：什么是Freemarker（作用：可生成html静态资源文件，从而达到减少查询数据库的频率）

3：Freemarker入门案例

（1）搭建环境

（2）创建模板文件

（3）使用模板文件，生成静态文件

（1）assign指令

（2）include指令

（3）if指令

（4）list指令

本章课程中我们已经实现了移动端套餐列表页面和套餐详情页面的动态展示。但是我们需要思考一个问题，就是对于这两个页面来说，每次用户访问这两个页面都需要查询数据库获取动态数据进行展示，而且这两个页面的访问量是比较大的，这就对数据库造成了很大的访问压力，并且数据库中的数据变化频率并不高。那我们需要通过什么方法为数据库减压并提高系统运行性能呢？答案就是页面静态化。

页面静态化其实就是将原来的动态网页(例如通过ajax请求动态获取数据库中的数据并展示的网页)改为通过静态化技术生成的静态网页，这样用户在访问网页时，服务器直接给用户响应静态html页面，没有了动态查询数据库的过程。

那么这些静态HTML页面还需要我们自己去编写吗？其实并不需要，我们可以通过专门的页面静态化技术帮我们生成所需的静态HTML页面，例如：Freemarker、thymeleaf等。

FreeMarker是一个用Java语言编写的模板引擎，它基于模板来生成文本输出。FreeMarker与Web容器无关，即在Web运行时，它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术，而且还可以用于生成XML，JSP或Java等。

创建maven工程并导入Freemarker的maven坐标

org.freemarkerfreemarker2.3.234.3.2.创建模板文件模板文件中有四种元素：

1、文本，直接输出的部分2、注释，即<#--...-->格式不会输出3、插值（Interpolation）：即${..}部分,将使用数据模型中的部分替代输出4、FTL指令：FreeMarker指令，和HTML标记类似，名字前加#予以区分，不会输出

Freemarker的模板文件后缀可以任意，一般建议为ftl。

在D盘创建ftl目录，在ftl目录中创建名称为test.ftl的模板文件，内容如下：

Freemarker入门<#--我只是一个注释，我不会有任何输出-->${name}你好，${message}4.3.3.生成文件使用步骤：

第一步：创建一个Configuration对象，直接new一个对象。构造方法的参数就是freemarker的版本号。

第二步：设置模板文件所在的路径。

第三步：设置模板文件使用的字符集。一般就是utf-8。

第四步：加载一个模板，创建一个模板对象。

第五步：创建一个模板使用的数据集，可以是pojo也可以是map。一般是Map。

第六步：创建一个Writer对象，一般创建FileWriter对象，指定生成的文件名。

第七步：调用模板对象的process方法输出文件。

第八步：关闭流。

publicstaticvoidmain(String[]args)throwsException{//1.创建配置类Configurationconfiguration=newConfiguration(Configuration.getVersion());//2.设置模板所在的目录configuration.setDirectoryForTemplateLoading(newFile("D:\\ftl"));//3.设置字符集configuration.setDefaultEncoding("utf-8");//4.加载模板Templatetemplate=configuration.getTemplate("test.ftl");//5.创建数据模型Mapmap=newHashMap();map.put("name","张三");map.put("message","欢迎来到传智播客！");//6.创建Writer对象Writerout=newFileWriter(newFile("d:\\test.html"));//7.输出template.process(map,out);//8.关闭Writer对象out.close();}上面的入门案例中Configuration配置对象是自己创建的，字符集和模板文件所在目录也是在Java代码中指定的。在项目中应用时可以将Configuration对象的创建交由Spring框架来完成，并通过依赖注入方式将字符集和模板所在目录注入进去。

assign指令用于在页面上定义一个变量

（1）定义简单类型

<#assignlinkman="周先生">联系人：${linkman}（2）定义对象类型

（1）创建模板文件head.ftl

黑马程序员

（2）修改入门案例中的test.ftl，在test.ftl模板文件中使用include指令引入上面的模板文件

<#include"head.ftl"/>4.4.3.if指令if指令用于判断

（1）在模板文件中使用if指令进行判断

<#ifsuccess=true>你已通过实名认证<#else>你未通过实名认证（2）在java代码中为success变量赋值

map.put("success",true);在freemarker的判断中，可以使用=也可以使用

if指令可以配合assignsuccess=true使用

<#assignsuccess1=true><#ifsuccess1=true>你已通过实名认证1<#else>你未通过实名认证1

list指令用于遍历

（1）在模板文件中使用list指令进行遍历

<#listgoodsListasgoods>商品名称：${goods.name}价格：${goods.price}
（2）在java代码中为goodsList赋值

ListgoodsList=newArrayList();Mapgoods1=newHashMap();goods1.put("name","苹果");goods1.put("price",5.8);Mapgoods2=newHashMap();goods2.put("name","香蕉");goods2.put("price",2.5);Mapgoods3=newHashMap();goods3.put("name","橘子");goods3.put("price",3.2);goodsList.add(goods1);goodsList.add(goods2);goodsList.add(goods3);map.put("goodsList",goodsList);【小结】1：什么是页面静态化技术（作用：用于减少查询数据库的频率）

（3）if指令（常用）

（4）list指令（常用）

前面我们已经学习了Freemarker的基本使用方法，下面我们就可以将Freemarker应用到项目中，帮我们生成移动端套餐列表静态页面和套餐详情静态页面。接下来我们需要思考几个问题：

（1）什么时候生成静态页面比较合适呢？

（2）将静态页面生成到什么位置呢？

（3）应该生成几个静态页面呢？

对于第一个问题，应该是当套餐数据发生改变时，需要生成静态页面，即我们通过后台系统修改套餐数据（包括新增、删除、编辑）时。

对于第二个问题，如果是在开发阶段可以将文件生成到项目工程中，如果上线后可以将文件生成到移动端系统运行的tomcat中。

对于第三个问题，套餐列表只需要一个页面就可以了，在这个页面中展示所有的套餐列表数据即可。套餐详情页面需要有多个，即一个套餐应该对应一个静态页面。

1：在传智健康前端系统中使用页面静态化Freemarker技术

2：套餐列表使用Freemarker

3：套餐详情使用Freemarker

1：环境搭建

2：创建模板文件

（1）mobile_setmeal.ftl

（2）mobile_setmeal_detail.ftl

3：spring整合Freemarker

（1）freemarker.properties

（2）applicationContext-freemarker.xml

4：生成静态页面

生成静态页面的时机，在新增套餐的时候生成静态页面（套餐列表及套餐详情）

在health_parent工程的pom文件中导入Freemarker的maven坐标

2.3.23org.freemarkerfreemarker${freemarker}在health_common工程的pom文件中导入Freemarker的maven坐标

org.freemarkerfreemarker5.2.创建模板文件在health_service工程的WEB-INF目录中创建ftl目录，在ftl目录中创建模板文件mobile_setmeal.ftl和mobile_setmeal_detail.ftl文件，前者是用于生成套餐列表页面的模板文件，后者是生成套餐详情页面的模板文件

注意2：改变七牛云的地址。

注意3：上面模板文件中每个套餐对应的超链接如下：

如果套餐的id为1，则对应的超链接地址为setmeal_detail_1.html；

如果套餐的id为5，则对应的超链接地址为setmeal_detail_5.html。

所以我们需要为每个套餐生成一个套餐详情静态页面。

（1）在health_service工程中创建属性文件freemarker.properties

out_put_path=D:/ideaProjects/health_parent/health_mobile/src/main/webapp/pages通过上面的配置可以指定将静态HTML页面生成的目录位置

（2）在health_service工程的Spring配置文件中配置，创建applicationContext-freemarker.xml

THE END

本地

杭州试药招聘依折麦布瑞舒伐他汀钙片（口服降脂降胆固醇）试药员，24天补贴7500元

上海市美年大健康松江分院预约地址电话营业时间

Java EE企业级应用开发项目教程（SSM）

北京Java培训班好口碑Java培训机构高级Java工程师培训

移动端开发套餐列表套餐详情页面静态化狒狒大锅盖

1....体检预约页面调整(展示预约的套餐信息)[149] 16-生成移动端静态页面(套餐详情... 729播放 07:04 [150] 17-Freemarker小结 1507播放 05:56 [151] 02-体检预约流程说明 817播放 01:48 [152] 03-体检预约_页面调整(展示预约... 603播放 待播放 [153] 04-体检预约_页面调整(手机号输... 775播放 08:30 [154] 05-体检预约_页面调整...https://open.163.com/newview/movie/free?pid=JGA3FB5JG&mid=WGA3GAG28
2.基于SSM的传智降系统功能演示(SSM+Dubbo+SpringSecurity+...原理:服务器启动后,首先会形成一个m_setmeal.html的静态页面,之后当用户点击对应的套餐时,当时第一次访问时,服务器为用户形成该详情页面的静态页面,之后该静态页面如果不进行增删改查,那么静态页面将保持不变. 3.2体检预约 这一部分使用到了短信验证码发送功能,本应该使用阿里云的短信发送,但是由于需要备案的网站,网...https://developer.aliyun.com/article/1108987
3.传智降项目资源01需求prd.pdf传智健康项目资源01需求prd.pdf,目录 一、 简介 4 1. 目的 4 2. 范围 4 二、 用户角色描述 4 三、 产品概述 4 1. 产品介绍 4 2. 总体流程 5 3. 功能摘要 6 四、 功能详情 7 1. 会员管理 7 1.1 产品结构图 7 1.2 特性描述 7 1.3 功能操作 8 2. 预约管理 9 2.1 预约管理流程图https://max.book118.com/html/2021/0910/8025047045004002.shtm
4.Java实战项目《传智降》D807体检预约页面调整日历展示传智健康管理系统是一款应用于健康管理机构的业务系统,实现健康管理机构工作内容可视化、患者管理专业化、健康评估数字化、 健康干预流程化、知识库集成化,从而提高健康管理师的工作效率, 加强与患者间的互动,增强管理者对健康管理机构运营情况的了解。https://www.56.com/u23/v_MTg2OTQ4ODg0.html
1.新安珍爱父母降体检卡双11特惠来袭,快来抢购,羊毛薅不停!11月11日两款套餐正式开售 · 记得把健康带回家 ·? …… 咨询电话:82763666 珍爱父母孝心体检卡—经典套餐详情 珍爱父母健康体检卡—尊享套餐详情 购买方式 扫描套餐详情图内“购买二维码”或下方二维码均可购买。 使用时间 ...https://www.sian.cc/News/1311.html
2.杭州青年体检套餐有哪些?杭州青年体检医疗机构盘点及预约流程包括妇科B超、肝功能、血常规、一般项目、肝胆脾胰肾、眼科、心电图(多导联)、内科、空腹血糖、C13呼气试验、尿常规、甲状腺B超、粪常规、血肿瘤标志物、外科、胸部低剂量CT检查、肾功能、前列腺、血脂、耳鼻咽喉科 20、健康体检套餐A(女已婚)(共20项) ...https://www.xiaoyiduoduo.com/news/96032.html
3.黑马传智降项目设置体检预约最大数量05黑马传智降预约设置【黑马传智健康项目】功能需求和源码 【黑马传智健康项目】预约管理-检查组管理 【黑马传智健康项目】预约管理-套餐管理 1. 需求分析 前面我们已经完成了检查项管理、检查组管理、套餐管理等。接下来我们需要进行预约设置,其实就是设置每一天的体检预约最大数量。客户可以通过微信端在线预约,在线预约时需要选择体检的时间...https://blog.csdn.net/itcast_cn/article/details/129820350
4.通海县中医医院体检套餐体检多少钱体检预约电话名医馆内设:“云南省专家基层科研工作站叶建洲专家工作站”、“阚佑骞基层名老中医药专家传承工作室”、“文传智基层名老中医药专家传承工作室”、“中医特色专家诊室”。 通海县中医医院“健康管理中心”成立于2020年12月,集体检及健康干预为一体!分为体检科及治未病科。目前拥有医师2名,护士3名,康复技师2名...https://m.kktijian.com/jg_detail_9023.html
5.黑马程序员传智降项目(第八章)51CTO博客黑马程序员-传智健康项目(第八章),第8章移动端开发-体检预约1.体检预约流程用户可以通过如下操作流程进行体检预约:1、在移动端首页点击体检预约,页面跳转到套餐列表页面2、在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面3、在套餐详情页面点击立即预约,页面https://blog.51cto.com/15127637/4172610
6.传智研究院项目库重磅发布!真项目,真体验!首页/Java/传智健康 了解项目特色 项目课程 核心业务功能 集健康管理、健康风险评估、疾病预防、体检服务为一体的综合性健康管理系统 CORE FUNCTION 用户端 管理端 体检预约 报告查询 体检预约 微信端体检预约,简单方便预约套餐,减少等候时间 项目课程 业务架构 ...https://pip.itcast.cn/java-czjk