在首页显示当前的项目数据，并且按照type分类，点击每一个项目，可以进入项目的详情页面。

一、首页显示项目数据

1、创建实体类

实体类的内容与浏览器端需要显示的内容相匹配

PortalTypeVO：代表页面的分类信息

@Data
@AllArgsConstructor
@NoArgsConstructor
public class PortalTypeVO {
    private Integer id;
    private String name;
    private String remark;
    private List<PortalProjectVO> portalProjectVOList;
}

PortalProjectVO：代表每一个分类中的项目的简介

@Data
@AllArgsConstructor
@NoArgsConstructor
public class PortalProjectVO {
    private Integer projectId;
    private String projectName;
    private String headerPicturePath;
    private Integer money;
    private String deployDate;
    private Integer percentage;
    private Integer supporter;
}

2、编写SQL语句

这里因为是项目相关的信息，因此写在ProjectPOMapper.xml文件中：

查询当前数据库中所有的type，并通过typeId与t_project_type、t_project表关联查询出每一个type所包含的Project信息

<select id="selectPortalProjectVOList" resultType="org.fall.entity.vo.PortalProjectVO">
  select
  t_project.id projectId,
  project_name projectName,
  header_picture_path headerPicturePath,
  money,
  deploydate deployDate,
  (supportmoney/money)*100 percentage,
  supporter
  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    <!--首页中每一个分类最多显示4个项目，因此用limit限制-->
</select>
<!-- loadPortalProjectListResultMap -->
<resultMap id="loadPortalProjectListResultMap" type="org.fall.entity.vo.PortalTypeVO">
  <id column="id" property="id"/>
  <result column="name" property="name"/>
  <result column="remark" property="remark"/>
  <!-- 通过typeId查询对应项目信息的list -->
  <collection property="portalProjectVOList" column="id" select="selectPortalProjectVOList"/>
</resultMap>
<!-- selectPortalTypeVOList -->
<select id="selectPortalTypeVOList" resultMap="loadPortalProjectListResultMap">
  select id,name,remark from t_type
</select>

Mapper接口的方法：

List<PortalTypeVO> selectPortalTypeVOList();

3、对外暴露接口

Service层接口：

DetailProjectVO getDetailProjectVO(Integer projectId);

Service层实现类：

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

handler方法：

@RequestMapping("/get/portal/type/project/data/remote")
public ResultEntity<List<PortalTypeVO>> getPortalTypeProjectDataRemote(){
    try {
        List<PortalTypeVO> portalTypeVOList = projectService.getPortalTypeVOList();
        return ResultEntity.successWithData(portalTypeVOList);
    } catch (Exception e){
        e.printStackTrace();
        return ResultEntity.failed(e.getMessage());
    }
}

远程api模块的对应接口：

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

4、调用远程方法

因为概要信息显示在首页，因此需要修改auth-consumer模块的首页的handler方法：

// 首页
@RequestMapping("/")
public String showPortalPage(ModelMap modelMap){

    // 调用MySQLRemoteService提供的方法查询首页要显示的数据
    ResultEntity<List<PortalTypeVO>> resultEntity = mySQLRemoteService.getPortalTypeProjectDataRemote();
    // 如果操作成功，将得到的list加入请求域
    if (ResultEntity.SUCCESS.equals(resultEntity.getResult())){
        List<PortalTypeVO> portalTypeVOList = resultEntity.getData();
        modelMap.addAttribute(CrowdConstant.ATTR_NAME_PORTAL_TYPE_LIST,portalTypeVOList);
    }

    return "portal";
}

5、前端显示

在前端通过请求域中的数据，显示在前端，详见代码。

这里给出跳转到每一个项目详情页面的代码：（拼接projecId以进入对应projectId的详情页面）

<h3 class="break">
    <a th:href="@{http://localhost/project/show/project/detail/} + ${project.projectId}" th:text="${project.projectName}">
        活性富氢净水直饮机
    </a>
</h3>

二、显示单个项目详情

1、创建实体类

DetailProjectVO：代表详情页面的项目信息

@Data
@AllArgsConstructor
@NoArgsConstructor
public class DetailProjectVO {

    private Integer projectId;
    private String projectName;
    private String projectDesc;
    private Integer followerCount;
    private Integer day;
    private Integer status;
    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;


}

DetailReturnVO：代表每一个项目中的回报信息

@Data
@AllArgsConstructor
@NoArgsConstructor
public class DetailReturnVO {

    // 回报主键信息
    private Integer returnId;

    // 当前栏位需要支持的金额
    private Integer supportMoney;

    // 是否限购，0时无限额，1时有限额
    private Integer signalPurchase;

    // 具体的限额数量
    private Integer purchase;

    // 当前栏位的支持者数量
    private Integer supporterCount;

    // 运费 0时表示包邮
    private Integer freight;

    // 众筹成功多少天后发货
    private Integer returnDate;

    // 回报的详细内容
    private String content;


}

2、编写SQL语句

这里依然是写在ProjectPOMapper.xml文件中：

<resultMap id="loadProjectDetailResultMap" type="org.fall.entity.vo.DetailProjectVO">
  <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="deploydate" property="deployDate" />
  <result column="supportmoney" property="supportMoney" />
  <result column="supporter" property="supporterCount" />
  <result column="percentage" property="percentage" />
  <result column="follower" property="followerCount" />
  <result column="day" property="day"/>
  <result column="header_picture_path" property="headerPicturePath" />
  <collection property="detailPicturePathList" column="id" select="selectDetailPicturePathList"/>
  <collection property="detailReturnVOList" column="id" select="selectDetailReturnVOList"/>
</resultMap>

<select id="selectDetailReturnVOList" resultType="org.fall.entity.vo.DetailReturnVO">
  select
      id returnId,
      supportmoney supportMoney,
      signalpurchase signalPurchase,
      purchase,
      freight ,
      returndate returnDate,
      content
  from
      t_return
  where
      projectid=#{id}
</select>

<select id="selectDetailPicturePathList" resultType="string">
  select item_pic_path from t_project_item_pic where projectid=#{id}
</select>

<select id="selectDetailProjectVO" resultMap="loadProjectDetailResultMap">
  select
      id,
      project_name,
      project_description,
      money,
      day,
      status,
      deploydate,
      supportmoney,
      supporter,
      (supportmoney/money)*100 percentage,
      follower,
      header_picture_path
  from
      t_project
      where id=#{projectId}
</select>

Mapper接口的方法：

DetailProjectVO selectDetailProjectVO(Integer projectId);

3、对外暴露接口

service层接口：

DetailProjectVO getDetailProjectVO(Integer projectId);

service层实现类：

实现类中根据当前数据，得到了statusText、项目剩余时间、

@Override
public DetailProjectVO getDetailProjectVO(Integer projectId) {
    // 得到DetailProjectVO对象
    DetailProjectVO detailProjectVO = projectPOMapper.selectDetailProjectVO(projectId);

    // 根据status 确定status的状态
    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;
    }

    // 根据deployDate计算lastDay
    String deployDate = detailProjectVO.getDeployDate();

    // 获取当前日期
    Date currentDay = new Date();

    // 把众筹的日期转换为Date类型
    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
    try {
        Date deployDay = format.parse(deployDate);

        // 获取当前日期的时间戳
        long currentDayTime = currentDay.getTime();

        // 获取众筹日期的时间戳
        long deployDayTime = deployDay.getTime();

        // 通过当前日期时间戳-众筹日期时间戳，得到已经去过的时间
        Integer passDay = (int)(currentDayTime - deployDayTime) / 1000 / 60 / 60 / 24;

        // 用设置的众筹天数-过去的时间 得到剩余时间
        int lastDay = detailProjectVO.getDay() - passDay;

        // 给当前的DetailProjectVO对象设置剩余时间
        detailProjectVO.setLastDay(lastDay);

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

    // 最后返回完善后的detailProjectVO对象
    return detailProjectVO;
}

handler方法：

// 传入的 /{projectId} 需要在传参处使用 @PathVariable("projectId")来接收
@RequestMapping("/get/detail/project/remote/{projectId}")
public ResultEntity<DetailProjectVO> getDetailProjectVORemote(@PathVariable("projectId") Integer projectId){
    return ResultEntity.successWithData(projectService.getDetailProjectVO(projectId));
}

远程api模块的对应接口：

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

4、调用远程方法

@RequestMapping("/show/project/detail/{projectId}")
public String getDetailProject(@PathVariable("projectId") Integer projectId,ModelMap modelMap){
    ResultEntity<DetailProjectVO> resultEntity = mySQLRemoteService.getDetailProjectVORemote(projectId);
    if (ResultEntity.SUCCESS.equals(resultEntity.getResult())){
        DetailProjectVO detailProjectVO = resultEntity.getData();
        modelMap.addAttribute(CrowdConstant.ATTR_NAME_DETAIL_PROJECT,detailProjectVO);
    }
    return "project-show-detail";
}

5、前端显示

详见代码，这里省略

尚筹网项目

11前台-展示项目

一、首页显示项目数据

1、创建实体类

2、编写SQL语句

3、对外暴露接口

4、调用远程方法

5、前端显示

二、显示单个项目详情

1、创建实体类

2、编写SQL语句

3、对外暴露接口

4、调用远程方法

5、前端显示