中国气功大师排名源码解析：保姆级教程助你从零搭项目

刚写完Hello World，脑子还热乎，一打开编辑器想做个真项目，脑子就一片空白。这种“学会语法却不知怎么搭项目”的断层，坑了太多初学者。别慌，这篇保姆级教程，带你把“中国气功大师排名”做成一个可运行的Web项目。

项目目标：从概念到落地的映射

很多人听到“中国气功大师排名”觉得玄乎，其实拆解成工程语言，就是一个典型的数据展示与检索系统。我们的核心目标很明确：实现一个能查询、排序、展示“气功大师”信息的单页应用。这不仅仅是个噱头，而是为了练手数据建模、前后端交互以及UI渲染的全流程。

我们将构建一个轻量级项目，前端使用HTML/CSS/JS，后端用Node.js提供API，数据库暂存于内存或简单JSON文件。重点不在于气功本身，而在于如何把一堆杂乱的数据（姓名、流派、擅长功法、影响力指数）结构化，并让用户通过简单的交互获取排序后的结果。这就是所有业务系统的雏形：输入数据，处理逻辑，输出结果。

目录结构：工程化的第一步

很多新手喜欢把所有代码写在一个文件里，这叫“面条代码”，改一处崩全身。规范的目录结构是项目可维护性的基石，也是你从“写代码”进阶到“做工程”的标志。

我们采用以下标准目录结构，请照抄并理解其逻辑：

qigong-rank/
├── package.json          # 项目依赖与脚本配置
├── server.js             # 后端服务入口
├── data/
│   └── masters.json      # 模拟数据库数据
├── public/
│   ├── index.html        # 前端页面
│   ├── style.css         # 样式文件
│   └── app.js            # 前端逻辑
└── README.md             # 项目说明

为什么这么分？ server.js负责监听请求和返回数据，这是后端的边界。 data/目录存放静态数据，模拟真实场景中的数据库层。 public/目录是静态资源托管区，浏览器直接访问这里的内容。 package.json是项目的身份证，记录了你需要哪些“工具包”（依赖项）。

在终端中执行mkdir qigong-rank && cd qigong-rank，然后npm init -y生成package.json。接着安装Express框架，它是Node.js中最流行的Web框架，文档极其完善，参考官方开发者文档可知，它极大地简化了HTTP请求处理流程。执行npm install express，你会看到node_modules目录自动生成，这就是你的依赖库。

核心代码实现：后端API搭建

后端的核心任务是提供API接口。我们需要一个GET接口，返回所有大师数据，并支持按“影响力指数”排序。

打开server.js，输入以下代码，并逐行理解：

const express = require('express');
const fs = require('fs');
const path = require('path');const app = express();
const PORT = 3000;// 1. 读取JSON数据文件
// 在生产环境中，这里通常替换为数据库查询
const dataPath = path.join(__dirname, 'data', 'masters.json');
let masters = [];try {const data = fs.readFileSync(dataPath, 'utf-8');masters = JSON.parse(data);console.log('数据加载成功，共', masters.length, '位大师');
} catch (err) {console.error('数据加载失败:', err);
}// 2. 定义API路由
// 用户访问 /api/masters?sort=desc 时触发
app.get('/api/masters', (req, res) => {const sortParam = req.query.sort; // 获取查询参数let sortedMasters = [...masters]; // 浅拷贝，避免修改原数组if (sortParam === 'desc') {// 按影响力指数降序排列sortedMasters.sort((a, b) => b.influence - a.influence);} else if (sortParam === 'asc') {// 按影响力指数升序排列sortedMasters.sort((a, b) => a.influence - b.influence);}// 3. 返回JSON数据res.json(sortedMasters);
});// 4. 静态资源托管
// 让 / 路径指向 public/index.html
app.use(express.static(path.join(__dirname, 'public')));// 5. 启动服务器
app.listen(PORT, () => {console.log(`服务器运行在 http://localhost:${PORT}`);
});

关键点解析： express.static中间件让Node.js可以直接提供HTML和JS文件，无需额外配置。 req.query.sort获取URL中的查询参数，这是RESTful API设计的标准做法。使用[...masters]进行浅拷贝至关重要，防止排序操作污染原始数据源，这在处理复杂业务逻辑时是常见的坑。

前端交互：数据渲染与用户反馈

后端有了，前端得接住。打开public/index.html，搭建基础骨架：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>中国气功大师排名系统</title><link rel="stylesheet" href="style.css">
</head>
<body><h1>中国气功大师影响力排名</h1><div class="controls"><button id="btn-desc">按影响力降序</button><button id="btn-asc">按影响力升序</button></div><table id="master-table"><thead><tr><th>姓名</th><th>流派</th><th>擅长功法</th><th>影响力指数</th></tr></thead><tbody><!-- 数据将通过JS动态插入 --></tbody></table><script src="app.js"></script>
</body>
</html>

接下来是核心逻辑public/app.js，这里展示了如何调用后端API并渲染DOM：

const tableBody = document.querySelector('#master-table tbody');
const btnDesc = document.getElementById('btn-desc');
const btnAsc = document.getElementById('btn-asc');// 封装数据获取函数
async function fetchMasters(sortOrder) {try {// 1. 构造请求URLconst url = `/api/masters?sort=${sortOrder}`;// 2. 发送GET请求const response = await fetch(url);// 3. 检查响应状态if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}// 4. 解析JSON数据const data = await response.json();// 5. 渲染表格renderTable(data);} catch (error) {console.error('获取数据失败:', error);alert('数据加载失败，请检查后端服务是否启动');}
}// 渲染表格行
function renderTable(data) {// 清空旧数据tableBody.innerHTML = '';// 遍历数据，创建<tr>元素data.forEach(master => {const row = document.createElement('tr');row.innerHTML = `<td>${master.name}</td><td>${master.school}</td><td>${master.skill}</td><td>${master.influence}</td>`;tableBody.appendChild(row);});
}// 绑定按钮事件
btnDesc.addEventListener('click', () => fetchMasters('desc'));
btnAsc.addEventListener('click', () => fetchMasters('asc'));// 页面加载时默认显示降序
window.onload = () => fetchMasters('desc');

避坑指南： 使用async/await处理异步请求，代码结构更清晰，比回调函数或Promise链更易读。 fetch是浏览器原生API，无需引入第三方库，性能更优。渲染时先innerHTML = ''清空旧数据，避免重复追加导致表格行数倍增，这是初学者极易犯的错误。

运行与测试：验证你的成果

代码写完了，必须跑起来才算数。

准备数据：在data/masters.json中创建测试数据。格式如下：

[{ "name": "张三丰", "school": "武当", "skill": "太极拳", "influence": 98 },{ "name": "李四", "school": "少林", "skill": "硬气功", "influence": 85 },{ "name": "王五", "school": "峨眉", "skill": "剑法", "influence": 72 }
]

启动服务：在终端执行node server.js。看到“服务器运行在...”提示即成功。
浏览器验证：打开http://localhost:3000。
- 点击“按影响力降序”，表格应按98、85、72排列。
- 点击“按影响力升序”，顺序反转。
- 打开浏览器开发者工具（F12），查看Network面板，确认/api/masters请求状态码为200，响应体为JSON数组。