大数据专业实践作业

一年级学生居家专业实践作业手册

主题:天气查询网页系统


一、项目简介(10分钟)

目标:

使用 HTML、CSS 和 JavaScript 构建一个天气查询网页,并结合 Python 后端实现天气数据调用和展示。

内容介绍:

  • 学生将通过浏览器输入城市,点击查询按钮后,查看实时天气数据。
  • 所有过程可在本地完成,无需复杂工具。

需要用到的技能:

  • HTML页面结构
  • CSS样式美化
  • JavaScript实现交互
  • Python获取天气数据

二、实践步骤(总时长:4.5小时)

2.1 任务一:设计前端页面(1小时)

步骤1:创建HTML结构

使用AI生成基础HTML代码(如需要可视化界面):

html 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>天气查询系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>欢迎使用天气查询系统</h1>
        <form id="weatherForm">
            <input type="text" id="cityInput" placeholder="请输入城市名称">
            <button type="submit">查询天气</button>
        </form>
        <div id="resultArea"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

AI提示:

"帮我生成一个可以输入城市并显示天气结果的网页。"

步骤2:加入CSS样式

AI生成基础样式代码(美化界面):

css 复制代码
body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

input[type="text"] {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#resultArea {
    margin-top: 30px;
    padding: 15px;
    background-color: #e0f7fa;
    border-radius: 6px;
}

AI提示:

"帮我生成一个简洁美观的网页样式,适合天气查询。"

步骤3:实现JavaScript交互功能

AI生成如下代码(前端与后端交互):

javascript 复制代码
document.getElementById("weatherForm").addEventListener("submit", function(e) {
    e.preventDefault();
    const city = document.getElementById("cityInput").value.trim();
    if (!city) {
        alert("请输入城市名称!");
        return;
    }
    fetch("http://127.0.0.1:5000/weather?city=" + city)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                document.getElementById("resultArea").innerHTML = data.error;
            } else {
                document.getElementById("resultArea").innerHTML = `
                    <h3>${data.city} 的天气情况</h3>
                    <p>温度: ${data.temp} ℃</p>
                    <p>天气: ${data.weather}</p>
                    <p>湿度: ${data.humidity}</p>
                `;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById("resultArea").innerHTML = "请求失败,请检查网络或城市名称是否正确。";
        });
}

AI提示:

"帮我生成一个简单的前端查询功能,支持与后端交互。"


2.2 任务二:Python后端代码(1.5小时)

步骤1:安装Flask(命令行输入)
bash 复制代码
pip install flask
步骤2:创建Python程序app.py
python 复制代码
from flask import Flask, request, jsonify
import requests

app = Flask(__name__)

def get_weather_data(city):
    API_KEY = "YOUR_KEY"  # 请从[https://openweathermap.org](https://openweathermap.org)获取API密钥
    url = f"http://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units=metric"
  
    response = requests.get(url)
    if response.status_code == 200:
        return {
            "city": city,
            "temp": response.json()['main']['temp'],
            "weather": response.json()['weather'][0]['description'],
            "humidity": response.json()['main']['humidity']
        }
    else:
        return {"error": "无法获取天气信息,请检查网络或城市名称是否正确。"}

@app.route('/weather', methods=['GET'])
def get_weather():
    city = request.args.get('city')
    data = get_weather_data(city)
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)

AI提示:

"帮我生成一个天气获取的Python Flask API。"

步骤3:启动服务并测试
  • 在命令行中执行:

    bash 复制代码
    python app.py
  • 打开浏览器访问:

    复制代码
    http://localhost:5000/weather?city=北京

    确认是否能正确返回天气信息。


2.3 任务三:整合前后端并展示(1小时)

  • 确保 index.html 能正确调用 Python API;
  • 测试不同城市的天气查询功能;
  • 拍照或录屏展示最终运行效果。

AI提示:

"帮我检查这个网页能否正常显示天气信息。"


2.4 作业提交(0.5小时)

提交内容:

  1. index.html(前端页面代码)
  2. style.css(样式文件)
  3. script.js(交互逻辑)
  4. app.py(Python后端API代码)
  5. 截图/录屏(展示页面运行效果)
  6. 项目说明文档(里面写明你做了什么,遇到的问题)

作业提示与AI辅助建议

问题 AI辅助提示
代码不运行怎么办? "帮我检查这段HTML代码是否有错误"
无法访问API怎么办? "帮我生成一个可以正确调用OpenWeatherMap API的Python代码"
查询结果不显示? "帮我检查前端JS是否与后端接口匹配"
页面样式不美观? "帮我优化这段CSS,让页面更清晰易读"

二年级学生居家专业实践作业手册

主题:使用Python爬取豆瓣读书榜单信息并进行分析


一、项目简介(建议花费10分钟)

目标:

使用 Python + BeautifulSoup + Pandas ,从豆瓣读书的公开榜单 中爬取书籍的相关信息(如书名、作者、评分、出版日期、评价人数等),进行数据清洗并输出为表格,最后用 Matplotlib 制作简单的可视化图表。

适合网站:

豆瓣读书的畅销榜热门榜页面:

https://book.douban.com/top250 ------ 豆瓣读书排行榜(如"豆瓣读书人气榜")


二、实践步骤(总时长:4.5小时)

2.1 任务一:爬取豆瓣读书榜单信息(1小时)

AI提问模板:

"帮我写一段Python代码,用requests和BeautifulSoup爬取豆瓣读书人气榜的书名、作者和评分。"

目标:

  • 提取榜单中的书名、作者、评分(如5星、4星等)、评价人数等
  • 存为一个列表或DataFrame(表格形式)
2.2 任务二:数据清洗与整理(1小时)

AI提问模板:

"帮我清洗豆瓣读书数据,去除重复、缺失值和错误信息。"

目标:

  • 确保所有数据字段都完整
  • 处理评分格式(如"8.5"、"9.1"等)
  • 生成一个清晰的表格(适合Word或Excel输出)
2.3 任务三:使用Pandas存储并输出为CSV(1小时)

AI提问模板:

"帮我将豆瓣读书榜单数据用pandas保存为CSV文件。"

目标:

  • 创建包含书名、作者、评分、评价人数等字段的表格
  • 导出为CSV文件,方便后续分析
2.4 任务四:利用Matplotlib进行数据可视化(1小时)

AI提问模板:

"帮我用Matplotlib做一个柱状图,展示豆瓣读书榜单中评分最高的Top 10书籍。"

目标:

  • 制作一个简单直观的图表
  • 可以是柱状图、饼图(按评分区间统计)或条形图等
2.5 任务五:项目整理与提交(1小时)

AI提问模板:

"帮我整理我的代码、清洗后的数据、CSV文件和图表,做一个项目提交清单。"

目标:

  • 合理分类文件与结果
  • 生成一个Word文档进行总结与说明

三、AI提问模板汇总

标号 步骤 AI提问模板
1 安装必要的Python库 "帮我安装requests、BeautifulSoup、pandas、matplotlib几个Python包。"
2 爬取豆瓣读书榜单 "帮我用Python爬取豆瓣读书清单,获取书名、作者和评分。"
3 提取榜单数据 "帮我用requests和BeautifulSoup从豆瓣读书页面中提取书籍信息。"
4 清洗数据 "帮我清理代码中获取的豆瓣书籍数据,去除格式错误和重复项。"
5 保存为CSV "帮我用pandas将清洗后的豆瓣读书数据保存为CSV文件。"
6 制作折线图或柱状图 "帮我用Matplotlib做一个豆瓣读书榜单Top 10评分的柱状图。"
7 图表保存为图片 "帮我保存我已经做出的豆瓣读书榜单图表为PNG格式。"
8 整理项目结构 "帮我对代码文件进行分类管理,比如把爬虫、清洗、绘图放在一起。"
9 生成项目文档 "帮我写一份项目说明文档,包括目的、使用的技术、数据来源、分析结果和图表说明。"
10 提交方法指导 "帮我指导如何截图或录屏展示我的Python项目运行和结果。"

三年级学生居家专业实践作业手册

主题:利用AI辅助设计ECharts数据看板


一、项目目标(建议花费5分钟)

本项目旨在使用 AI辅助分析书籍阅读数据 ,并通过 ECharts 生成一个可视化的"数据看板",直观展示学生的阅读兴趣、书籍评分、阅读量分布等信息。


二、实践方案(总时长:3小时)

2.1 准备工作:数据来源(无需上网爬取)

使用AI生成模拟数据(可选)使用豆瓣读书公开榜单数据(结构易于解析)

AI提示词示例:

"帮我生成一份包含100本书籍信息的模拟数据,包括书名、作者、评分、类别、出版时间等。"


2.2 使用pandas分析数据

AI提示词示例:

"帮我将生成的书籍数据用pandas整理成一个表格。"
"帮我用pandas统计不同书籍类别中的数量。"
"帮我计算书籍的平均评分,以及评分最高的前10本书。"


2.3 使用ECharts生成数据看板

目标:使用ECharts库(可以通过前端JavaScript实现)制作一个静态的数据看板,展示书籍阅读统计信息(如评分分布、类别占比等)。

AI辅助生成ECharts前端代码(可选):

"帮我生成一个ECharts的柱状图,展示豆瓣读书 Top 10 评分的书籍。"
"帮我生成一个ECharts的饼图,显示各类书籍的占比。"
"帮我用ECharts做一个数据看板,展示阅读数据的多个图表。"
"帮我将ECharts代码保存成HTML文件,方便展示。"


2.4 生成数据看板的图片(可选)

如果不能使用HTML文件展示,可以使用AI生成ECharts图表的图片

"帮我用ECharts生成一个柱状图,显示前10本评分最高的书籍,保存成图片。"
"帮我生成一个饼图,展示豆瓣榜单中书籍的类别分布,保存为PNG格式。"


2.5 整理项目成果
  • 模拟数据 + 分析结果表格
  • ECharts图表(或图表图片)
  • 项目报告(总结数据看板的设计思路、制作过程)

三、所需工具与技能

工具 技能要求 说明
Python 基础数据处理 使用pandas对数据进行统计分析
AI辅助 数据生成/图表代码 AI提供模拟数据或图表代码
ECharts 基础图表生成 静态图表,通过在线工具生成或本地HTML展示
Word/Markdown 项目文档 撰写项目报告或看板说明文档

四、AI辅助提示词汇总

标号 目标 AI提示词
1 生成模拟数据 "帮我生成100条书籍数据,包含书名、作者、评分、类别、出版时间。"
2 用pandas分析数据 "帮我用pandas统计书籍评分分布,并保存为表格。"
3 生成ECharts柱状图 "帮我生成一个柱状图,展示评分最高的前10本书。"
4 生成ECharts饼图 "帮我用ECharts生成一个饼图,展示不同类别书籍的比例。"
5 图表保存为图片 "帮我将生成的ECharts图表保存为PNG格式。"
6 生成数据看板代码 "帮我生成ECharts数据看板代码,包括评分分布和类目占比。"
7 整理成Word文档 "帮我生成一份项目说明文档,内容包括数据来源、分析过程、图表说明。"
8 提交材料清单 "帮我整理一份项目提交材料清单,包括代码、表格、图表图片、文档。"
9 阅读兴趣分析 "帮我用pandas分析书籍类别中哪些类别最受欢迎。"
10 可视化成果优化 "帮我优化生成的ECharts图表,使其更美观、更清晰。"

五、项目模板

数据看板内容规划
  1. 书籍评分分布柱状图(Top 10评分)
  2. 书籍类别占比饼图(小说、科普、历史、哲学等)
  3. 书籍出版时间分布图(如每年发布的书籍数量)
  4. 书籍作者分布图(前10位作者及其作品数)

六、AI帮助流程

  1. AI生成模拟数据(可选)

    "请帮我生成一份100本书籍的模拟数据表,包括评分、类别、作者、出版时间、书名。"

  2. AI生成ECharts代码

    "请帮我生成一个ECharts数据看板页面,显示每本书的评分和类别占比。"

  3. AI优化代码与图表

    "我需要将这些数据用ECharts展示出来,图表要美观清晰。"

  4. AI生成表格与图表图片

    "帮我用pandas将分析后的书籍评分分布整理成表格,并生成对应的柱状图和饼图图片。"

  5. AI生成项目文档

    "帮我撰写一个项目说明文档,用于提交三月的居家实践活动。"


七、提交材料建议

材料 内容 提交方式
原始数据 AI生成的模拟数据或豆瓣榜单提取数据 Excel/CSV格式
分析结果表格 书籍评分、类别占比、出版时间分布等 Word/Markdown表格
ECharts数据看板 HTML代码或截图 压缩包打包提交
图表图片 柱状图、饼图等 PNG格式
项目文档报告 包括目标、数据来源、实现步骤、分析结果 Word文档

八、AI生成的代码示例

以下是一段AI生成的ECharts柱状图与饼图代码,展示最热门书籍的评分与类别分布(模拟数据):


ECharts柱状图代码(Top 10评分书籍)
html 复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px; height: 400px;"></div>
  <script>
    var chart = echarts.init(document.getElementById('main'));
    var option = {
      title: { text: 'Top 10 书籍评分' },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['书1', '书2', '书3', '书4', '书5', '书6', '书7', '书8', '书9', '书10']
      },
      yAxis: { type: 'value' },
      series: [{ name: '评分', type: 'bar', data: [9.4, 8.9, 8.7, 8.5, 8.3, 8.2, 8.0, 7.9, 7.8, 7.7] }]
    };
    chart.setOption(option);
  </script>
</body>
</html>

ECharts饼图代码(书籍类别占比)
html 复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px; height: 400px;"></div>
  <script>
    var chart = echarts.init(document.getElementById('main'));
    var option = {
      title: { text: '书籍类别占比分布' },
      tooltip: { trigger: 'item' },
      series: [{
        name: '类别',
        type: 'pie',
        data: [
          { value: 335, name: '小说' },
          { value: 310, name: '科普' },
          { value: 234, name: '历史' },
          { value: 1048, name: '哲学' },
          { value: 210, name: '艺术' }
        ]
      }]
    };
    chart.setOption(option);
  </script>
</body>
</html>

九、AI提示词关键词

关键词 生成内容
书籍数据导出表格 使用pandas导出Excel/CSV格式数据
豆瓣读书评分柱状图代码 可运行的ECharts柱状图代码
类别占比饼图代码 可运行的ECharts饼图代码
模拟书籍数据 AI生成的模拟数据表格
项目文档模板 项目说明文档,格式可根据学校要求调整
图表保存为图片 用在线工具或AI生成图表图片

相关推荐
武子康2 小时前
大数据-278 Spark MLib-GBDT梯度提升决策树详解:从原理到实战案例
大数据·后端·spark
数智化精益手记局2 小时前
什么是仓库安灯管理系统?一文讲清仓库安灯管理系统的核心概念
大数据·网络·人工智能·安全·精益工程
aq55356002 小时前
Chrome如何重塑Web标准的未来
大数据·elasticsearch
数智化精益手记局2 小时前
仓库安灯管理系统的异常响应机制:破解仓库安灯管理系统的跨部门协同难题
大数据·数据结构·人工智能·制造·精益工程
HookJames3 小时前
设计Section 08 · Applications & Project Scenarios
大数据
olivesun883 小时前
20万元 · 1年期 · A股组合投资方案
大数据·人工智能·物联网
alxraves3 小时前
医疗器械质量管理体系信息系统的需求
大数据·安全·健康医疗·制造
ai大模型中转api测评3 小时前
开发者接入实战:GPT-5.5 API 深度调优、推理策略与工程化降本指南
大数据·人工智能·gpt
YMatrix 官方技术社区4 小时前
全栈向量化 + 库内流计算:YMatrix 亮相 Postgres Conference 2026,双引擎重塑 AGI 时代 PostgreSQL 性能底座
大数据·postgresql·agi·ymatrix·超融合数据库