springboot+thymeleaf+echarts（详细教程）前后端简单demo

最新推荐文章于 2024-08-21 15:17:44 发布

谁喝了我的幽兰拿铁

最新推荐文章于 2024-08-21 15:17:44 发布

阅读量3.8k

点赞数 6

文章标签： echarts spring boot java

本文链接：https://blog.csdn.net/yaoyulan21/article/details/114401441

版权

2.Group,Artifact可任意修改， Java Version为自己相应的版本

1.1 再pom.xml文件里引入依赖 spring-boot-starter-thymeleaf 和 nekohtml 这两个依赖

1.2 在 application.yml 中配置 Thymeleaf

2.整合 Druid

2.1 在 pom.xml 文件中引入 druid-spring-boot-starter 依赖

2.2 引入数据库连接依赖

2.3 修改自己的ip:port，和端口，以及username: root用户名和密码 password

3.整合 tk.mybatis

3.1 在 pom.xml 中引入 mapper-spring-boot-starter 依赖，该依赖会自动引入 MyBaits 相关依赖

3.2 配置 application.yml

3.3 在启动类的同一级建一个包tk.mybatis，在建一个接口MyMapper

4.整合 PageHelper 分页插件

5.自动生成代码插件 generator

5.1 在pom.xm 添加plugin

5.2 在resources下建一个包 generator ,新建一个generatorConfig.xml，打箭头得地方改成自己的

5.3 双击mybatis-generator:generate 自动生成实体类、DAO、XML 配置文件

三、测试，操作数据库

1.测试

2.新建一个demo1.html

2.1 建一个controller包，在包里建一个StudentController

1.3 thymeleaf 引入ECharts和JQuery的js

3.1 StudentController

3.2 demo2.html

3.3

总结

前言

用thymleaf做模版引擎，druid做数据库连接池，tk.mybatis做持久层，tk.mybatis 是在 MyBatis 框架的基础上提供了很多工具，让开发更加高效

一、创建项目

1.新建一个springboot项目

2.Group,Artifact可任意修改， Java Version为自己相应的版本

3.勾选需要的依赖

4.选择存放项目的位置

二、整合

把application.properties改application.yml

1.整合thymeleaf

1.1 再pom.xml文件里引入依赖 spring-boot-starter-thymeleaf 和 nekohtml 这两个依赖

spring-boot-starter-thymeleaf：Thymeleaf 自动配置

nekohtml：允许使用非严格的 HTML 语法

        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
            <version>1.9.22</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

1.2 在 application.yml 中配置 Thymeleaf

spring:
  thymeleaf:
    cache: false # 开发时关闭缓存,不然没法看到实时页面
    mode: HTML # 用非严格的 HTML
    encoding: UTF-8
    servlet:
      content-type: text/html
  #设定静态文件路径，js,css等
  mvc:
    static-path-pattern: /static/**

2.整合 Druid

2.1 在 pom.xml 文件中引入 druid-spring-boot-starter 依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid-spring-boot-starter</artifactId>
    <version>1.1.10</version>
</dependency>

2.2 引入数据库连接依赖

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>

2.3 修改自己的ip:port，和端口，以及username: root用户名和密码 password

spring:
  datasource:
    druid:
      url: jdbc:mysql://ip:port/dbname?useUnicode=true&characterEncoding=utf-8&useSSL=false
      username: root
      password: 123456
      initial-size: 1
      min-idle: 1
      max-active: 20
      test-on-borrow: true
      # MySQL 8.x: com.mysql.cj.jdbc.Driver
      driver-class-name: com.mysql.jdbc.Driver

3.整合 tk.mybatis

tk.mybatis 是在 MyBatis 框架的基础上提供了很多工具，让开发更加高效，整合了mybatis所有操作，让我们更加专注于业务，不必花太多时间写SQL等。

3.1 在 pom.xml 中引入 mapper-spring-boot-starter 依赖，该依赖会自动引入 MyBaits 相关依赖

<dependency>
    <groupId>tk.mybatis</groupId>
    <artifactId>mapper-spring-boot-starter</artifactId>
    <version>2.0.2</version>
</dependency>

3.2 配置 application.yml

mybatis:
    type-aliases-package: 实体类的存放路径 
    mapper-locations: classpath:mapper/*.xml

3.3 在启动类的同一级建一个包tk.mybatis，在建一个接口MyMapper

主要作用是让 DAO 层的接口继承该接口，以达到使用 tk.mybatis 的目的

package tk.mybatis;
import tk.mybatis.mapper.common.Mapper;
import tk.mybatis.mapper.common.MySqlMapper;
/**
 * 自己的 Mapper
 * 特别注意，该接口不能被扫描到，否则会出错,所以放到另外一个包
 * <p>Title: MyMapper</p>
 * <p>Description: </p>
 */
public interface MyMapper<T> extends Mapper<T>, MySqlMapper<T> {
}

4.整合 PageHelper 分页插件

PageHelper 是 Mybatis 的分页插件，支持多数据库、多数据源。可以简化数据库的分页查询操作，整合过程也极其简单，只需引入依赖即可

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.5</version>
</dependency>

5.自动生成代码插件 generator

5.1 在pom.xm 添加plugin

<build>
    <plugins>
        <plugin>
            <groupId>org.mybatis.generator</groupId>
            <artifactId>mybatis-generator-maven-plugin</artifactId>
            <version>1.3.5</version>
            <configuration>
                <configurationFile>${basedir}/src/main/resources/generator/generatorConfig.xml</configurationFile>
                <overwrite>true</overwrite>
                <verbose>true</verbose>
            </configuration>
            <dependencies>
                <dependency>
                    <groupId>mysql</groupId>
                    <artifactId>mysql-connector-java</artifactId>
                    <version>${mysql.version}</version>
                </dependency>
                <dependency>
                    <groupId>tk.mybatis</groupId>
                    <artifactId>mapper</artifactId>
                    <version>3.4.4</version>
                </dependency>
            </dependencies>
        </plugin>
    </plugins>
</build>

5.2 在resources下建一个包 generator ,新建一个generatorConfig.xml，打箭头得地方改成自己的

generatorConfig.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
    <!-- 引入数据库连接配置 -->
    <properties resource="jdbc.properties"/>
    <context id="Mysql" targetRuntime="MyBatis3Simple" defaultModelType="flat">
        <property name="beginningDelimiter" value="`"/>
        <property name="endingDelimiter" value="`"/>

        <!-- 配置 tk.mybatis 插件 -->
        <plugin type="tk.mybatis.mapper.generator.MapperPlugin">
            <property name="mappers" value="tk.mybatis.MyMapper"/>
        </plugin>

        <!-- 配置数据库连接 -->
        <jdbcConnection
                driverClass="${jdbc.driverClass}"
                connectionURL="${jdbc.connectionURL}"
                userId="${jdbc.username}"
                password="${jdbc.password}">
        </jdbcConnection>

        <!-- 配置实体类存放路径 -->
        <javaModelGenerator targetPackage="com.blue.springbootthymeleaf.entity" targetProject="src/main/java"/>

        <!-- 配置 XML 存放路径 -->
        <sqlMapGenerator targetPackage="mapper" targetProject="src/main/resources"/>

        <!-- 配置 DAO 存放路径 -->
        <javaClientGenerator
                targetPackage="com.blue.springbootthymeleaf.mapper"
                targetProject="src/main/java"
                type="XMLMAPPER"/>

<!--         配置需要指定生成的数据库和表，% 代表所有表 -->
<!--        <table tableName="student">-->
<!--            &lt;!&ndash; mysql 配置 &ndash;&gt;-->
<!--            <generatedKey column="id" sqlStatement="Mysql" identity="true"/>-->
<!--        </table>-->
    </context>
</generatorConfiguration>

5.2.1 建jdbc.properties

# MySQL 8.x: com.mysql.cj.jdbc.Driver
jdbc.driverClass=com.mysql.jdbc.Driver
jdbc.connectionURL=jdbc:mysql://localhost:3306/test1?useUnicode=true&characterEncoding=utf-8&useSSL=false
jdbc.username=root
jdbc.password=123456

5.2.2 在启动类

@SpringBootApplication
@MapperScan(basePackages = "com.blue.springbootthymeleaf.mapper")

package com.blue.springbootthymeleaf;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import tk.mybatis.spring.annotation.MapperScan;

@SpringBootApplication
@MapperScan(basePackages = "com.blue.springbootthymeleaf.mapper")
public class SpringbootthymeleafApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootthymeleafApplication.class, args);
    }

}

5.3 双击mybatis-generator:generate 自动生成实体类、DAO、XML 配置文件

5.3.1 成功

5.3.2 可以打开mapper，entity这些包检查一下

三、测试，操作数据库

1.测试

测试类

package com.blue.springbootthymeleaf;

import com.blue.springbootthymeleaf.entity.Student;
import com.blue.springbootthymeleaf.mapper.StudentMapper;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.apache.ibatis.session.RowBounds;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.annotation.Rollback;
import org.springframework.test.context.junit4.SpringRunner;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;

import java.util.List;

/**
 * @RunWith，@SpringBootTest 两个注解是为了让测试运行spring环境，也就是当前项目配置
 * @Rollback    spring boot测试单元为了默认会事务回滚，这时候需要添加强制不回滚注解@rollbask(false)
 */
@RunWith(SpringRunner.class)
@SpringBootTest(classes = SpringbootthymeleafApplication.class)
@Transactional
@Rollback(value = false)
public class SpringbootthymeleafApplicationTests {
    /**
     * 注入数据查询接口
     */
    @Autowired
    private StudentMapper studentMapper;
    /**
     * 测试查询集合
     */
    @Test
    public void testSelect() {
        List<Student> students = studentMapper.selectAll();
        for (Student student : students) {
            System.out.println(student.getSname());
        }
    }
    /**
     * 测试分页查询
     */
    @Test
    public void testPage(){
        // PageHelper 使用非常简单，只需要设置页码和每页显示笔数即可
        PageHelper.startPage(0, 2);
        // 设置分页查询条件
        Example example = new Example(Student.class);
        PageInfo<Student> pageInfo = new PageInfo<>(studentMapper.selectByExample(example));

        // 获取查询结果
        List<Student> students = pageInfo.getList();
        for (Student student : students) {
            System.out.println(student.getSname());
        }
    }
    /**
     * 测试查询单个
     */
    @Test
    public void testSelectone() {
        Example example = new Example(Student.class);
        example.createCriteria().andEqualTo("sname","吴");
        Student student = studentMapper.selectOneByExample(example);
        System.out.println(student.getSname());
    }
    /**
     * 测试条件查询
     */
    @Test
    public void testSelectbytj1() {
        int start = 1;
        Example example = new Example(Student.class);
        example.setOrderByClause("sid limit "+start+","+5);//按id排序，每次查询5条
        example.createCriteria().andEqualTo("ssex","1");
        List<Student> students =studentMapper.selectByExample(example);
        for (Student student : students) {
            System.err.println(student.getSname());
        }
    }
    /**
     * 测试条件查询
     */
    @Test
    public void testSelectbytj2() {
        int start = 1;
        Example example = new Example(Student.class);
        example.createCriteria().andEqualTo("ssex","1");
        RowBounds rowBounds = new RowBounds(2, 2);
        List<Student> students = studentMapper.selectByExampleAndRowBounds(example,rowBounds);
        for (Student student : students) {
            System.err.println(student.getSname());
        }
    }

    /**
     * 测试插入数据
     */
    @Test
    public void testInsert() {
        // 构造一条测试数据
        Student student = new Student();
        student.setSid(17);
        student.setSname("呜呼拉黑");
        student.setSage(21);
        student.setSsex("1");
        // 插入数据
        studentMapper.insert(student);
    }

    /**
     * 测试删除数据
     */
    @Test
    public void testDelete() {
        // 构造条件，等同于 DELETE from student WHERE sname = '呜呼拉黑'
        Example example = new Example(Student.class);
        example.createCriteria().andEqualTo("sname", "呜呼拉黑");

        // 删除数据
        studentMapper.deleteByExample(example);
    }
    /**
     * 测试修改数据
     */
    @Test
    public void testUpdate() {
        // 构造条件
        Example example = new Example(Student.class);
        example.createCriteria().andEqualTo("sname", "呜呼拉嘿咻嘿咻");

        // 构造一条测试数据
        Student student = new Student();
        student.setSname("呜呼拉嘿");
        student.setSsex("1");
        student.setSage(23);
        // 修改数据
        studentMapper.updateByExample(student,example);
    }

}

2.新建一个demo1.html

第一第二行，修改 html 标签，引入 thymeleaf 引擎，这样才可以在其他标签里使用 th:* 语法

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

2.1 建一个controller包，在包里建一个StudentController

四、Html

1.下载ECharts和JQuery

1.1 方法一

下载js,放到resources/static/js里面

ECharts地址：http://echarts.baidu.com/download.html
JQuery地址：https://jquery.com/download/

在html里面

<!--  方法一  -->
 <!--    <script src="../static/js/echarts.min.js"></script>-->

1.2 方法二

直接上链接，不要下载，

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>

1.3 thymeleaf 引入ECharts和JQuery的js

这里注意一下，上面两种方法是正常的引入，如果加了thymeleaf ,用下面的分法

2.准备工作

2.1 新建demo2.html

2.2 下载一个示例

2.2.1 打开Examples - Apache ECharts

文档里有教程有手册，有兴趣的可以了解一下

2.2.2 选一个示例

下载示例或者复制代码，我复制粘贴到demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>

<body>
<div id = "main" style="width: 400px;height: 300px"> </div>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>

2.2.3 运行一下看能不能用