当前位置：首页 > 文章列表 > 数据库 > MySQL > SpringBoot工程下活动模块设计及实现(查询)

SpringBoot工程下活动模块设计及实现(查询)

来源：SegmentFault 2023-01-26 18:40:01 0浏览收藏

大家好，今天本人给大家带来文章《SpringBoot工程下活动模块设计及实现(查询)》，文中内容主要涉及到MySQL、Java、springboot、javascript、jquery，如果你对数据库方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

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();
}
</activity>

（业务层）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();
    
}</activity>

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();
    }
}
</activity>

(控制层)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>

（客户端）Activity 列表页面设计及实现

页面样式基于bootstrap(一个前端框架，官网为bootcss.com)进行实现，首先在项目工程中添加静态资源

创建activity.html页面，引入bootstrap,jquery等相关资源

在activity.html页面中添加呈现Activity数据的html元素：

title	Category	StartTime	EndTime	State	Operation
数据正在加载中.......

向服务端发送异步请求获取活动信息并更新到页面上

<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>${item.title}
                    <td>${item.category}
                    <td>${item.startTime}
                    <td>${item.endTime}
                    <td>${item.state==1?'有效状态':'已结束'}
                    <td>${item.createdTime}
                `        
            )
            
        });
        
    }
    
    
    
    //放在body的最底端可以直接调用    findActivitys();
    
    //如果放在head中就得用这种方法：
    $(function(){
        findActivitys();
    })
</script>