乐趣区

关于java:SpringBoot工程下活动模块设计及实现查询

jiezi

1、数据库初始化

第一步: 登录 mysql。

mysql –uroot –proot

第二步: 设置控制台编码方式。

set names utf8;
        第三步: 执行 activity.sql 文件（切记不要关上文件复制到 mysql 客户端运行）。
source d:/activity.sql

2、创立我的项目：

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 相干办法
@Data
public 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;

/** 定义流动模块数据层接口及查询方法
*/
@Mapper
public 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 接口实现类，并重写接口办法
@Service
public 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 页面的拜访地址，出现流动信息:

退出移动版