黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第六章六 [打印本页]

作者: 我是楠楠    时间: 2019-11-7 10:33
标题: 【郑州校区】传智健康项目讲义第六章六
【郑州校区】传智健康项目讲义第六章六

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);
}
}
}







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2