乐趣区

关于bootstrap:SpringBoot工程下活动Activity模块设计及实现

作者：

jiezi

在

业务形容

基于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 创立我的项目并设置根本信息。

第二步：创立我的项目时指定我的项目外围依赖。

第三步：我的项目创立当前剖析其构造。

我的项目配置文件内容初始化

#server
server.port=80
#server.servlet.context-path=/
#spring datasource
spring.datasource.url=jdbc:mysql:///dbactivity?serverTimezone=GMT%2B8&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=root

#spring mybatis
mybatis.mapper-locations=classpath:/mapper/*/*.xml

#spring logging
logging.level.com.cy=debug

#spring thymeleaf
spring.thymeleaf.prefix=classpath:/templates/modules/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false

我的项目API架构设计

其API架构设计，如图所示：

流动模块查问业务实现

业务形容

从数据库查问所有流动(Activity)信息，而后出现在页面上(基于JS形式进行出现)

业务时序剖析

在浏览器地址栏输出查问流动信息的url获取流动信息，其时序过程如图所示：

Dao接口办法及映射定义

定义流动模块数据层接口及查询方法，代码如下：

package com.cy.pj.activity.dao;
import com.cy.pj.activity.pojo.Activity;

@Mapper
public 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+o

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
public 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;

@Controller
public 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实现类中增加，接口办法的实现，代码如下：

@Override
public 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">&times;</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)

本模块中解说了流动模块中类的设计，映射设计，交互设计以及实现，而后能够基于此模块的练习增强对业务和技术上的设计及是实现。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章