SpringBoot实现后台数据的前端呈现

一.环境搭建

一.tomcat安装

new Product------>

二.springboot项目所需maven依赖pom.xml

<?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.doit18</groupId>
  <artifactId>yqf</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>yqf Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.3.RELEASE</version>
    <relativePath />
  </parent>
  <!--添加springboot项目为 父工程-->

  <dependencies>
    <!--springmvc的依赖  wen开发的内容  tomcat内置的-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!--修改完代码以后会自动编译和重启-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <optional>true</optional>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>

    <!--添加CH的依赖-->
    <dependency>
      <groupId>ru.yandex.clickhouse</groupId>
      <artifactId>clickhouse-jdbc</artifactId>
      <version>0.1.54</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.10</version>
    </dependency>

    <!-- mysql的驱动包-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.47</version>
    </dependency>

    <!--mybatis  操作数据库的框架-->
    <dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>1.1.1</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.58</version>
    </dependency>

  </dependencies>

  <build>
    <finalName>yqf</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

三.springboot项目搭建

导入依赖后 通过各种注解搭建项目

二.项目架构

1.servlet项目结构

2.springboot项目结构

三.实现步骤

1.前端ajax代码实现

<script>
                        $("#notify_state1").change(function () {
                            //alert(this.value)
                            $.ajax({
                                url: "getLdData",	//要请求的url
                                data: {"name": this.value},	//向后台发送的数据 JSON格式
                                success: function (ldBean2Show) {	//接收请求成功后执行该方法,并接收后台传回的数据(ldBean2Show)
                                    var myChart = echarts.init(document.getElementById('ld'));	//显示图表步骤1
                                    option = {	//图表 Echarts官网一大堆
                                        title: {
                                            text: '漏斗图',
                                            subtext: '纯属虚构'
                                        },
                                        tooltip: {
                                            trigger: 'item',
                                            formatter: "{a} <br/>{b} : {c}%"
                                        },
                                        toolbox: {
                                            feature: {
                                                dataView: {readOnly: false},
                                                restore: {},
                                                saveAsImage: {}
                                            }
                                        },
                                        legend: {
                                            //data: ['展现', '点击', '访问', '咨询', '订单']
                                            data:ldBean2Show.steps //后台传回的数据 注意格式要与该图表的示例相同
                                        },

                                        series: [
                                            {
                                                name: '漏斗图',
                                                type: 'funnel',
                                                left: '10%',
                                                top: 60,
                                                //x2: 80,
                                                bottom: 60,
                                                width: '80%',
                                                // height: {totalHeight} - y - y2,
                                                min: 0,
                                                max: 10000,
                                                minSize: '0%',
                                                maxSize: '100%',
                                                sort: 'descending',
                                                gap: 2,
                                                label: {
                                                    show: true,
                                                    position: 'inside'
                                                },
                                                labelLine: {
                                                    length: 10,
                                                    lineStyle: {
                                                        width: 1,
                                                        type: 'solid'
                                                    }
                                                },
                                                itemStyle: {
                                                    borderColor: '#ff9296',
                                                    borderWidth: 1
                                                },
                                                emphasis: {
                                                    label: {
                                                        fontSize: 20
                                                    }
                                                },
                                                data: ldBean2Show.lddatas   //后台传回的数据 注意格式要与该图表的示例相同
                                                    // [
                                                    // {value: 60, name: '访问'},
                                                    // {value: 40, name: '咨询'},
                                                    // {value: 20, name: '订单'},
                                                    // {value: 80, name: '点击'},
                                                    // {value: 100, name: '展现'}
                                                    // ]
                                            }
                                        ]
                                    };
                                    myChart.setOption(option);  //显示图标步骤2
                                }
                            })
                        })

                    </script>

2.控制层示例

@Controller
public class LdController {

    @Autowired		//注入服务层对象
    LdService ldService;
    @RequestMapping("/addLd")		//若与前端ajax传来的url相匹配 则执行该方法
    @ResponseBody
    public void addLd(LdBean ldBean){
        ldService.addLd(ldBean);
    }

    @RequestMapping("/getFunnelsName")
    @ResponseBody
    public List<String> getLdNames(){
       return ldService.getLdNames();
    }
    
    @RequestMapping("/getLdData")
    @ResponseBody
    public LdBean2Show getLdData(String name){
        return ldService.getLdData(name);
    }
}

3.服务层示例

@Service
public class LdServiceImpl implements LdService {	//接口需要自己创建
    @Autowired		//注入dao层对象
    LdMapper ldMapper;

    @Override
    public LdBean2Sql addLd(LdBean ldBean) {	//业务处理逻辑代码
        System.out.println(ldBean);
        //接收到前端传来的漏斗信息
        //将漏斗信息转换为LdBean2Sql格式
        LdBean2Sql ld2s = new LdBean2Sql();
        ld2s.setName(ldBean.getName()[0]);
        String[] events = ldBean.getEvent();
        StringBuilder sb = new StringBuilder();
        for (String event : events) {
            sb.append(event).append("-");
        }
        String s = sb.deleteCharAt(sb.length() - 1).toString();
        ld2s.setStep(s);

        return ldMapper.addLd(ld2s);
    }

    @Override
    public List<String> getLdNames() {
        return ldMapper.getLdNames();
    }

    @Override
    public LdBean2Show getLdData(String name) {
        LdBean2Show ldBean2Show = new LdBean2Show();
        //获取steps
        String steps = ldMapper.getLdsteps(name);

        //将字符串按照'-'切割
        String[] s = steps.split("-");
        ldBean2Show.setSteps(s);
        //获取datas
        List<Vn> list = new ArrayList<>();
        //拼接Vn的list
        for (String step : ldBean2Show.getSteps()) {
            Vn vn = new Vn();
            vn.setName(step);
            int ldData = ldMapper.getLdDatas(step);
            vn.setValue(ldData);
            list.add(vn);
        }
        ldBean2Show.setLddatas(list);
        return ldBean2Show;
    }
}

4.dao层

@Mapper
public interface LdMapper {

    @Select("insert into tb_funnels(name,step) values (#{name},#{step})")			//#{}为变量,变量名需和接收来的bean成员变量名一致
    LdBean2Sql addLd(LdBean2Sql ldBean2Sql);//参数列表用于接收服务层传来的数据

    @Select("select name from tb_funnels")
    List<String> getLdNames();

    @Select("select step from tb_funnels where name=#{name}")
    String getLdsteps(String name);

    @Select("select ${value} from tb_test_ld_2")//若服务层传来的数据是常量,不能用#{}接收,要用${value}接收
    int getLdDatas(String name);
}

5.其他

配置文件:
application.yml:

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    click:
      driverClassName: ru.yandex.clickhouse.ClickHouseDriver
      url: jdbc:clickhouse://linux01:8123/default
      initialSize: 10
      maxActive: 100
      minIdle: 10
      maxWait: 6000

application.properties

spring.datasource.url=jdbc:mysql://localhost:3306/db_demo1?useSSL=false&characterEncoding=UTF-8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driverClassName=com.mysql.jdbc.Driver

DruidConfig

package com._doit18.config;

import com.alibaba.druid.pool.DruidDataSource;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import javax.annotation.Resource;
import javax.sql.DataSource;

/**
 * 配置操作数据的数据源对象
 * 自定义数据库连接池
 *   1 读取配置文件的类     自动的读取配置数据 封装到对应的属性上
 *   2 将默认的dataSource替换掉
 */
@Configuration
public class DruidConfig {
    @Resource
    private JdbcParamConfig jdbcParamConfig ; // 配置参数
    @Bean
    public DataSource dataSource() {
        DruidDataSource datasource = new DruidDataSource();
        datasource.setUrl(jdbcParamConfig.getUrl());
        datasource.setDriverClassName(jdbcParamConfig.getDriverClassName());
        datasource.setInitialSize(jdbcParamConfig.getInitialSize());
        datasource.setMinIdle(jdbcParamConfig.getMinIdle());
        datasource.setMaxActive(jdbcParamConfig.getMaxActive());
        datasource.setMaxWait(jdbcParamConfig.getMaxWait());
        return datasource;
    }
}

JdbcParamConfig

package com._doit18.config;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

/**
 * 读取配置文件中数据源的参数
 * @ComponentScan
 *
 */
@Component
@ConfigurationProperties(prefix = "spring.datasource.click")
public class JdbcParamConfig {
    private String driverClassName ;
    private String url ;
    private Integer initialSize ;
    private Integer maxActive ;
    private Integer minIdle ;
    private Integer maxWait ;

    public String getDriverClassName() {
        return driverClassName;
    }

    public void setDriverClassName(String driverClassName) {
        this.driverClassName = driverClassName;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public Integer getInitialSize() {
        return initialSize;
    }

    public void setInitialSize(Integer initialSize) {
        this.initialSize = initialSize;
    }

    public Integer getMaxActive() {
        return maxActive;
    }

    public void setMaxActive(Integer maxActive) {
        this.maxActive = maxActive;
    }

    public Integer getMinIdle() {
        return minIdle;
    }

    public void setMinIdle(Integer minIdle) {
        this.minIdle = minIdle;
    }

    public Integer getMaxWait() {
        return maxWait;
    }

    public void setMaxWait(Integer maxWait) {
        this.maxWait = maxWait;
    }
}

四.Q&A