Browse Source

first commit

master
jc 1 month ago
commit
08d7734488
  1. 35
      app.py
  2. 24
      public/index.html
  3. 41
      public/script.js
  4. 45
      public/styles.css

35
app.py

@ -0,0 +1,35 @@
from flask import Flask, jsonify, send_from_directory
app = Flask(__name__, static_folder="public", static_url_path="")
# 根路径返回 index.html
@app.route("/")
def serve_index():
return send_from_directory(app.static_folder, "index.html")
# API 子路径,提供 WPS 表格处理知识点复习资料
@app.route("/api/wps-review")
def api_wps_review():
wps_review_data = {
"message": "WPS 表格处理知识点复习资料",
"data": {
"introduction": "WPS 表格是计算机二级考试的重要内容,掌握基本操作和高级技巧是关键。",
"key_topics": [
{"topic": "基础操作", "content": "创建和保存表格、输入数据、调整行高列宽、格式化单元格。"},
{"topic": "公式与函数", "content": "SUM、AVERAGE、MAX、MIN 等常用函数的使用,相对引用与绝对引用。"},
{"topic": "数据排序与筛选", "content": "升序、降序排序,自动筛选和高级筛选的使用。"},
{"topic": "数据透视表", "content": "创建数据透视表,进行数据汇总与分析。"},
{"topic": "图表制作", "content": "柱状图、折线图、饼图的创建与美化。"}
],
"tips": [
"多练习实际操作,熟悉快捷键。",
"理解公式和函数的逻辑,多用实例练习。",
"掌握数据透视表的创建和应用,这是高频考点。",
"图表制作要注重细节,确保美观且准确。"
]
}
}
return jsonify(wps_review_data)
if __name__ == "__main__":
app.run(debug=True,host="0.0.0.0", port=80)

24
public/index.html

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算机二级 WPS 表格处理复习资料</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>计算机二级 WPS 表格处理复习资料</h1>
<p id="introduction"></p>
<div class="section">
<h2>核心知识点</h2>
<div id="key-topics-container"></div>
</div>
<div class="section">
<h2>复习小贴士</h2>
<div id="tips-container"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

41
public/script.js

@ -0,0 +1,41 @@
document.addEventListener("DOMContentLoaded", function () {
fetch("/api/wps-review")
.then(response => response.json())
.then(data => {
const introduction = document.getElementById("introduction");
introduction.textContent = data.data.introduction;
const keyTopicsContainer = document.getElementById("key-topics-container");
const tipsContainer = document.getElementById("tips-container");
// 渲染核心知识点
data.data.key_topics.forEach(topic => {
const topicItem = document.createElement("div");
topicItem.classList.add("item");
const topicName = document.createElement("div");
topicName.classList.add("item-name");
topicName.textContent = topic.topic;
const topicContent = document.createElement("div");
topicContent.classList.add("item-description");
topicContent.textContent = topic.content;
topicItem.appendChild(topicName);
topicItem.appendChild(topicContent);
keyTopicsContainer.appendChild(topicItem);
});
// 渲染复习小贴士
data.data.tips.forEach(tip => {
const tipItem = document.createElement("div");
tipItem.classList.add("item");
tipItem.textContent = tip;
tipsContainer.appendChild(tipItem);
});
})
.catch(error => {
console.error("Error fetching review data:", error);
});
});

45
public/styles.css

@ -0,0 +1,45 @@
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
color: #333;
}
.section {
margin-top: 20px;
}
.item {
margin-bottom: 15px;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.item:last-child {
border-bottom: none;
}
.item-name {
font-size: 1.2em;
font-weight: bold;
color: #444;
}
.item-description {
font-size: 0.9em;
color: #666;
}
Loading…
Cancel
Save