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

微信扫一扫,分享到朋友圈

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

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>
<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页面的访问地址,呈现活动信息:

微信扫一扫,分享到朋友圈

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

喜讯!厦门中拓购物注册局携手阿里云,打造新购物模式

上一篇

币安智能链全速前进,为DeFi生态安全发展保驾护航

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友