【郑州校区】传智健康项目讲义第六章七

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

[AppleScript] 纯文本查看 复制代码

 public List<Setmeal> findAll(); 

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

[AppleScript] 纯文本查看 复制代码

public List<Setmeal> findAll() {
return setmealDao.findAll();
} 

3.2.4 Dao接口
在SetmealDao接口中扩展findAll方法

[AppleScript] 纯文本查看 复制代码

public List<Setmeal> findAll(); 

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

[AppleScript] 纯文本查看 复制代码

 <select id="findAll" resultType="com.itheima.pojo.Setmeal">
select * from t_setmeal
</select> 

4. 套餐详情页面动态展示
前面我们已经完成了体检套餐列表页面动态展示，点击其中任意一个套餐则跳转到对应的套餐详情页面（/pages/setmeal_detail.html），并且会携带此套餐的id作为参数提交。
请求路径格式：http://localhost/pages/setmeal_detail.html?id=10
在套餐详情页面需要展示当前套餐的信息（包括图片、套餐名称、套餐介绍、适用性别、适用年龄）、此套餐包含的检查组信息、检查组包含的检查项信息等。
4.1 完善页面
4.1.1 获取请求参数中套餐id
在页面中已经引入了healthmobile.js文件，此文件中已经封装了getUrlParam方法可以根据URL请求路径中的参数名获取对应的值

[AppleScript] 纯文本查看 复制代码

function getUrlParam(paraName) {
var url = document.location.toString();
//alert(url);
var arrObj = url.split("?");
if (arrObj.length > 1) {
var arrPara = arrObj[1].split("&");
var arr;
for (var i = 0; i < arrPara.length; i++) {
arr = arrPara[i].split("=");
if (arr != null && arr[0] == paraName) {
return arr[1];
}
}
return "";
}
else {
return "";
}
} 

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

[AppleScript] 纯文本查看 复制代码

<script>
var id = getUrlParam("id");
</script> 

4.1.2 获取套餐详细信息

[AppleScript] 纯文本查看 复制代码

<script>
var vue = new Vue({
el:'#app',
data:{
imgUrl:null,//套餐对应的图片链接
setmeal:{}
},
mounted(){
axios.post("/setmeal/findById.do?id=" + id).then((response)
=> {
if(response.data.flag){
this.setmeal = response.data.data;

【郑州校区】传智健康项目讲义第六章七

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

[AppleScript] 纯文本查看 复制代码

 public List<Setmeal> findAll(); 

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

[AppleScript] 纯文本查看 复制代码

public List<Setmeal> findAll() {
return setmealDao.findAll();
} 

3.2.4 Dao接口
在SetmealDao接口中扩展findAll方法

[AppleScript] 纯文本查看 复制代码

public List<Setmeal> findAll(); 

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

[AppleScript] 纯文本查看 复制代码

 <select id="findAll" resultType="com.itheima.pojo.Setmeal">
select * from t_setmeal
</select> 

4. 套餐详情页面动态展示
前面我们已经完成了体检套餐列表页面动态展示，点击其中任意一个套餐则跳转到对应的套餐详情页面（/pages/setmeal_detail.html），并且会携带此套餐的id作为参数提交。
请求路径格式：http://localhost/pages/setmeal_detail.html?id=10
在套餐详情页面需要展示当前套餐的信息（包括图片、套餐名称、套餐介绍、适用性别、适用年龄）、此套餐包含的检查组信息、检查组包含的检查项信息等。
4.1 完善页面
4.1.1 获取请求参数中套餐id
在页面中已经引入了healthmobile.js文件，此文件中已经封装了getUrlParam方法可以根据URL请求路径中的参数名获取对应的值

[AppleScript] 纯文本查看 复制代码

function getUrlParam(paraName) {
var url = document.location.toString();
//alert(url);
var arrObj = url.split("?");
if (arrObj.length > 1) {
var arrPara = arrObj[1].split("&");
var arr;
for (var i = 0; i < arrPara.length; i++) {
arr = arrPara[i].split("=");
if (arr != null && arr[0] == paraName) {
return arr[1];
}
}
return "";
}
else {
return "";
}
} 

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

[AppleScript] 纯文本查看 复制代码

<script>
var id = getUrlParam("id");
</script> 

4.1.2 获取套餐详细信息

[AppleScript] 纯文本查看 复制代码

<script>
var vue = new Vue({
el:'#app',
data:{
imgUrl:null,//套餐对应的图片链接
setmeal:{}
},
mounted(){
axios.post("/setmeal/findById.do?id=" + id).then((response)
=> {
if(response.data.flag){
this.setmeal = response.data.data;