Browse Source

first commit

master
jc 1 month ago
commit
fffe024498
  1. 94
      app.py
  2. 19
      public/index.html
  3. 24
      public/script.js
  4. 42
      public/styles.css

94
app.py

@ -0,0 +1,94 @@
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 子路径,提供 Linux 基本语法知识点数据
@app.route("/api/linux-tips")
def linux_tips():
tips = {
"message": "欢迎来到 Linux 基本语法知识点",
"tips": [
{
"title": "查看当前目录",
"command": "pwd",
"description": "显示当前工作目录的完整路径。"
},
{
"title": "列出目录内容",
"command": "ls",
"description": "列出当前目录或指定目录中的文件和文件夹。"
},
{
"title": "切换目录",
"command": "cd",
"description": "切换到指定的目录。例如:`cd /path/to/directory`。"
},
{
"title": "创建目录",
"command": "mkdir",
"description": "创建一个新的目录。例如:`mkdir new_folder`。"
},
{
"title": "删除文件或目录",
"command": "rm",
"description": "删除文件或目录。例如:`rm file.txt` 或 `rm -r folder`(递归删除目录)。"
},
{
"title": "复制文件或目录",
"command": "cp",
"description": "复制文件或目录。例如:`cp source.txt destination.txt` 或 `cp -r source_folder destination_folder`。"
},
{
"title": "移动或重命名文件",
"command": "mv",
"description": "移动文件或目录,也可以用于重命名。例如:`mv file.txt new_name.txt`。"
},
{
"title": "查看文件内容",
"command": "cat",
"description": "显示文件的内容。例如:`cat file.txt`。"
},
{
"title": "分页查看文件内容",
"command": "more/less",
"description": "逐页显示文件内容,`less` 支持上下翻页。例如:`less file.txt`。"
},
{
"title": "查找文件",
"command": "find",
"description": "在指定目录下查找文件。例如:`find /path -name filename`。"
},
{
"title": "查看进程",
"command": "ps",
"description": "显示当前进程的状态。例如:`ps aux`。"
},
{
"title": "终止进程",
"command": "kill",
"description": "终止指定的进程。例如:`kill PID`。"
},
{
"title": "查看磁盘使用情况",
"command": "df",
"description": "显示磁盘的使用情况。例如:`df -h`。"
},
{
"title": "查看文件系统挂载情况",
"command": "mount",
"description": "显示已挂载的文件系统。"
}
]
}
return jsonify(tips)
if __name__ == "__main__":
app.run(debug=True, port=80)

19
public/index.html

@ -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>Linux 基本语法知识点</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Linux 基本语法知识点</h1>
<div id="tips-container">
<h2>常用命令及说明</h2>
<div id="tips-list"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

24
public/script.js

@ -0,0 +1,24 @@
document.addEventListener("DOMContentLoaded", () => {
fetch("/api/linux-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} (${tip.command})`;
tipDiv.appendChild(tipTitle);
const tipDescription = document.createElement("p");
tipDescription.textContent = tip.description;
tipDiv.appendChild(tipDescription);
tipsList.appendChild(tipDiv);
});
})
.catch(error => {
console.error("获取数据时出错:", error);
});
});

42
public/styles.css

@ -0,0 +1,42 @@
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;
font-size: 14px;
color: #555;
}
Loading…
Cancel
Save