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

3. 套餐列表页面动态展示
移动端首页为/pages/index.html，效果如下：
点击体检预约直接跳转到体检套餐列表页面（/pages/setmeal.html）
3.1 完善页面
3.1.1 展示套餐信息

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

 <ul class="list">
<li class="list‐item" v‐for="setmeal in setmealList">
<a class="link‐page" :href="'setmeal_detail.html?id='+setmeal.id">
<img class="img‐object f‐left"
:src="'http://pqjroc654.bkt.clouddn.com/'+setmeal.img" alt="">
<div class="item‐body">
<h4 class="ellipsis item‐title">{{setmeal.name}}</h4>
<p class="ellipsis‐more item‐desc">{{setmeal.remark}}</p>
<p class="item‐keywords">
<span>{{setmeal.sex == '0' ? '性别不限' : setmeal.sex == '1' ?
'男':'女'}}</span>
<span>{{setmeal.age}}</span>
</p>
</div>
</a>
</li>
</ul> 

3.1.2 获取套餐列表数据

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

var vue = new Vue({
el:'#app',
data:{
setmealList:[]
},
mounted (){
//发送ajax请求，获取所有的套餐数据，赋值给setmealList模型数据，用于页面
展示
axios.get("/setmeal/getAllSetmeal.do").then((res) => {
if(res.data.flag){
//查询成功，给模型数据赋值
this.setmealList = res.data.data;
}else{
//查询失败，弹出提示信息
this.$message.error(res.data.message);
}
});
}
}); 

3.2 后台代码
3.2.1 Controller
在health_mobile工程中创建SetmealController并提供getSetmeal方法，在此方法中通过Dubbo远程调用套餐服务获取套餐列表数据

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

package com.itheima.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.itheima.constant.MessageConstant;
import com.itheima.entity.Result;
import com.itheima.pojo.Setmeal;
import com.itheima.service.SetmealService;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/setmeal")
public class SetmealController {
@Reference//(check = false)
private SetmealService setmealService;
//获取所有套餐信息
@RequestMapping("/getSetmeal")
public Result getSetmeal(){
try{
List<Setmeal> list = setmealService.findAll();
return new Result(true,
MessageConstant.GET_SETMEAL_LIST_SUCCESS,list);
}catch (Exception e){
e.printStackTrace();
return new
Result(true,MessageConstant.GET_SETMEAL_LIST_FAIL);
}
}
} 

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

3. 套餐列表页面动态展示
移动端首页为/pages/index.html，效果如下：
点击体检预约直接跳转到体检套餐列表页面（/pages/setmeal.html）
3.1 完善页面
3.1.1 展示套餐信息

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

 <ul class="list">
<li class="list‐item" v‐for="setmeal in setmealList">
<a class="link‐page" :href="'setmeal_detail.html?id='+setmeal.id">
<img class="img‐object f‐left"
:src="'http://pqjroc654.bkt.clouddn.com/'+setmeal.img" alt="">
<div class="item‐body">
<h4 class="ellipsis item‐title">{{setmeal.name}}</h4>
<p class="ellipsis‐more item‐desc">{{setmeal.remark}}</p>
<p class="item‐keywords">
<span>{{setmeal.sex == '0' ? '性别不限' : setmeal.sex == '1' ?
'男':'女'}}</span>
<span>{{setmeal.age}}</span>
</p>
</div>
</a>
</li>
</ul> 

3.1.2 获取套餐列表数据

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

var vue = new Vue({
el:'#app',
data:{
setmealList:[]
},
mounted (){
//发送ajax请求，获取所有的套餐数据，赋值给setmealList模型数据，用于页面
展示
axios.get("/setmeal/getAllSetmeal.do").then((res) => {
if(res.data.flag){
//查询成功，给模型数据赋值
this.setmealList = res.data.data;
}else{
//查询失败，弹出提示信息
this.$message.error(res.data.message);
}
});
}
}); 

3.2 后台代码
3.2.1 Controller
在health_mobile工程中创建SetmealController并提供getSetmeal方法，在此方法中通过Dubbo远程调用套餐服务获取套餐列表数据

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

package com.itheima.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.itheima.constant.MessageConstant;
import com.itheima.entity.Result;
import com.itheima.pojo.Setmeal;
import com.itheima.service.SetmealService;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/setmeal")
public class SetmealController {
@Reference//(check = false)
private SetmealService setmealService;
//获取所有套餐信息
@RequestMapping("/getSetmeal")
public Result getSetmeal(){
try{
List<Setmeal> list = setmealService.findAll();
return new Result(true,
MessageConstant.GET_SETMEAL_LIST_SUCCESS,list);
}catch (Exception e){
e.printStackTrace();
return new
Result(true,MessageConstant.GET_SETMEAL_LIST_FAIL);
}
}
}