学生提交材料清单
1.Spark 项目运行结果截图
2.Hive数据库查询截图
3.接口测试截图
4.数据可视化网页截图
5.分别导出Spark项目，前后端项目的Zip（压缩包）
注意：
1.所有截图请统一粘贴到一个 Word 文件中，命名为：
提交截图_姓名_班级.docx；2.最终考生提交内容打包为一个总压缩包，命名格式如下：
张三-大数据高23-1班-大数据实训.rar
一、Hive 环境启动
【题目要求】
启动 Hadoop 分布式文件系统（HDFS）与 YARN；
启动 Hive Metastore 与 HiveServer2 服务。
# 启动 Hadoop 文件系统
start-dfs.sh
start-yarn.sh
# 启动 Hive 服务
hive --service metastore &
hive --service hiveserver2 &
二、Hive 数据库与数据导入
【题目要求】
创建数据库
salesdb；创建表
salesinfo，包含订单与分类字段；从本地路径
/opt/exam_spark/sales_data.csv加载数据；查询前 5 行，验证导入是否成功。
【参考代码】
DROP DATABASE IF EXISTS salesdb CASCADE;
CREATE DATABASE IF NOT EXISTS salesdb;
USE salesdb;
CREATE TABLE IF NOT EXISTS salesinfo (
order_id STRING,
customer_id STRING,
product_id STRING,
sale_date DATE,
quantity INT,
unit_price INT,
payment_method STRING,
region STRING,
product_name STRING,
category STRING
)
ROW FORMAT DELIMITED
FIELDS TERMINATED BY ','
STORED AS TEXTFILE
TBLPROPERTIES ("skip.header.line.count"="1");
LOAD DATA LOCAL INPATH '/opt/exam_spark/sales_data.csv' INTO TABLE salesinfo;
SELECT * FROM salesinfo LIMIT 5;
三、Spark SQL 产品分类统计分析
【题目要求】
创建
Spark项目SparkTask，并导入Pom.xml文件；创建 Scala 类
CategorySalesAnalysis，路径为：src/main/scala/org/example/CategorySalesAnalysis.scala使用 Spark SQL 分析 Hive 表
salesinfo：统计2022年各类产品的销售数量与销售额；
按销售额降序排序；
将结果保存至 Hive 表
category_sales_result。
【参考代码】
package org.example
import org.apache.spark.sql.SparkSession
object CategorySalesAnalysis {
def main(args: Array[String]): Unit = {
// 设置 Hadoop 用户（防止权限问题）
System.setProperty("HADOOP_USER_NAME", "root")
// 1. 初始化 SparkSession，开启 Hive 支持
val spark = SparkSession.builder()
.appName("CategorySalesStat")
.master("local[*]")
.enableHiveSupport()
.getOrCreate()
println("1.SparkSession 初始化成功，Hive 支持已开启")
// 2. 切换使用 salesdb 数据库
spark.sql("USE salesdb")
// 3. 执行分类销售分析 SQL
println("2. 正在统计 2022 年各类产品的订单数量、总销量与销售额...")
val result = spark.sql(
"""
|SELECT
| category,
| COUNT(*) AS order_count,
| SUM(quantity) AS total_quantity,
| ROUND(SUM(quantity * unit_price)/10000, 2) AS total_sales
|FROM salesinfo
|WHERE year(sale_date) = 2022 AND category IS NOT NULL AND TRIM(category) != ''
|GROUP BY category
|HAVING total_sales IS NOT NULL
|ORDER BY total_sales DESC
|""".stripMargin)
// 4. 展示结果
val count = result.count()
println(s"3.查询完成，共获得 $count 条分类销售记录：")
result.show(truncate = false)
// 5. 写入 Hive 表
println("4.正在写入 Hive 表：category_sales_result ...")
result.write
.mode("overwrite")
.saveAsTable("salesdb.category_sales_result")
println("5.分类销售结果已成功写入 Hive 表：salesdb.category_sales_result")
// 6. 释放资源
spark.stop()
println("6.SparkSession 已关闭，程序执行完毕。")
}
}
四、Spring Boot 接口开发 + Vue 可视化
4.1 后端接口开发
【题目要求】
创建
Spring Boot项目 ,名称为Backend，并导入Pom.xml文件；创建类
CategoryController，路径为：src/main/java/com/example/backend/controller/CategoryController.java使用 Spring Boot 创建接口
/category-sales，请求方式为GET；在接口中通过 JDBC 查询 Hive 表
category_sales_result；查询字段包括：
category,order_count,total_quantity,total_sales；将结果以 JSON 列表的形式返回，每条记录包含上述字段键值对。
【参考代码】
package com.example.backend.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.sql.*;
import java.util.*;
@RestController // 标注该类是一个 REST 控制器，返回 JSON 数据格式
public class CategoryController {
// 定义一个 GET 请求接口：访问路径为 /category-sales
@GetMapping("/category-sales")
public List<Map<String, Object>> getCategorySales() {
// 创建一个列表，用于存放返回的结果数据（每一行是一个 Map）
List<Map<String, Object>> result = new ArrayList<>();
try {
// 1. 加载 Hive JDBC 驱动（用于连接 HiveServer2）
Class.forName("org.apache.hive.jdbc.HiveDriver");
// 2. 创建数据库连接（地址为 HiveServer2 的 JDBC URL）
Connection conn = DriverManager.getConnection(
"jdbc:hive2://master:10000/salesdb",
"root",
"123456"
);
// 3. 创建 SQL 执行器
Statement stmt = conn.createStatement();
// 4. 执行查询语句：读取 Hive 表中的分类销售统计结果
ResultSet rs = stmt.executeQuery(
"SELECT category, order_count, total_quantity, total_sales FROM category_sales_result");
// 5. 遍历结果集，将每一行数据封装成 Map 并加入列表
while (rs.next()) {
Map<String, Object> map = new HashMap<>();
// 提取各字段并封装成键值对
map.put("category", rs.getString("category")); // 产品分类名
map.put("order_count", rs.getInt("order_count")); // 订单数量
map.put("total_quantity", rs.getInt("total_quantity")); // 销售总件数
map.put("total_sales", rs.getDouble("total_sales")); // 总销售额（单位：万元）
result.add(map); // 将该条记录加入返回结果列表
}
// 6. 关闭资源（结果集、语句、连接）
rs.close();
stmt.close();
conn.close();
} catch (Exception e) {
// 捕获异常并输出错误信息（便于调试）
e.printStackTrace();
}
// 7. 返回最终结果列表（Spring Boot 自动转为 JSON）
return result;
}
}
4.2 Vue + ECharts 可视化
【题目要求】
创建
VUE项目 ,名称为Frontend；创建组件文件
components/CategoryChart.vue和主页面App.vue，配置代理文件vite.config.js；使用 Vue3 + ECharts 创建饼图组件；
从接口
/api/category-sales获取各产品分类的销售额数据；展示各分类销售额在总销售中的占比情况，并以饼图形式进行可视化展示（单位：万元）。
【参考代码】
vite.config.js
// 引入 Vite 的配置函数和 Vue 插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 默认导出配置对象
export default defineConfig({
// 注册插件：使用 Vue 插件支持 .vue 文件
plugins: [vue()],
// 本地开发服务器配置
server: {
port: 5173, // 本地开发服务器端口（默认也是 5173，可自定义）
// 配置代理：解决前端开发中跨域请求后端的问题
proxy: {
'/api': {
target: 'http://localhost:8080', // 后端服务器地址（Spring Boot 或其他服务）
changeOrigin: true, // 修改请求头中的 origin 字段，避免跨域
rewrite: path => path.replace(/^\/api/, '')
// 将请求路径中的 `/api` 前缀去掉，例如：
// 前端请求：/api/region-sales → 实际转发为：http://localhost:8080/region-sales
}
}
}
})
App.vue
<!-- 页面结构区域 -->
<template>
<div class="chart-wrapper">
<h1>数据可视化</h1>
<h2>大数据高23-1班 张三</h2>
<!-- 引入的图表组件，用于展示区域销售数据 -->
<CategoryChart />
</div>
</template>
<!-- 脚本逻辑区域 -->
<script setup>
// 引入封装好的区域图表组件
import CategoryChart from './components/CategoryChart.vue'
</script>
<!-- 页面样式区域 -->
<style>
/* 设置整个页面的背景色和默认字体样式 */
body {
background-color: #f0f2f5; /* 浅灰背景色 */
margin: 0;
padding: 20px;
font-family: "Microsoft YaHei", sans-serif;
}
/* 图表容器样式：限制最大宽度、居中显示 */
.chart-wrapper {
max-width: 1400px;
margin: 40px auto; /* 上下间距 40px，左右居中 */
font-family: sans-serif;
}
</style>
CategoryChart.vue
<template>
<!-- 图表容器 -->
<div ref="chartRef" class="chart-container"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import axios from 'axios'
// 1. 创建图表 DOM 引用
const chartRef = ref()
// 2. 渲染图表方法（异步获取数据）
const renderChart = async () => {
// 从后端接口获取分类销售数据
const res = await axios.get('/api/category-sales')
const data = res.data
// 将数据格式转换为 ECharts 饼图需要的结构
const pieData = data.map(item => ({
name: item.category,
value: Number(item.total_sales.toFixed(2))
}))
// 初始化图表
const chart = echarts.init(chartRef.value)
// 配置饼图选项
chart.setOption({
title: {
text: '2022年各类产品销售额占比',
subtext: '单位：万元',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}：{c} 万元 ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '销售额',
type: 'pie',
center: ['50%', '60%'], // 原来是 ['50%', '50%']，下移到 60%
radius: '60%',
data: pieData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
},
label: {
formatter: '{b}\n{d}%',
fontSize: 14
}
}
]
})
}
// 3. 页面加载后初始化图表
onMounted(() => renderChart())
</script>
<style scoped>
.chart-container {
width: 100%;
height: 400px;
min-width: 700px;
background: #ffffff; /* 卡片背景 */
border-radius: 12px; /* 圆角 */
padding: 20px;
margin: 0 auto;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); /* 阴影 */
display: flex;
justify-content: center;
align-items: center;
}
</style>
