编写热词展示项目

目标: 我们利用 idea 创建一个 spring boot 项目来访问我们的 hive 数据库，并展示数据到网页上

启动 hive 数据库服务

请确保 master 上的 hiveserver 已启动

hiveserver2

创建 spring boot 项目

编辑 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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.11</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>SpringServer</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>SpringServer</name>
    <description>SpringServer</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- 添加如下依赖到 pom.xml 中 -->
        <dependency>
            <groupId>org.apache.hive</groupId>
            <artifactId>hive-jdbc</artifactId>
            <version>3.1.2</version>
            <exclusions>
                <exclusion>
                    <groupId>ch.qos.logback</groupId>
                    <artifactId>logback-classic</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.apache.logging.log4j</groupId>
                    <artifactId>log4j-slf4j-impl</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.slf4j</groupId>
                    <artifactId>slf4j-log4j12</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.eclipse.jetty</groupId>
                    <artifactId>jetty-runner</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!-- 复制代码到这里结束 -->
    </dependencies>

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

配置好后同步 maven

编写代码

编写 HiveConfig

创建一个 config 包，然后在包中创建 HiveConfig

package com.example.springserver.config;

import org.apache.commons.dbcp.BasicDataSource;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.jdbc.core.JdbcTemplate;

import javax.sql.DataSource;

@Configuration
public class HiveConfig {
    @Bean
    public BasicDataSource hiveDataSource() {
        // url 的参数需要对应改成 hive 数据库的地址和端口，还有连接的数据库名称
        String url = "jdbc:hive2://master:10001/hive;transportMode=http;httpPath=cliservice";
        String username = "";
        String password = "";

        BasicDataSource dataSource = new BasicDataSource();
        dataSource.setDriverClassName("org.apache.hive.jdbc.HiveDriver");
        dataSource.setUrl(url);
        dataSource.setUsername(username);
        dataSource.setPassword(password);

        return dataSource;
    }

    @Bean
    public JdbcTemplate hiveJdbcTemplate(DataSource hiveDataSource) {
        return new JdbcTemplate(hiveDataSource);
    }
}

编写 ResultController

创建 controller 包，在里面创建 ResultController

package com.example.springserver.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.sql.*;
import java.util.List;
import java.util.Map;

@RestController
public class ResultController {

    @Autowired
    private JdbcTemplate hiveJdbcTemplate;

    @GetMapping("/query")
    @ResponseBody
    public List<Map<String, Object>> query() throws SQLException {
        String sql = "SELECT * FROM result";
        return hiveJdbcTemplate.queryForList(sql);
    }
}

在 resources/static 中放入 js 依赖

编写 index.html 页面

在 resources/static 下创建 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            overflow: hidden;
        }

        body {
            margin: 0;
        }

        #root {
            height: 100vh;
        }
    </style>
</head>
<body>
<div id="root"></div>
</body>
<script src="js/echarts.min.js"></script>
<script src="js/echarts-wordcloud.min.js"></script>
<script>

    var chart = echarts.init(document.getElementById('root'));

    var option = {
        tooltip: {},
        series: [{
            type: 'wordCloud',
            gridSize: 2,
            sizeRange: [12, 120],
            rotationRange: [-90, 90],
            // rotationRange: [0, 360],
            rotationStep: 1,
            // shape: 'pentagon',
            // shape: 'cardioid',
            // shape: 'diamond',
            // shape: 'triangle-forward',
            // shape: 'triangle',
            shape: 'circle',
            // maskImage: maskImage,
            width: 600,
            height: 600,
            drawOutOfBound: true,
            textStyle: {
                color: function () {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                textStyle: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: [
                {
                    name: 'Sam S Club',
                    value: 10000,
                    textStyle: {
                        color: 'black'
                    },
                    emphasis: {
                        textStyle: {
                            color: 'red'
                        }
                    }
                },
                {
                    name: 'Macys',
                    value: 6181
                },
                {
                    name: 'Amy Schumer',
                    value: 4386
                },
                {
                    name: 'Jurassic World',
                    value: 4055
                },
                {
                    name: 'Charter Communications',
                    value: 2467
                },
                {
                    name: 'Chick Fil A',
                    value: 2244
                },
                {
                    name: 'Planet Fitness',
                    value: 1898
                },
                {
                    name: 'Pitch Perfect',
                    value: 1484
                },
                {
                    name: 'Express',
                    value: 1112
                },
                {
                    name: 'Home',
                    value: 965
                },
                {
                    name: 'Johnny Depp',
                    value: 847
                },
                {
                    name: 'Lena Dunham',
                    value: 582
                },
                {
                    name: 'Lewis Hamilton',
                    value: 555
                },
                {
                    name: 'KXAN',
                    value: 550
                },
                {
                    name: 'Mary Ellen Mark',
                    value: 462
                },
                {
                    name: 'Farrah Abraham',
                    value: 366
                },
                {
                    name: 'Rita Ora',
                    value: 360
                },
                {
                    name: 'Serena Williams',
                    value: 282
                },
                {
                    name: 'NCAA baseball tournament',
                    value: 273
                },
                {
                    name: 'Point Break',
                    value: 265
                }
            ]
        }]
    };

    chart.setOption(option);

    window.onresize = chart.resize;

    window.onload = () => {
        fetch('/query', {
            method: 'get',
        })
            .then(res => res.json())
            .then(data=>{
                // 格式化数据
                data = data.map(item=>({name: item['result.name'], value: item['result.count']}))
                console.log(data)
                option.series[0].data = data
                chart.setOption(option)
            })
    }

</script>
</html>

调整启动配置

按照上述配置然后确定即可

启动项目

启动成功后，默认可以访问本机的 8080 端口，例如: http://localhost:8080

最后页面会出现一个热词集，如图:

项目打包与部署

我们编写好的 spring boot 项目，可以部署到我们的服务器 master 上运行

打包

分别先后运行 mvn clean 和 mvn package 命令，如图:

运行完后得到 jar 包，如图:

上传 jar 包

将 SpringServer-0.0.1-SNAPSHOT.jar ，上传到 master 的 ~/jars 目录中

在 master 运行服务

java -jar ~/jars/SpringServer-0.0.1-SNAPSHOT.jar

shampoo6 / cjsf-20dsj1

编写热词展示项目

启动 hive 数据库服务

创建 spring boot 项目

编辑 pom.xml

编写代码

编写 HiveConfig

编写 ResultController

在 resources/static 中放入 js 依赖

编写 index.html 页面

调整启动配置

启动项目

项目打包与部署

打包

上传 jar 包

在 master 运行服务

简介

发行版

贡献者

近期动态

shampoo6 / cjsf-20dsj1 .gitee-modal { width: 500px !important; }

编写热词展示项目

启动 hive 数据库服务

创建 spring boot 项目

编辑 pom.xml

编写代码

编写 HiveConfig

编写 ResultController

在 resources/static 中放入 js 依赖

编写 index.html 页面

调整启动配置

启动项目

项目打包与部署

打包

上传 jar 包

在 master 运行服务

简介

发行版

贡献者

近期动态

搜索帮助

shampoo6 / cjsf-20dsj1