套餐列表页面动态展示

移动端首页为/pages/index.html，效果如下：

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

完善页面#

展示套餐信息#

<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>

获取套餐列表数据#

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

后台代码#

Controller#

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

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

服务接口#

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

public List<Setmeal> findAll();

服务实现类#

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

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

Dao接口#

在SetmealDao接口中扩展findAll方法

public List<Setmeal> findAll();

Mapper映射文件#

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

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