一年级学生居家专业实践作业手册
主题:天气查询网页系统
一、项目简介(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:启动服务并测试
-
在命令行中执行:
bashpython app.py -
打开浏览器访问:
http://localhost:5000/weather?city=北京确认是否能正确返回天气信息。
2.3 任务三:整合前后端并展示(1小时)
- 确保
index.html能正确调用 Python API; - 测试不同城市的天气查询功能;
- 拍照或录屏展示最终运行效果。
AI提示:
"帮我检查这个网页能否正常显示天气信息。"
2.4 作业提交(0.5小时)
提交内容:
index.html(前端页面代码)style.css(样式文件)script.js(交互逻辑)app.py(Python后端API代码)- 截图/录屏(展示页面运行效果)
- 项目说明文档(里面写明你做了什么,遇到的问题)
作业提示与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图表,使其更美观、更清晰。" |
五、项目模板
数据看板内容规划
- 书籍评分分布柱状图(Top 10评分)
- 书籍类别占比饼图(小说、科普、历史、哲学等)
- 书籍出版时间分布图(如每年发布的书籍数量)
- 书籍作者分布图(前10位作者及其作品数)
六、AI帮助流程
-
AI生成模拟数据(可选)
"请帮我生成一份100本书籍的模拟数据表,包括评分、类别、作者、出版时间、书名。"
-
AI生成ECharts代码
"请帮我生成一个ECharts数据看板页面,显示每本书的评分和类别占比。"
-
AI优化代码与图表
"我需要将这些数据用ECharts展示出来,图表要美观清晰。"
-
AI生成表格与图表图片
"帮我用pandas将分析后的书籍评分分布整理成表格,并生成对应的柱状图和饼图图片。"
-
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生成图表图片 |