springboot整合Beetl、BeetlSql實現ajax分頁

時間 2020-08-11

標籤 springboot 整合 beetl beetlsql 實現 ajax 分頁欄目 Spring 简体版

原文原文鏈接

Beetl是Bee Template Language的縮寫，它毫不是簡單的另一種模板引擎，而是新一代的模板引擎，它功能強大，性能良好，超過當前流行的模板引擎。並且還易學易用。javascript

BeetSql是一個全功能DAO工具，同時具備Hibernate 優勢 & Mybatis優勢功能，適用於認可以SQL爲中心，同時又需求工具能自動能生成大量經常使用的SQL的應用。html

下面將實現其與springboot的整合，完成一個簡單的分頁功能：java

一、新建一個springboot項目取名springboot-beetlsqlmysql

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.carry.beetl</groupId>
    <artifactId>springboot-beetlsql</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>springboot-beetlsql</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.3.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <ibeetl.version>1.1.40.RELEASE</ibeetl.version>
        <mysql.version>6.0.5</mysql.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.ibeetl</groupId>
            <artifactId>beetl-framework-starter</artifactId>
            <version>${ibeetl.version}</version>
        </dependency>
        <dependency>
            <groupId>com.zaxxer</groupId>
            <artifactId>HikariCP</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>


</project>

pom.xml

二、整合BeetSql的相關配置修改application.properties文件，添加DataSourceConfig文件jquery

#mysql數據庫鏈接配置
spring.datasource.url=jdbc:mysql://192.168.68.110:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=123456Abc!
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

#beetelsql的配置
beetlsql.basePackage=com.carry.beetl.dao
beetl-beetlsql.dev=true

#熱部署的配置
spring.devtools.restart.enabled=true

application.properties

package com.carry.beetl.config;

import com.zaxxer.hikari.HikariDataSource;
import org.beetl.sql.ext.spring4.BeetlSqlDataSource;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.env.Environment;

import javax.sql.DataSource;

@Configuration
public class DataSourceConfig {
    
    @Bean(name = "dataSource")
    public DataSource dataSource(Environment env) {
        HikariDataSource ds = new HikariDataSource();
        ds.setJdbcUrl(env.getProperty("spring.datasource.url"));
        ds.setUsername(env.getProperty("spring.datasource.username"));
        ds.setPassword(env.getProperty("spring.datasource.password"));
        ds.setDriverClassName(env.getProperty("spring.datasource.driver-class-name"));
        return ds;
    }

    @Bean
    public BeetlSqlDataSource beetlSqlDataSource(@Qualifier("dataSource") DataSource dataSource) {
        BeetlSqlDataSource source = new BeetlSqlDataSource();
        source.setMasterSource(dataSource);
        return source;
    }
}

DataSourceConfig

三、整合Beetl相關配置web

在項目啓動文件SpringbootBeetlsqlApplication中加入如下內容：ajax

@Bean(initMethod = "init", name = "beetlConfig")
    public BeetlGroupUtilConfiguration getBeetlGroupUtilConfiguration() {
        BeetlGroupUtilConfiguration beetlGroupUtilConfiguration = new BeetlGroupUtilConfiguration();
        ResourcePatternResolver patternResolver = ResourcePatternUtils.getResourcePatternResolver(new DefaultResourceLoader());
        try {
            // WebAppResourceLoader 配置root路徑是關鍵
            WebAppResourceLoader webAppResourceLoader =
                    new WebAppResourceLoader(patternResolver.getResource("classpath:/").getFile().getPath());
            beetlGroupUtilConfiguration.setResourceLoader(webAppResourceLoader);
        } catch (IOException e) {
            e.printStackTrace();
        }
        //讀取配置文件信息
        return beetlGroupUtilConfiguration;
    }

    @Bean(name = "beetlViewResolver")
    public BeetlSpringViewResolver getBeetlSpringViewResolver(@Qualifier("beetlConfig") BeetlGroupUtilConfiguration beetlGroupUtilConfiguration) {
        BeetlSpringViewResolver beetlSpringViewResolver = new BeetlSpringViewResolver();
        beetlSpringViewResolver.setPrefix("templates/");//配置頁面路徑前綴
        beetlSpringViewResolver.setContentType("text/html;charset=UTF-8");
        beetlSpringViewResolver.setOrder(0);
        beetlSpringViewResolver.setConfig(beetlGroupUtilConfiguration);
        return beetlSpringViewResolver;
    }

View Code

在resources目錄新建文件beetl.propertiesspring

#配置模板引擎,如不配置可能會致使頁面再次訪問時報錯
ENGINE=org.beetl.core.engine.DefaultTemplateEngine
#開始定界符
DELIMITER_STATEMENT_START=@
#結束定界符
DELIMITER_STATEMENT_END=

beetl.properties

四、如今能夠動手寫代碼了sql

新建實體類User數據庫

package com.carry.beetl.entity;
 
import java.io.Serializable;
import java.util.Date;
 
public class User implements Serializable {
    
    private static final long serialVersionUID = 1L;
    
    private Integer id;
    private Integer departmentId;
    private String name;
    private Date createTime;
 
    public Integer getId() {
        return id;
    }
 
    public void setId(Integer id) {
        this.id = id;
    }
 
    public Integer getDepartmentId() {
        return departmentId;
    }
 
    public void setDepartmentId(Integer departmentId) {
        this.departmentId = departmentId;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
    public Date getCreateTime() {
        return createTime;
    }
 
    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }
}

View Code

對應的表user的DDL

CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(45) COLLATE utf8_bin DEFAULT NULL COMMENT '名稱',
  `department_id` int(11) DEFAULT NULL,
  `create_time` date DEFAULT NULL COMMENT '建立時間',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

View Code

新建數據訪問接口UserDao繼承BaseMapper（BaseMapper中有不少內置的基礎實現，具體能夠查看官方文檔）

package com.carry.beetl.dao;

import java.util.List;

import org.beetl.sql.core.mapper.BaseMapper;

import com.carry.beetl.entity.User;

public interface UserDao extends BaseMapper<User> {
    
}

View Code

新建控制IndexController，因爲功能簡單直接在controller中注入dao無需service

package com.carry.beetl.controller;

import javax.servlet.http.HttpServletRequest;

import org.beetl.sql.core.engine.PageQuery;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.carry.beetl.dao.UserDao;
import com.carry.beetl.entity.User;

@Controller
public class IndexController {
    
    @Autowired
    UserDao userDao;

    @RequestMapping("/index.html")
    public String index(HttpServletRequest req) {
        queryPage(req, 1);
        return "index.html";
    }
    
    @RequestMapping("/indexTopData.html")
    public String top10(HttpServletRequest req, Integer pageNo) {
        if(pageNo == null) {
            pageNo = 1;
        }
        queryPage(req, pageNo);
        return "/index.html#topData";
    }

    private void queryPage(HttpServletRequest req, int pageNo) {
        PageQuery<User> query = new PageQuery<User>();
        query.setPageNumber(pageNo);
        query.setPageSize(10);
        userDao.templatePage(query);
        req.setAttribute("users", query.getList());
        req.setAttribute("pageNo", query.getPageNumber());
        req.setAttribute("totalPage", query.getTotalPage());
        req.setAttribute("totalRow", query.getTotalRow());
    }
}

View Code

最後在templates目錄裏新建咱們的頁面index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="${ctxPath}/js/jquery.min.js"></script>
<script type="text/javascript">
    function prev() {
        var pageNo = parseInt($("#pageNo").text());
        if (pageNo <= 1) {
            pageNo = 1;
        } else {
            pageNo -= 1;
        }
        $("#topData").load("/indexTopData.html?pageNo=" + pageNo)
    }

    function next() {
        var pageNo = parseInt($("#pageNo").text());
        var totalPage = parseInt($("#totalPage").text());
        if (pageNo >= totalPage) {
            pageNo = totalPage;
        } else {
            pageNo += 1;
        }
        $("#topData").load("/indexTopData.html?pageNo=" + pageNo)
    }
</script>
</head>
<body>
    <div style="width: 600px;; margin: 0 auto;">
        <div>
            <H1>beetl+beetlSql ajax測試</H1>
        </div>
        <div id="topData">
            @#ajax topData: {
                <table style="border-collapse: collapse;text-align: center;">
                    <tr>
                        <th width=100>序號</th>
                        <th width=100>ID</th>
                        <th width=100>姓名</th>
                        <th width=100>建立日期</th>
                    </tr>
                    @for(user in users){
                    <tr 
                        @if(userLP.odd){
                            style = "background: red;"
                        @}else{
                            style = "background: yellow;"
                        @}
                    >
                        <td>${userLP.index}</td>
                        <td>${user.id}</td>
                        <td>${user.name}</td>
                        <td>${user.createTime, dateFormat="yyyy-MM-dd"}</td>
                    </tr>
                    @}
                </table>
                共有${totalRow!0}條記錄分<span id="totalPage">${totalPage!0}</span>頁&nbsp;&nbsp;
                @if(pageNo == 1){ 
                    <span>上一頁</span>&nbsp;&nbsp; 
                @}else{ 
                    <a href="javascript: prev();">上一頁</a>&nbsp;&nbsp; 
                @} 
                <span id="pageNo">${pageNo!1}</span>&nbsp;&nbsp;
                @if(pageNo == totalPage){ 
                    <span>下一頁</span> 
                @}else{ 
                    <a href="javascript: next();">下一頁</a> 
                @} 
            @}
        </div>
    </div>
</body>
</html>