commit
1a0075be68
4 changed files with 167 additions and 0 deletions
@ -0,0 +1,69 @@ |
|||||
|
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 子路径,提供 Python 知识点数据 |
||||
|
@app.route("/api/python-tips") |
||||
|
def python_tips(): |
||||
|
tips = { |
||||
|
"message": "欢迎来到 Python 知识点", |
||||
|
"tips": [ |
||||
|
{ |
||||
|
"title": "变量和数据类型", |
||||
|
"description": "Python 是一种动态类型语言,变量不需要显式声明类型。常见的数据类型有整数(int)、浮点数(float)、字符串(str)、列表(list)、字典(dict)等。", |
||||
|
"example": "name = 'Kimi'\nage = 25\nis_student = True" |
||||
|
}, |
||||
|
{ |
||||
|
"title": "条件语句", |
||||
|
"description": "使用 `if`、`elif` 和 `else` 来实现条件判断。", |
||||
|
"example": "if age >= 18:\n print('成年人')\nelse:\n print('未成年人')" |
||||
|
}, |
||||
|
{ |
||||
|
"title": "循环语句", |
||||
|
"description": "Python 提供 `for` 和 `while` 循环,用于重复执行代码块。", |
||||
|
"example": "for i in range(5):\n print(i)\n\ni = 0\nwhile i < 5:\n print(i)\n i += 1" |
||||
|
}, |
||||
|
{ |
||||
|
"title": "函数定义", |
||||
|
"description": "使用 `def` 关键字定义函数,可以有参数和返回值。", |
||||
|
"example": "def greet(name):\n return f'Hello, {name}!'\n\nprint(greet('Kimi'))" |
||||
|
}, |
||||
|
{ |
||||
|
"title": "列表操作", |
||||
|
"description": "列表是 Python 中常用的数据结构,支持添加、删除、排序等操作。", |
||||
|
"example": "fruits = ['apple', 'banana', 'cherry']\nfruits.append('orange')\nprint(fruits)\nfruits.pop()\nprint(fruits)" |
||||
|
}, |
||||
|
{ |
||||
|
"title": "字典操作", |
||||
|
"description": "字典是一种键值对的数据结构,通过键访问值。", |
||||
|
"example": "person = {'name': 'Kimi', 'age': 25}\nprint(person['name'])\nperson['age'] = 26\nprint(person)" |
||||
|
}, |
||||
|
{ |
||||
|
"title": "异常处理", |
||||
|
"description": "使用 `try` 和 `except` 来捕获和处理异常。", |
||||
|
"example": "try:\n result = 10 / 0\nexcept ZeroDivisionError:\n print('除数不能为零')" |
||||
|
}, |
||||
|
{ |
||||
|
"title": "模块和包", |
||||
|
"description": "Python 的模块是包含函数和变量的文件,包是模块的集合。使用 `import` 导入模块。", |
||||
|
"example": "import math\nprint(math.sqrt(16))" |
||||
|
}, |
||||
|
{ |
||||
|
"title": "文件操作", |
||||
|
"description": "使用 `open()` 函数打开文件,支持读写操作。", |
||||
|
"example": "with open('example.txt', 'w') as file:\n file.write('Hello, world!')\n\nwith open('example.txt', 'r') as file:\n content = file.read()\n print(content)" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
return jsonify(tips) |
||||
|
|
||||
|
|
||||
|
if __name__ == "__main__": |
||||
|
app.run(debug=True, port=80) |
@ -0,0 +1,19 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="zh-CN"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Python 知识点</title> |
||||
|
<link rel="stylesheet" href="styles.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<h1>Python 知识点</h1> |
||||
|
<div id="tips-container"> |
||||
|
<h2>常用知识点及示例</h2> |
||||
|
<div id="tips-list"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<script src="script.js"></script> |
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,28 @@ |
|||||
|
document.addEventListener("DOMContentLoaded", () => { |
||||
|
fetch("/api/python-tips") |
||||
|
.then(response => response.json()) |
||||
|
.then(data => { |
||||
|
const tipsList = document.getElementById("tips-list"); |
||||
|
data.tips.forEach(tip => { |
||||
|
const tipDiv = document.createElement("div"); |
||||
|
tipDiv.classList.add("tip"); |
||||
|
|
||||
|
const tipTitle = document.createElement("h3"); |
||||
|
tipTitle.textContent = tip.title; |
||||
|
tipDiv.appendChild(tipTitle); |
||||
|
|
||||
|
const tipDescription = document.createElement("p"); |
||||
|
tipDescription.textContent = tip.description; |
||||
|
tipDiv.appendChild(tipDescription); |
||||
|
|
||||
|
const tipExample = document.createElement("pre"); |
||||
|
tipExample.textContent = tip.example; |
||||
|
tipDiv.appendChild(tipExample); |
||||
|
|
||||
|
tipsList.appendChild(tipDiv); |
||||
|
}); |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
console.error("获取数据时出错:", error); |
||||
|
}); |
||||
|
}); |
@ -0,0 +1,51 @@ |
|||||
|
body { |
||||
|
font-family: "Arial", sans-serif; |
||||
|
background-color: #f4f4f4; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
max-width: 800px; |
||||
|
margin: 20px auto; |
||||
|
padding: 20px; |
||||
|
background: white; |
||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
h1, h2 { |
||||
|
text-align: center; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
#tips-list { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.tip { |
||||
|
background: #e9f2ff; |
||||
|
padding: 10px; |
||||
|
margin-bottom: 10px; |
||||
|
border-radius: 5px; |
||||
|
} |
||||
|
|
||||
|
.tip h3 { |
||||
|
margin: 0 0 5px; |
||||
|
color: #007bff; |
||||
|
} |
||||
|
|
||||
|
.tip p { |
||||
|
margin: 0 0 10px; |
||||
|
font-size: 14px; |
||||
|
color: #555; |
||||
|
} |
||||
|
|
||||
|
.tip pre { |
||||
|
background: #f9f9f9; |
||||
|
padding: 10px; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 5px; |
||||
|
font-size: 12px; |
||||
|
overflow-x: auto; |
||||
|
} |
Loading…
Reference in new issue