Design and implementation of activity module in springboot project (query)

Time:2020-11-24

1. Database initialization

Step 1: log in to MySQL.

mysql –uroot –proot

Step 2: set the console encoding mode.

set names utf8;
Step 3: Execution activity.sql File (remember not to open the file and copy it to the MySQL client).
source d:/activity.sql

2. Create project:

1. Add dependency:

MySQL、JDBC API、MyBatis Framework、Thymeleaf、Spring Web、Spring Boot DevTools、Lombok、Spring Boot Actuator;

2. Content of project configuration file:

#server
                        server.port=80
                        server.servlet.context-path=/

                        #spring datasource
                        spring.datasource.url=jdbc : MySQL: // database name? Servertimezone = GMT% 2B8 & character encoding = 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 architecture design of the project:

Design and implementation of activity module in springboot project (query)

Activity module business query:

Query all activity information from the database, and then render it on the page (based on JS mode)
Design and implementation of activity module in springboot project (query)

Business timing analysis

Design and implementation of activity module in springboot project (query)

Design and implementation of POJO class

Create an activity class and encapsulate the property values obtained from the database based on this type of object. The code is as follows:

package com.cy.pj.activity.pojo;

import java.util.Date;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;

//@Data annotations can be created automatically without handwritten set and get methods
//@Data is a Lombok annotation. The Lombok plug-in needs to be installed in the IDE environment,
//Add Lombok dependency to the project. If not, you can add set / get related methods yourself
@Data
public class Activity {
    //The @ jsonformat is used to tell spring MVC to convert JSON to convert the date according to the specified format
    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 interface method and mapping definition

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;

/**Define activity module data layer interface and query method
*/
@Mapper
public interface ActivityDao {
    //Because the SQL statement is simple, it is not encapsulated in the XML file, and it is queried by annotation directly~~~~
    @Select("select * from tb_activity order by createdTime desc")
    List<Activity> findActivitys();
}

Definition and implementation of (business layer) service interface method

package com.cy.pj.activity.service;

import java.util.List;

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

//Define the service interface and get the activity information
public interface ActivityService {
    List<Activity> findActivitys();
    
}
Service interface implementation class
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;

//Define the service interface implementation class and override the interface method
@Service
public class ActivitySereviceImpl implements ActivityService {

    @Autowired
    private ActivityDao activityDao;
    @Override
    public List<Activity> findActivitys() {
        return activityDao.findActivitys();
    }
}

Definition and implementation of controller method

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";
    }
    
    
/**Query all activity information*/

    @RequestMapping("doFindActivitys")
    @ResponseBody
    public List<Activity> doFindActivitys(){
        return activityService.findActivitys();
    }

Design and implementation of (client) activity list page

The page style is based on bootstrap (a front-end framework, the official website is bootcss.com )First, add static resources to the project project
Design and implementation of activity module in springboot project (query)

establish activity.html Page, introduce bootstrap, jQuery and other related resources
Design and implementation of activity module in springboot project (query)
stay activity.html Add HTML elements to the page to render activity data:

<table class="table">
    <thead>
        < tr > <! -- set the header of the table structure -- >
            <th>title</th>
            <th>Category</th>
            <th>StartTime</th>
            <th>EndTime</th>
            <th>State</th>
            <th>Operation</th>
        </tr>
    </thead>
    <! -- set table content -- >
    <tbody id="tbodyId">
        < tr > < TD colSpan = "6" > data is loading.... < / td > < / TR >
    </tbody>
</table>
Send asynchronous request to the server to get the activity information and update it to the page
<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. Iterate the result and fill in the tbody location with the result content
        Var tbody = $("tbodyid"); // native writing method: document.querySelector ("#tbodyId")
        tbody.empty (); // clear the original content of tbody tbody.innerHTML= "";
        //2. Iterate the result and append the activity information to the tbody    
        result.forEach (item = > {// here, item is a variable, representing an element in the array    
            //Add the query data to 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? 'valid status':' ended '}</td>
                    <td>${item.createdTime}</td>
                </tr>`        
            )
            
        });
        
    }
    
    
    
    //You can call findactivities () directly at the bottom of the body;
    
    //If you put it in the head, you have to use this method:
    $(function(){
        findActivitys();
    })
</script>

Start Tomcat server for access test analysis

Start the project, enter the access address of the activity page in the browser, and display the activity information:
Design and implementation of activity module in springboot project (query)