尚筹网14首页显示项目数据、详情

首页显示项目数据

目标

在首页上加载真实保存到数据库的项目数据,按分类显示.

思路

操作步骤

1、创建实体类

　　a) PortalTypeVO

　　b) portalProjectVO

2、Mysql-provider微服务暴露数据查询接口

　　a) ProjectPOMapper.xml中编写查询数据的SQL语句

　　b) 在ProjectPOMapper接口中声明查询数据的方法

　　c) 在ProjectService中调用Mapper方法拿到数据

　　d) 在ProjectHandler中调用Service方法拿到数据

3、api工程声明Feign的接口

4、在authentication-consumer中调用mysql-provider暴露的接口拿到数据存入模型

5、在portal.html中显示模型中的数据

代码1:创建实体类

public class PortalTypeVO {
    private  Integer id;
    private String name;
    private String remark;
    private List<PortalProjectVO> portalProjectVOList;

    public PortalTypeVO() {
    }

    public PortalTypeVO(Integer id, String name, String remark, List<PortalProjectVO> portalProjectVOList) {
        this.id = id;
        this.name = name;
        this.remark = remark;
        this.portalProjectVOList = portalProjectVOList;
    }

public class PortalProjectVO {
    private Integer projectId;
    private String projectName;
    private String headPicturePath;
    private Integer money;
    private String deployDate;
    private Integer percentage;
    private Integer supporter;

    public PortalProjectVO() {
    }

    public PortalProjectVO(Integer projectId, String projectName, String headPicturePath, Integer money, String deployDate, Integer percentage, Integer supporter) {
        this.projectId = projectId;
        this.projectName = projectName;
        this.headPicturePath = headPicturePath;
        this.money = money;
        this.deployDate = deployDate;
        this.percentage = percentage;
        this.supporter = supporter;
    }

代码2:sql 

<resultMap id="loadPortalProjectList" type="com.example.entity.vo.PortalTypeVO">
        <id column="id" property="id"/>
        <result column="name" property="name"/>
        <result column="remark" property="remark"/>
        <!--分类数据包含的项目数据的List-->
        <!--property属性：对应portalProjectVO中的项目数据List属性-->
        <!--colume:查询项目需要用到分类id，就是通过colume属性把值传入-->
        <!--ofType：项目数据的实体类型 -->
        <collection property="portalProjectVOList"
                    column="id"
                    ofType="com.example.entity.vo.PortalProjectVO"
                    select="com.example.mapper.ProjectPOMapper.selectPortalProjectVOList">
        </collection>
  </resultMap>
  <select id="selectPortalProjectVOList" resultType="com.example.entity.vo.PortalProjectVO">
    SELECT
  t_project.id projectId,
  project_name projectName,
  money,
  deploydate deployDate,
  supportmoney/money*100 percentage,
  supporter supporter,
  header_picture_path headPicturePath
FROM
  t_project
  LEFT JOIN t_project_type
    ON t_project.id = t_project_type.`projectid`
WHERE t_project_type.`typeid` = #{id}
ORDER BY t_project.id DESC
LIMIT 0, 4
  </select>

代码3:暴露mysql-provider中的接口

servicce方法

List<PortalTypeVO> getPortalTypeVO();

@Override
public List<PortalTypeVO> getPortalTypeVO() {
    return projectPOMapper.selectPortalTypeVOList();
}

controller方法

// 查询t_type分类，进行距最新四个遍历
@RequestMapping("get/portal/type/project/data/remote")
public ResultEntity<List<PortalTypeVO>> getPortalTypeProjectDataRemote() {
    try {
        List<PortalTypeVO> portalTypeVOList = projectService.getPortalTypeVO();
        return ResultEntity.sucessWithData(portalTypeVOList);
    } catch (Exception e) {
        e.printStackTrace();
        return ResultEntity.failed(e.getMessage());
    }
}

创建Feign接口

@RequestMapping("get/portal/type/project/data/remote")
ResultEntity<List<PortalTypeVO>> getPortalTypeProjectDataRemote();

代码4:调用mysql-provider接口

@RequestMapping("/")
public String showPortalPage(Model model) {
    //1、调用mysqlRemoteService提供的方法查询首页要显示的数据
    ResultEntity<List<PortalTypeVO>> resultEntity = mySQLRemoteService.getPortalTypeProjectDataRemote();
    //2、检查查询结果
    String result = resultEntity.getResult();
    if (ResultEntity.SUCCESS.equals(result)){
        //3、获取查询结果数据
        List<PortalTypeVO> list = resultEntity.getData();
        //4、存入模型
        model.addAttribute(ConstantUtil.ATTR_NAME_PORTAL_DATDA,list);
    }
    return "portal";
}

代码5:页面显示

显示项目详情

目标

显示项目详情

思路

代码1:创建实体类

public class DetailReturnVO {
    //回报信息的主键
    private Integer returnId;
    // 当前档位支持的金额
    private Integer supportMoney;
    // 单笔限额
    private Integer signalPurchase;
    // 档位支撑者数量
    private Integer supporterCount;
    // 运费
    private Integer freight;
    // 发货时间
    private Integer returnDate;
    // 回报内容
    private String content;

    public DetailReturnVO() {
    }

    public DetailReturnVO(Integer returnId, Integer supportMoney, Integer signalPurchase, Integer supporterCount, Integer freight, Integer returnDate, String content) {
        this.returnId = returnId;
        this.supportMoney = supportMoney;
        this.signalPurchase = signalPurchase;
        this.supporterCount = supporterCount;
        this.freight = freight;
        this.returnDate = returnDate;
        this.content = content;
    }

public class DetailProjectVO {
    private Integer projectId;
    private String projectName;
    private String projectDesc;
    private Integer followerCount;
    private Integer status;
    private Integer day;
    private String statusText;
    private Integer money;
    private Integer supportMoney;
    private Integer percentage;
    private String deployDate;
    private Integer lastDay;
    private Integer supporterCount;
    private String headerPicturePath;
    private List<String> detailPicturePathList;
    private List<DetailReturnVO> detailReturnVOList;

    public DetailProjectVO() {
    }

    public DetailProjectVO(Integer projectId, String projectName, String projectDesc, Integer followerCount, Integer status, Integer day, String statusText, Integer money, Integer supportMoney, Integer percentage, String deployDate, Integer lastDay, Integer supporterCount, String headerPicturePath, List<String> detailPicturePathList, List<DetailReturnVO> detailReturnVOList) {
        this.projectId = projectId;
        this.projectName = projectName;
        this.projectDesc = projectDesc;
        this.followerCount = followerCount;
        this.status = status;
        this.day = day;
        this.statusText = statusText;
        this.money = money;
        this.supportMoney = supportMoney;
        this.percentage = percentage;
        this.deployDate = deployDate;
        this.lastDay = lastDay;
        this.supporterCount = supporterCount;
        this.headerPicturePath = headerPicturePath;
        this.detailPicturePathList = detailPicturePathList;
        this.detailReturnVOList = detailReturnVOList;
    }

代码2:mysql-provider暴露接口

<!--type：表示哪个类的映射 ID 为自定义，供其他标签引用此resultMap
    id标签：表示主键
    result：表示属性
    collection：表示外键：集合的映射，即表示分类数据中包含的项目数据的List
        property：类的属性
        column：数据库表的外键，
        select：从外键所在主表，根据column（id）选择rows
-->
<resultMap type="com.example.entity.vo.DetailProjectVO" id="loadProjectDetailResultMap">
    <id column="id" property="projectId"/>
    <result column="project_name" property="projectName"/>
    <result column="project_description" property="projectDesc"/>
    <result column="money" property="money"/>
    <result column="status" property="status"/>
    <result column="day" property="day"/>
    <result column="deploydate" property="deployDate"/>
    <result column="supportmoney" property="supportMoney"/>
    <result column="follower" property="followerCount"/>
    <result column="supporter" property="supporterCount"/>
    <result column="header_picture_path" property="headerPicturePath"/>
    <collection property="detailPicturePathList"
                select="com.example.mapper.ProjectPOMapper.selectDetailPicturePath" column="id"/>
    <collection property="detailReturnVOList"
                select="com.example.mapper.ProjectPOMapper.selectDeatailReturnVO" column="id"/>
</resultMap>
<select id="selectDetailPicturePath" resultType="string">
    SELECT item_pic_path
    FROM t_project_item_pic
    WHERE projectid = #{id} </select>
<select id="selectDeatailReturnVO" resultType="com.example.entity.vo.DetailReturnVO">
    select id             returnId,
           supportmoney   supportMoney,
           content,
           signalpurchase signalPurchase,
           purchase,
           freight,
           returndate     returnDate
    from t_return
    where projectid = #{id} </select>
<select id="selectDetailProjectVO" resultMap="loadProjectDetailResultMap">
    select id,
           project_name,
           project_description,
           money,
           status,
           day,
           deploydate,
           supportmoney,
           supporter,
           supportmoney
           /
           money
           *
           100
           percentage,
           follower,
           header_picture_path
    from t_project
    where id=#{projectId} </select>

DetailProjectVO selectDetailProjectVO(Integer projectId);

service方法

@Override
public DetailProjectVO getDetailProjectVO(Integer projectId) {
    DetailProjectVO detailProjectVO = projectPOMapper.selectDetailProjectVO(projectId);
    Integer status = detailProjectVO.getStatus();
    switch (status) {
        case 0:
            detailProjectVO.setStatusText("审核中");
            break;
        case 1:
            detailProjectVO.setStatusText("众筹中");
            break;
        case 2:
            detailProjectVO.setStatusText("众筹成功");
            break;
        case 3:
            detailProjectVO.setStatusText("已关闭");
            break;
        default:
            break;
    }
    //计算剩余时间
    String deployDate = detailProjectVO.getDeployDate();
    Date currentDay = new Date();
    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
    try {
        Date deployDay = format.parse(deployDate);
        // 获取时间戳
        long currrntTimeStap = currentDay.getTime();
        long deployDayTime = deployDay.getTime();
        long pastDays = (currrntTimeStap - deployDayTime) / 1000 / 60 / 60 / 24;
        Integer totaldays = detailProjectVO.getDay();
        Integer lastDays = (int) (totaldays - pastDays);
        detailProjectVO.setDay(lastDays);

    } catch (ParseException e) {
        e.printStackTrace();
    }

    return detailProjectVO;
}

Feign接口

@RequestMapping("/get/project/detail/remote/{projectId}")
ResultEntity<DetailProjectVO> getDetailProjectVORemote(@PathVariable("projectId") Integer projectId);

代码3:project-consumer调用接口

@RequestMapping("/get/project/detail/{projectId}")
public String getProjectDetail(@PathVariable("projectId")Integer projectId, Model model){

    ResultEntity<DetailProjectVO> resultEntity = mySQLRemoteService.getDetailProjectVORemote(projectId);
    if (ResultEntity.SUCCESS.equals(resultEntity.getResult())){
        DetailProjectVO detailProjectVO = resultEntity.getData();
        model.addAttribute("detailProjectVO",detailProjectVO);

    }
    return "project-show-detail";
}

代码5:功能起点

<h3 class="break">
    <a th:href="'http://www.crowd.com/project/get/project/detail/'+${project.projectId}" href="project.html" th:text="${project.projectName}">活性富氢净水直饮机</a>
</h3>

这里记得加上域名,因为我们是从一个微服务访问另一个微服务