黑马程序员技术交流社区

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

---

作者: 我是楠楠    时间: 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