1、数据库初始化
第一步:登录mysql。
mysql –uroot –proot第二步:设置控制台编码方式。
set names utf8; 第三步:执行activity.sql文件（切记不要关上文件复制到mysql客户端运行）。 source d:/activity.sql2、创立我的项目：
1、增加依赖：
MySQL、JDBC API、MyBatis Framework、Thymeleaf、Spring Web、Spring Boot DevTools、Lombok、Spring Boot Actuator；
2、我的项目配置文件内容：
#server server.port=80 server.servlet.context-path=/ #spring datasource spring.datasource.url=jdbc:mysql:///库名?serverTimezone=GMT%2B8&characterEncoding=utf8 spring.datasource.username=root spring.datasource.password=root #spring mybatis mybatis.mapper-locations=classpath:/mapper/*/*.xml #spring thymeleaf spring.thymeleaf.prefix=classpath:/templates/modules/ spring.thymeleaf.suffix=.html spring.thymeleaf.cache=false #spring logging logging.level.com.cy=debug我的项目API架构设计:
流动模块业务查问:
从数据库查问所有流动(Activity)信息，而后出现在页面上(基于JS形式进行出现):
业务时序剖析
POJO类设计及实现
创立Activity类,基于此类对象封装从数据库获取的属性值,代码如下:
package com.cy.pj.activity.pojo;import java.util.Date;import com.fasterxml.jackson.annotation.JsonFormat;import lombok.Data;//@Data注解能够不必手写set和get办法，底层会主动创立//@Data为Lombok注解,须要在IDE环境中曾经装置lombok插件,//我的项目中增加lombok依赖,如果没有也能够本人增加set/get相干办法@Datapublic class Activity { // @JsonFormat用于通知spring mvc转换json时，将日期依照指定格局转换 private Integer id; private String title; private String category; @JsonFormat(pattern = "yyy/MM/dd HH:mm",timezone = "GMT+8") private Date startTime; @JsonFormat(pattern = "yyy/MM/dd HH:mm",timezone = "GMT+8") private Date endTime; private String remark; private Integer state; @JsonFormat(pattern = "yyy/MM/dd HH:mm",timezone = "GMT+8") private Date createdTime; private String createdUser;}（数据层）Dao接口办法及映射定义
package com.cy.pj.activity.dao;import java.util.List;import org.apache.ibatis.annotations.Mapper;import org.apache.ibatis.annotations.Select;import com.cy.pj.activity.pojo.Activity;/**定义流动模块数据层接口及查询方法*/@Mapperpublic interface ActivityDao { //因为sql语句简略所以没有封装到xml文件中，间接用注解的形式查问~~~~ @Select("select * from tb_activity order by createdTime desc") List<Activity> findActivitys();}（业务层）Service接口办法定义及实现
package com.cy.pj.activity.service;import java.util.List;import com.cy.pj.activity.pojo.Activity;//定义service接口以及获取流动信息的~~~~办法public interface ActivityService { List<Activity> findActivitys(); }service接口实现类
package com.cy.pj.activity.service.impl;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import com.cy.pj.activity.dao.ActivityDao;import com.cy.pj.activity.pojo.Activity;import com.cy.pj.activity.service.ActivityService;//定义service接口实现类，并重写接口办法@Servicepublic class ActivitySereviceImpl implements ActivityService { @Autowired private ActivityDao activityDao; @Override public List<Activity> findActivitys() { return activityDao.findActivitys(); }}(管制层)Controller办法定义及实现
package com.cy.pj.activity.controller;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.cy.pj.activity.pojo.Activity;import com.cy.pj.activity.service.ActivityService;@Controller@RequestMapping("/activity/")public class ActivityController { @Autowired private ActivityService activityService; @RequestMapping("doActivityUI") public String doActivityUI() { return "activity"; } /**查问所有流动信息*/ @RequestMapping("doFindActivitys") @ResponseBody public List<Activity> doFindActivitys(){ return activityService.findActivitys(); }（客户端）Activity 列表页面设计及实现
页面款式基于bootstrap(一个前端框架，官网为bootcss.com)进行实现，首先在我的项目工程中增加动态资源
创立activity.html页面，引入bootstrap,jquery等相干资源
在activity.html页面中增加出现Activity数据的html元素：
<table class="table"> <thead> <tr><!-- 设置表构造的表头 --> <th>title</th> <th>Category</th> <th>StartTime</th> <th>EndTime</th> <th>State</th> <th>Operation</th> </tr> </thead> <!-- 设置表内容 --> <tbody id="tbodyId"> <tr><td colspan="6">数据正在加载中.......</td></tr> </tbody></table>向服务端发送异步申请获取流动信息并更新到页面上
<script type="text/javascript">function findActivitys(){ var url="/activity/doFindActivitys"; let params={}; /* $.getJSON(url,params,function(result){ console.log(result) }); */ $.ajax({ url:url, data:params, dataType:"json", success:function(result){ doHandleQueryResult(result); } }); }; function doHandleQueryResult(result){ //1、迭代result，并将result内容填充到tbody地位 var tbody=$("#tbodyId");//原生写法:document.querySelector("#tbodyId") tbody.empty();//清空tbody中原有内容；原生写法：tbody.innerHTML=""; //2、迭代result，将流动信息追加到tbody中 result.forEach(item=>{//这里的item为一个变量，代表数组中某一个元素 //将查问到的数据增加到tbody中 tbody.append( `<tr> <td>${item.id}</td> <td>${item.title}</td> <td>${item.category}</td> <td>${item.startTime}</td> <td>${item.endTime}</td> <td>${item.state==1?'无效状态':'已完结'}</td> <td>${item.createdTime}</td> </tr>` ) }); } //放在body的最底端能够间接调用 findActivitys(); //如果放在head中就得用这种办法： $(function(){ findActivitys(); })</script>启动tomcat服务器进行拜访测试剖析
启动我的项目，在浏览器中输出activity页面的拜访地址，出现流动信息: