springboot+mybatis自动生成插件+echars小练习

概述

通过ajax异步从后台读取数据，用`eachars`在thymeleaf当中显示

建表用的是navicat12，支持正版，软件网盘地址：(https://pan.baidu.com/s/1brJFVrdDdkP3XwkWND3-mA)

1、建表

2、建立一个springboot项目

• 导入依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.0</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <!-- mybatis generator 自动生成代码插件 -->
            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.3.5</version>
                <configuration>
                    <overwrite>false</overwrite>
                    <verbose>true</verbose>
                </configuration>
            </plugin>

        </plugins>
    </build>

• yml

server:
  port: 8080
spring:
  #配置数据库
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql:///test
    username: root
    password: root
  thymeleaf:
    cache: false
    prefix: classpath:/templates/
    suffix: .html
    encoding: utf-8
    mode: HTML5

mybatis:
  mapper-locations: classpath:mapping/*.xml  #resource下建立mapping文件夹
  type-aliases-package: com.example.demo2.model

• 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>
    <!-- 数据库驱动:选择你的本地硬盘上面的数据库驱动包-->
    <classPathEntry  location="C:\Users\jw131\.m2\repository\mysql\mysql-connector-java\5.1.46\mysql-connector-java-5.1.46.jar"/>
    <context id="DB2Tables"  targetRuntime="MyBatis3">
        <commentGenerator>
            <property name="suppressDate" value="true"/>
            <!-- 是否去除自动生成的注释 true：是 ： false:否 -->
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>
        <!--数据库链接URL，用户名、密码 -->
        <jdbcConnection driverClass="com.mysql.jdbc.Driver" connectionURL="jdbc:mysql://127.0.0.1/test" userId="root" password="root">
        </jdbcConnection>
        <javaTypeResolver>
            <property name="forceBigDecimals" value="false"/>
        </javaTypeResolver>
        <!-- 生成模型的包名和位置-->
        <javaModelGenerator targetPackage="com.example.demo2.model" targetProject="src/main/java">
            <property name="enableSubPackages" value="true"/>
            <property name="trimStrings" value="true"/>
        </javaModelGenerator>
        <!-- 生成映射文件的包名和位置-->
        <sqlMapGenerator targetPackage="mapping" targetProject="src/main/resources">
            <property name="enableSubPackages" value="true"/>
        </sqlMapGenerator>
        <!-- 生成DAO的包名和位置-->
        <javaClientGenerator type="XMLMAPPER" targetPackage="com.example.demo2.mapper" targetProject="src/main/java">
            <property name="enableSubPackages" value="true"/>
        </javaClientGenerator>
        <!-- 要生成的表 tableName是数据库中的表名或视图名 domainObjectName是实体类名-->
        <table tableName="product" domainObjectName="Product" enableCountByExample="false" enableUpdateByExample="false" enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false"></table>
    </context>
</generatorConfiguration>

• 启动类添加mapscan扫描

package com.example.demo2;

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

@SpringBootApplication
@MapperScan("com.example.demo2.mapper")
public class Demo2Application {

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

}

• 运行插件，生成接口、xml、实体类
  

3、编写controller

数据返回格式：

4、html编

每隔1秒访问一下数据库，动态刷新

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script th:src="@{/js/jquery3.4.1.js}"></script>
    <script th:src="@{/js/echarts.js}"></script>
</head>
<body>
<div id="main" style="width: 900px;height: 600px ;border: 1px solid black ;">
</div>

<script type="text/javascript">
    var maChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
            text: 'eCharts入门实例',
            subtext: '学习哈哈哈哈哈',
            left: 90,
            borderColor: 'red',
            borderWidth: 2
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show: true
                }
            }
        },
        //图例，表的顶部显示
        legend: {
            data: ['销量']
        },
        //x轴
        xAxis: {
            data: []

        },
        yAxis: {},
        //数据
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]

    };
    maChart.setOption(option)
    maChart.showLoading()
    setInterval(() => {
        $.post("http://localhost:8080/rest/getlist", res => {
            var date = res.data;
            let pin = [];
            var sum = [];
            date.forEach(d => {
                pin.push(d.name)
                sum.push(d.sums)
            })
            maChart.hideLoading()
            maChart.setOption({
                xAxis: {data: pin},
                series: [
                    {
                        name: '销量',
                        data: sum
                    }
                ]
            })
        })
    }, 1000)

</script>
</body>
</html>

效果图：