java学习基地

微信扫一扫 分享朋友圈

已有 1696 人浏览分享

SpringBoot工程下活动(Activity)模块设计及实现流程

[复制链接]
1696 2
本帖最初由 进修派 于 2020-12-7 19:54 编纂



营业形貌

基于Spring,MyBatis,SpringBoot,Thymeleaf,Ajax手艺完成举动模块的查询,增加等操纵。


项目情况初初化筹办事情
  • MySQL(5.7)
  • JDK (1.8)
  • Maven (3.6.3)
  • STS(4.7.1)

数据库初初化

翻开mysql掌握台,然后按以下步调施行goods.sql文件。



第一步:登录mysql。


  1. mysql –uroot –proot
赶钙代码


第两步:设置掌握台编码方法。

  1. set names utf8;
赶钙代码


此中activity.sql文件内容以下:


  1. drop database if exists dbactivity;
  2. create database dbactivity default character set utf8;
  3. use dbactivity;
  4. create table tb_activity(
  5.      id bigint primary key auto_increment,
  6.      title varchar(100) not null,
  7.      category varchar(100) not null,
  8.      startTime datetime not null,
  9.      endTime datetime not null,
  10.      remark text,
  11.      state tinyint,
  12.      createdTime datetime not null,
  13.      createdUser varchar(100)
  14. )engine=InnoDB;
  15. insert into tb_activity values (null,'ABS','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');
  16. insert into tb_activity values (null,'VALIDATE','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');
  17. insert into tb_activity values (null,'VALIDATE','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');
  18. insert into tb_activity values (null,'ABS','cuoxiao','2020-02-02 15:00:00','2020-02-03 15:00:00','...',1,now(),'xiaoli');
  19. 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 创立项目并设殖鳄本疑息。


搜刮Java知音公家号,复兴“后端口试”,收您一份Java口试题宝典.pdf





image.png

第两步:创立项目时指定项谋八心依靠。


第三步?目创立当前阐发其构造。





image.png项目设置文件内容初初化
  1. #server
  2. server.port=80
  3. #server.servlet.context-path=/
  4. #spring datasource
  5. spring.datasource.url=jdbc:mysql:///dbactivity?serverTimezone=GMT%2B8&characterEncoding=utf8
  6. spring.datasource.username=root
  7. spring.datasource.password=root
  8. #spring mybatis
  9. mybatis.mapper-locations=classpath:/mapper/*/*.xml
  10. #spring logging
  11. logging.level.com.cy=debug
  12. #spring thymeleaf
  13. spring.thymeleaf.prefix=classpath:/templates/modules/
  14. spring.thymeleaf.suffix=.html
  15. spring.thymeleaf.cache=false
赶钙代码


项目API架构设想

其API架构设想,如图所示:



举动模块查询营业完成营业形貌

从数据库查询一切举动(Activity)疑息,然后显现正在页里上(基于JS方法停止显现),如图所示:





image.png营业时序阐发

正在阅读器地点揽噤进查询举动疑息的url获得举动疑息,当时序历程如图所示:





image.pngPOJO类设想及完成

创立Activity类,基于词攀类工具启拆从数据库获得的举动疑息,代码以下:


  1. package com.cy.pj.activity.pojo;
  2. import java.util.Date;
  3. import lombok.Data;
  4. @Data
  5. public class Activity {
  6.     private Integer id;
  7.     private String title;
  8.     private String category;
  9.     private Date startTime;
  10.     private Date endTime;
  11.     private String remark;
  12.     private Integer state;
  13.     private Date createdTime;
  14.     private String createdUser;
  15. }
赶钙代码

此中,@Data注解为Lombok注解,需求正在IDE情况中曾经装置lombok插件,项目中增加lombok依靠,假设出有也能够本人增加set/get相干办法



Dao接心办法及映照界说

界说举动模块数据层接心及查询办法,代码以下:


  1. package com.cy.pj.activity.dao;
  2. import com.cy.pj.activity.pojo.Activity;
  3. @Mapper
  4. public interface ActivityDao {
  5.    
  6.      @Select("select * from tb_activity order by createdTime desc")
  7.      List<Activity> findActivitys();
  8. }
赶钙代码

Service接心办法界说及完成

界说service接心和获得举动疑息的办法,代码以下:


  1. package com.cy.pj.activity.service;
  2. import java.util.List;
  3. import com.cy.pj.activity.pojo.Activity;
  4. //引进包中的类:ctrl+shift+o
  5. public interface ActivityService {
  6.     List<Activity> findActivitys();
  7. }
赶钙代码

界说service接话柄现类,并重写接心办法,代码以下:


  1. package com.cy.pj.activity.service.impl;
  2. import java.util.List;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.stereotype.Service;
  5. import com.cy.pj.activity.dao.ActivityDao;
  6. import com.cy.pj.activity.pojo.Activity;
  7. import com.cy.pj.activity.service.ActivityService;
  8. @Service
  9. public class ActivityServiceImpl implements ActivityService {
  10.     @Autowired
  11.     private ActivityDao activityDao;
  12.     @Override
  13.     public List<Activity> findActivitys() {
  14.          return  activityDao.findActivitys();
  15.     }
  16. }
赶钙代码

Controller办法界说及完成

  1. package com.cy.pj.activity.controller;
  2. import java.util.List;
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.stereotype.Controller;
  5. import org.springframework.ui.Model;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import com.cy.pj.activity.pojo.Activity;
  8. import com.cy.pj.activity.service.ActivityService;
  9. @Controller
  10. public class ActivityController {
  11.      @Autowired
  12.      private ActivityService activityService;
  13.      
  14.      @RequestMapping("/activity/doActivityUI")
  15.      public String doActivityUI(){
  16.           return "activity";
  17.      }
  18.      
  19.      /**查询一切举动疑息*/
  20.      @RequestMapping("/activity/doFindActivitys")
  21.      @ResponseBody
  22.      public List<Activity> doFindActivitys() {
  23.          List<Activity>  list=activityService.findActivitys();
  24.          return list;
  25.      }
  26. }
赶钙代码


Activity 列表页里设想及完成

本次页里款式基于bootstrap(一个前端框架,民网为bootcss.com)停止完成,起首正在项目工程中增加静态资本,如图所示:



设想activity.html页里,引进bootstrap,jquery等相干资本,如图所示:




image.png

正在activity.html页里中增加显现Activity数据的html元素:


  1. <table class="table">
  2.     <thead>
  3.         <tr>
  4.             <th>title</th>
  5.             <th>Category</th>
  6.             <th>StartTime</th>
  7.             <th>EndTime</th>
  8.             <th>State</th>
  9.             <th>Operation</th>
  10.         </tr>
  11.     </thead>
  12.     <tbody id="tbodyId">
  13.         <tr><td colspan="6">数据正正在减载中.......</td></tr>
  14.     </tbody>
  15. </table>
赶钙代码

基于Ajax同步减载效劳端举动数据并停止部分革新


  1. <script type="text/javascript">
  2.       function doFindActivitys(){
  3.           var url="/activity/doFindActivitys"
  4.           //启动ajax手艺,基于GET恳求方法获得效劳端json数据
  5.           //getJSON函数默许会将效劳端返回的json串转话讵js工具
  6.           $.getJSON(url,function(result){
  7.               var tBody=$("#tbodyId");
  8.               tBody.empty();//浑空本有body内容
  9.               for(var i=0;i<result.length;i++){//轮回一次,迭代一止
  10.                   //构建当前止工具
  11.                   var tr=`<tr>
  12.                           <td>${result[i].title}</td>
  13.                           <td>${result[i].category}</td>
  14.                           <td>${result[i].startTime}</td>
  15.                           <td>${result[i].endTime}</td>
  16.                           <td>${result[i].state==1?'有用':'无效'}</td>
  17.                           <td><button type='button' class='btn btn-danger btn-sm'>delete</button></td>
  18.                          </tr>`
  19.                   //将每止的内容皆逃减tbody中
  20.                   tBody.append(tr);
  21.               }
  22.           });
  23.       };
  24.       doFindActivitys();
  25.     </script>
赶钙代码

启动tomcat效劳器停止会见测试阐发


启动项目,正在阅读器中输进activity页里的会见地点,显现举动疑息,如图所示:





image.png

客户端断面调试阐发,如图所示:





image.png

运转时断面设置,如图所示:





image.png

进进断面办法内部,如图所示:





image.png

查抄呼应数据正在客户真个显现,如图所示:





image.png项目启动及运转过程当中的BUG阐发
  • 数据库链接的url设置毛病,如图所示:




image.png

  • 空指针非常,如图所示:




image.png

  • JS 引进毛病,如图所示:
image.pngimage.pngimage.png
  • JS 语法毛病,如图所示:
image.png


举动模块增加营业完成营业形貌

正在举动列表页里,设想增加按钮,面击增加按钮时弹出模态框,正在模态框中显现举动增加表单位素,其增加表单本型设想,
如图所示:



营业时序阐发

举动增加营业,当时序阐发,如图所示:





image.pngDao接心办法及映照界说

正在ActivityDao接心中增加耐久化举动疑息的办法,代码以下:


  1. int insertObject(Activity activity);
赶钙代码

正在ActivityMapper映照文件中增加映照元素,代码以下:


  1. <insert id="insertObject" parameterType="com.cy.pj.activity.pojo.Activity"
  2.              useGeneratedKeys="true" keyProperty="id">
  3.           insert into tb_activity
  4.           (title,category,startTime,endTime,remark,state,createdUser,createdTime)
  5.           values   
  6.           (#{title},#{category},#{startTime},#{endTime},
  7.           #{remark},#{state},#{createdUser},now())
  8. </insert>
赶钙代码

"#{}"表达式数据获得阐发,如图所示:





image.png

施行insert操纵时获得数据库主键id值,如图所示:





image.png


固然,也能够以注解的方法停止SQL映照,如图所示:





image.png

当举动创立好当前,假设到告终束工夫,静态更新举动的形态,代码以下:


  1. @Update("update tb_activity set state=0 where id=#{id}")
  2. int updateState(Long id);
赶钙代码

Service接心办法界说及完成

正在ActivityService接心中,增加保留举动疑息的办法,代码以下:


  1. int saveActivity(Activity entity);
赶钙代码

正在ActivityServiceImpl完成类中增加,接心办法的完成,代码以下:


  1. @Override
  2. public int saveActivity(Activity entity) {
  3.         int rows=activityDao.insertObject(entity);
  4.         Timer timer=new Timer();
  5.          //此工具能够卖力来施行一些使命(那个工具内置一个线程战一个使命行列)
  6.          //启动线程施行使命调理
  7.         timer.schedule(new TimerTask() {//TimerTask为使命
  8.             @Override
  9.             public void run() {
  10.                 //一旦挪用此使命当边程得到了CPU便会施行那个使命的run办法
  11.                 activityDao.updateState(entity.getId());
  12.                 timer.cancel();//湍骣使命调理(后绝线程颐挥嗅烧毁)
  13.             }
  14.         }, entity.getEndTime());//跋父按时间施行使命.
  15.         return rows;
  16. }
赶钙代码

Controller办法界说及完成


正在ActivityController中增加,处置增加恳求的办法,代码以下:


  1. @RequestMapping("/activity/doSaveActivity")
  2. @ResponseBody
  3. public String doSaveActivity(Activity activity) {
  4. activityService.saveActivity(activity);
  5. return "save ok";
  6. }
赶钙代码

Activity 页里增加表单设想及完成

正在activity.html页里中增加表单位素,用于完成取映雩交互,起首正在activity页里上增加一个增加按钮,代码以下:


  1. <button type="button" class="btn btn-primary btn-sm"
  2.             data-toggle="modal" data-target="#myModal">创立举动
  3. </button>
赶钙代码

正在指定地位增加模态框(可参考bootcss.com),代码以下:


  1. <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
  2.             aria-labelledby="myModalLabel">
  3.             <div class="modal-dialog" role="document">
  4.                 <div class="modal-content">
  5.                     <div class="modal-header">
  6.                         <button type="button" class="close" data-dismiss="modal"
  7.                                                 aria-label="Close">
  8.                             <span aria-hidden="true">×</span>
  9.                         </button>
  10.                         <h4 class="modal-title" id="myModalLabel">创立举动</h4>
  11.                     </div>
  12.                     <div class="modal-body">   
  13.                     </div>
  14.                     <div class="modal-footer">
  15.                         <button type="button" class="btn btn-default"data-dismiss="modal">Close</button>
  16.                         <button type="button" class="btn btn-primary" onclick="doSaveObject()">
  17.                         Save Changes</button>
  18.                     </div>
  19.                 </div>
  20.             </div>
  21. </div>
赶钙代码


正在模态框”modal-body”地位,增加form表单,代码以下:


  1. <form class="form-horizontal" th:action="@{/activity/doSaveActivity}" method="post">
  2. <div class="form-group">
  3.     <label for="titleId" class="col-sm-2 control-label">题目</label>
  4.         <div class="col-sm-10">
  5.          <input type="text" class="form-control"  name="title" id="titleId" placeholder="title">
  6.         </div>
  7. </div>
  8. <div class="form-group">
  9. <label for="categoryId" class="col-sm-2 control-label">范例</label>
  10.     <div class="col-sm-10">
  11.         <select id="categoryId" name="category" class="form-control">
  12.             <option value="教诲培训">教诲培训</option>
  13.             <option value="企业举动">企业举动</option>
  14.             <option value="结交举动">结交举动</option>
  15.         </select>
  16.     </div>
  17. </div>
  18. <div class="form-group" >
  19. <label for="startTimeId" class="col-sm-2 control-label">开端工夫</label>
  20.     <div class="col-sm-10">
  21.        <input type="text" class="form-control form_datetime"
  22.          name="startTime" id="startTimeId" placeholder="start time">
  23.     </div>
  24. </div>
  25. <div class="form-group">
  26.     <label for="endTimeId" class="col-sm-2 control-label">完毕工夫</label>
  27.     <div class="col-sm-10">
  28.            <input type="text" class="form-control form_datetime"
  29.             name="endTime" id="endTimeId" placeholder="end time">
  30.     </div>
  31. </div>
  32. <div class="form-group">
  33.     <label for="remarkId" class="col-sm-2 control-label">备注</label>
  34.         <div class="col-sm-10">
  35.            <textarea type="text" class="form-control"  rows="5" name="remark" id="remarkId">
  36.             </textarea>
  37.     </div>
  38. </div>
  39. </form>
赶钙代码

增加JS代码,处置模态框Save按钮变乱,代码以下:


  1. function doSaveObject(){
  2.         //1.界说url
  3.         let url="/activity/doSaveObject";
  4.         //2.界说恳求参数
  5.         var params=
  6.       $("#saveFormId").serialize();//serialize()为jquery中间接获得表单数据办法
  7.         console.log("params",params);
  8.         //3.收收同步恳求
  9.         $.ajax({
  10.             type:"post",
  11.             url:url,
  12.             data:params,
  13.             success:function(result){
  14.                 alert(result);
  15.                 //躲藏模态框
  16.                 $('#myModal').modal('hide');
  17.                 //从头施行查询,部分革新
  18.                 findActivitys();
  19.             }
  20.         });
  21.         
  22.     }
赶钙代码

启动tomcat效劳器停止会见测试阐发

启动tomcat ,会见举动列表页里,如图所示:



正在举动列表页里,面击增加按钮,然后启动举动增加模块框,施行增加操纵如图所示:



Spring MVC 为办法参数赋值阐发,如图所示:





image.png

日历控件拓展完成(开端工夫战完毕工夫经由过程挑选完成),结果展现,如图所示:



Bootstrap-datapicker控件的完成历程,如图所示:



项目启动及运转过程当中的BUG阐发

  • BindingException,如图所示:




image.png

  • 400 非常,如图所示:



image.png

  • 效劳端日期格局设想,如图所示:




image.png

  • 完好性束缚非常,如图所示:



image.png总结(Summary)

本模块中解说了举动模块中类的设想,映照设想,交互设想和完成,然后能够基于此模块的操练增强对营业战手艺上的设想及是完成。








本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

举报 使用道具

回复

评论 2

boluomi66  vip终身会员  发表于 2020-12-22 19:27:52 | 显示全部楼层
我也是坐沙发的

举报 使用道具

回复
重生  vip年度会员  发表于 2020-12-22 20:49:17 | 显示全部楼层
元芳你怎么看?

举报 使用道具

回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

138

主题
精彩推荐
热门资讯
网友晒图
图文推荐

Archiver|手机版|java学习基地 |网站地图

GMT+8, 2021-6-23 10:08 , Processed in 0.591820 second(s), 28 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.