业务形容
基于Spring,MyBatis,SpringBoot,Thymeleaf,Ajax技术实现流动模块的查问,增加等操作。
我的项目环境初始化
筹备工作
1. MySQL(5.7)2. JDK (1.8)3. Maven (3.6.3)4. STS(4.7.1)数据库初始化
关上mysql控制台,而后按如下步骤执行goods.sql文件。
第一步:登录mysql。
mysql –uroot –proot第二步:设置控制台编码方式。
set names utf8;第三步:执行activity.sql文件（切记不要关上文件复制到mysql客户端运行）。
source d:/activity.sql其中activity.sql文件内容如下：
drop database if exists dbactivity;create database dbactivity default character set utf8;use dbactivity;create table tb_activity( id bigint primary key auto_increment, title varchar(100) not null, category varchar(100) not null, startTime datetime not null, endTime datetime not null, remark text, state tinyint, createdTime datetime not null, createdUser varchar(100))engine=InnoDB;insert into tb_activity values (null,'ABS','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');insert into tb_activity values (null,'VALIDATE','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');insert into tb_activity values (null,'VALIDATE','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');insert into tb_activity values (null,'ABS','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');insert into tb_activity values (null,'ACCESS','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');创立我的项目并增加依赖
第一步：基于start.spring.io 创立我的项目并设置根本信息。
第二步：创立我的项目时指定我的项目外围依赖。
第三步：我的项目创立当前剖析其构造。
我的项目配置文件内容初始化
#serverserver.port=80#server.servlet.context-path=/#spring datasourcespring.datasource.url=jdbc:mysql:///dbactivity?serverTimezone=GMT%2B8&characterEncoding=utf8spring.datasource.username=rootspring.datasource.password=root#spring mybatismybatis.mapper-locations=classpath:/mapper/*/*.xml#spring logginglogging.level.com.cy=debug#spring thymeleafspring.thymeleaf.prefix=classpath:/templates/modules/spring.thymeleaf.suffix=.htmlspring.thymeleaf.cache=false我的项目API架构设计
其API架构设计，如图所示：
流动模块查问业务实现
业务形容
从数据库查问所有流动(Activity)信息，而后出现在页面上(基于JS形式进行出现)
业务时序剖析
在浏览器地址栏输出查问流动信息的url获取流动信息，其时序过程如图所示：
Dao接口办法及映射定义
定义流动模块数据层接口及查询方法，代码如下：
package com.cy.pj.activity.dao;import com.cy.pj.activity.pojo.Activity;@Mapperpublic interface ActivityDao { @Select("select * from tb_activity order by createdTime desc") List<Activity> findActivitys();}Service接口办法定义及实现
定义service接口以及获取流动信息的办法，代码如下：
package com.cy.pj.activity.service;import java.util.List;import com.cy.pj.activity.pojo.Activity;//引入包中的类:ctrl+shift+opublic 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;@Servicepublic class ActivityServiceImpl 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.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import com.cy.pj.activity.pojo.Activity;import com.cy.pj.activity.service.ActivityService;@Controllerpublic class ActivityController { @Autowired private ActivityService activityService; /**查问所有流动信息*/ @RequestMapping("/activity/doFindActivitys") public String doFindActivitys(Model model) { List<Activity> list=activityService.findActivitys(); model.addAttribute("list", list); return "activity"; }}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>基于Ajax异步加载服务端流动数据并进行部分刷新
<script type="text/javascript"> function doFindActivitys(){ var url="/activity/doFindActivitys" //启动ajax技术,基于GET申请形式获取服务端json数据 //getJSON函数默认会将服务端返回的json串转换为js对象 $.getJSON(url,function(result){ var tBody=$("#tbodyId"); tBody.empty();//清空原有body内容 for(var i=0;i<result.length;i++){//循环一次,迭代一行 //构建以后行对象 var tr=`<tr> <td>${result[i].title}</td> <td>${result[i].category}</td> <td>${result[i].startTime}</td> <td>${result[i].endTime}</td> <td>${result[i].state==1?'无效':'有效'}</td> <td><button type='button' class='btn btn-danger btn-sm'>delete</button></td> </tr>` //将每一行的内容都追加tbody中 tBody.append(tr); } }); }; doFindActivitys(); </script>启动tomcat服务器进行拜访测试剖析
- 数据库链接的url配置谬误，如图所示：
- 空指针异样，如图所示：
我的项目启动及运行过程中的BUG剖析
流动模块增加业务实现
业务形容
在流动列表页面，设计增加按钮，点击增加按钮时弹出模态框，在模态框中出现流动增加表单元素，其增加表单原型设计，
如图所示：
业务时序剖析
流动增加业务，其时序剖析，如图所示：
Dao接口办法及映射定义
在ActivityDao接口中增加长久化流动信息的办法，代码如下：
int insertObject(Activity activity);在ActivityMapper映射文件中增加映射元素，代码如下：
<insert id="insertObject" parameterType="com.cy.pj.activity.pojo.Activity" useGeneratedKeys="true" keyProperty="id"> insert into tb_activity (title,category,startTime,endTime,remark,state,createdUser,createdTime) values (#{title},#{category},#{startTime},#{endTime}, #{remark},#{state},#{createdUser},now()) </insert>相干属性的利用阐明，如图所示：
当然，也能够以注解的形式进行SQL映射，如图所示：
当流动创立好当前，如果到了完结工夫，动静更新流动的状态，代码如下：
@Update("update tb_activity set state=0 where id=#{id}")int updateState(Long id);Service接口办法定义及实现
在ActivityService接口中，增加保留流动信息的办法，代码如下：
int saveActivity(Activity entity);在ActivityServiceImpl实现类中增加，接口办法的实现，代码如下：
@Overridepublic int saveActivity(Activity entity) { int rows=activityDao.insertObject(entity); Timer timer=new Timer(); //此对象能够负责去执行一些工作(这个对象内置一个线程和一个工作队列) //启动线程执行任务调度 timer.schedule(new TimerTask() {//TimerTask为工作 @Override public void run() { //一旦调用此工作的线程取得了CPU就会执行这个工作的run办法 activityDao.updateState(entity.getId()); timer.cancel();//退出任务调度(后续线程也会销毁) } }, entity.getEndTime());//按指定工夫执行工作. return rows;}Controller办法定义及实现
在ActivityController中增加，解决增加申请的办法，代码如下：
@RequestMapping("/activity/doSaveActivity")public String doSaveActivity(Activity activity) { activityService.saveActivity(activity); return "redirect:/activity/doFindActivitys";}Activity 页面增加表单设计及实现
在activity.html页面中增加表单元素，用于实现与用户交互，首先在activity页面上增加一个增加按钮，代码如下：
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">创建活动</button>在指定地位增加模态框（可参考bootcss.com），代码如下：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">创建活动</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default"data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" onclick="doSaveObject()"> Save Changes</button> </div> </div> </div></div>在模态框”modal-body”地位，增加form表单，代码如下：
<form class="form-horizontal" th:action="@{/activity/doSaveActivity}" method="post"><div class="form-group"> <label for="titleId" class="col-sm-2 control-label">题目</label> <div class="col-sm-10"> <input type="text" class="form-control" name="title" id="titleId" placeholder="title"> </div></div><div class="form-group"><label for="categoryId" class="col-sm-2 control-label">类型</label> <div class="col-sm-10"> <select id="categoryId" name="category" class="form-control"> <option value="教育培训">教育培训</option> <option value="企业流动">企业流动</option> <option value="交友流动">交友流动</option> </select> </div></div><div class="form-group" ><label for="startTimeId" class="col-sm-2 control-label">开始工夫</label> <div class="col-sm-10"> <input type="text" class="form-control form_datetime" name="startTime" id="startTimeId" placeholder="start time"> </div></div><div class="form-group"> <label for="endTimeId" class="col-sm-2 control-label">完结工夫</label> <div class="col-sm-10"> <input type="text" class="form-control form_datetime" name="endTime" id="endTimeId" placeholder="end time"> </div></div><div class="form-group"> <label for="remarkId" class="col-sm-2 control-label">备注</label> <div class="col-sm-10"> <textarea type="text" class="form-control" rows="5" name="remark" id="remarkId"> </textarea> </div></div></form>增加JS代码，解决模态框Save按钮事件，代码如下：
<script type="text/javascript"> function doSaveObject(){ //表单校验(可思考应用正则表达式) //提交表单 //$(form)基于标签名(例如这里的标签名form)称获取表单对象 //submit为jquery中的一个对象函数,通过此函数能够提交表单. $("form").submit();//提交表单 } </script>启动tomcat服务器进行拜访测试剖析
启动tomcat ，拜访流动列表页面，如图所示：
在流动列表页面，点击增加按钮，而后启动流动增加模块框，执行增加操作如图所示:
日历控件拓展实现(开始工夫和完结工夫通过抉择实现)，成果展现，如图所示:
Bootstrap-datapicker控件的实现过程，如图所示:
我的项目启动及运行过程中的BUG剖析
- JS 语法问题，如图所示：
总结(Summary)
本模块中解说了流动模块中类的设计，映射设计，交互设计以及实现，而后能够基于此模块的练习增强对业务和技术上的设计及是实现。