WEB02
谢谢你AI 你是我最好的老师
网站搭建思路与新手学习指南
关于开发顺序建议
推荐顺序：先后端，再前端，最后联调。
先把后端API设计好，前端可以用假数据先做页面。
后端API完成后，前端再对接真实数据。
这样可以减少返工，开发效率更高。
一、明确目标和需求
- 你要做什么类型的网站？（如：博客、商城、后台管理、展示页等）
- 需要哪些核心功能？（如：用户注册登录、数据展示、数据管理、评论、上传下载等）
- 建议：可以先画一个简单的页面草图，列出主要功能。
二、设计网站结构
- 前端：负责页面展示和用户交互（HTML、CSS、JavaScript、前端框架如React/Vue等）
- 后端：负责数据处理、业务逻辑、接口提供（Node.js、Python、Java等）
- 数据库：负责数据存储（MySQL、MongoDB、SQLite等）
- 建议：新手可以先做“前后端不分离”的简单项目，逐步过渡到“前后端分离”。
三、技术选型
- 前端：原生JS、Vue、React、Angular等
- 后端：Node.js+Express、Python+Django/Flask、Java+Spring等
- 数据库：MySQL、MongoDB、SQLite等
- 建议：新手推荐 Node.js + Express + MongoDB 或 MySQL，前端用原生JS或Vue。
四、环境搭建
- 安装开发工具（如 VSCode）
- 安装 Node.js、数据库等运行环境
- 初始化前端和后端项目（如
npm init、vue create等） - 建议：多尝试命令行操作，熟悉常用命令。
五、前后端开发流程
前端开发
- 设计页面结构（HTML）
- 美化页面（CSS）
- 实现交互（JavaScript）
- 调用后端API获取和提交数据
- 建议：多用浏览器开发者工具调试页面。
后端开发
- 设计API接口（RESTful风格）
- 实现业务逻辑（如用户注册、登录、数据增删改查等）
- 连接数据库，读写数据
- 做好安全和错误处理
- 建议：多写注释，理清每一步的逻辑。
六、前后端联调
- 前端通过HTTP请求（如fetch/axios）调用后端API
- 后端返回JSON数据，前端渲染到页面
- 不断测试和优化交互体验
- 建议：遇到跨域问题时，了解CORS的基本原理。
七、部署上线
- 购买服务器（如阿里云、腾讯云等）
- 安装运行环境（Node.js、数据库等）
- 上传代码，安装依赖
- 配置Nginx等反向代理
- 域名解析，正式上线
- 建议：新手可以先用本地或内网环境练习部署。
八、持续优化和维护
- 监控网站运行状态
- 修复bug，增加新功能
- 数据备份与安全防护
- 建议：定期备份数据，关注安全问题。
新手常见问题与学习建议
常见问题
- 环境变量配置错误，导致项目无法启动
- 端口被占用，服务器启动失败
- 前后端接口不一致，数据无法正常交互
- 跨域请求被浏览器拦截
- 数据库连接失败
后端开发流程
- 设计数据结构（如学生信息：id、name、score）
- 设计并实现 API 接口（RESTful 风格）
- 使用内存数组或数据库存储数据
- 实现增删改查功能
- 测试每个接口是否正常
- server.js
// 导入express和cors模块
// express是Node.js的Web框架，用于构建Web应用
// cors是跨域资源共享的中间件，用于解决前端跨域请求的问题
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3000;
app.use(cors());
app.use(express.json());
// 模拟学生数据
let students = [
{ id: 1, name: '张三', score: 90 },
{ id: 2, name: '李四', score: 85 },
{ id: 3, name: '王五', score: 78 }
];
// 获取所有学生
app.get('/api/students', (req, res) => {
res.json(students);
});
//一个三元运算符（条件运算符），格式是：条件 ? 值1 : 值2
//如果条件为真，返回值1
//如果条件为假，返回值2
//students.length ? students[students.length - 1].id + 1 : 1
//如果students.length为真，返回students[students.length - 1].id + 1
//如果students.length为假，返回1
//students[students.length - 1].id + 1
//如果students.length为真，返回students[students.length - 1].id + 1
//如果students.length为假，返回1
// 新增学生
app.post('/api/students', (req, res) => {
const { name, score } = req.body;
const newStudent = {
id: students.length ? students[students.length - 1].id + 1 : 1,
name,
score
};
students.push(newStudent);
res.json({ message: '添加成功', student: newStudent });
});
// 修改学生信息
app.put('/api/students/:id', (req, res) => {
const id = parseInt(req.params.id);
const { name, score } = req.body;
const student = students.find(s => s.id === id);
if (student) {
student.name = name;
student.score = score;
res.json({ message: '修改成功', student });
} else {
res.status(404).json({ message: '未找到该学生' });
}
});
// 删除学生
app.delete('/api/students/:id', (req, res) => {
const id = parseInt(req.params.id);
const index = students.findIndex(s => s.id === id);
if (index !== -1) {
const removed = students.splice(index, 1);
res.json({ message: '删除成功', student: removed[0] });
} else {
res.status(404).json({ message: '未找到该学生' });
}
});
app.listen(PORT, () => {
console.log(服务器已启动，监听端口${PORT});
});
//后端具备以下功能：
//获取所有学生信息
//新增学生
//修改学生信息
//删除学生
//数据暂时保存在内存数组中，方便初学者理解和测试。
//你只需在命令行进入 LEARNWEBSYSTEM/backend 目录，Powershell执行：
//Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
//npm init -y
//npm install express cors
//node server.js
//API（全称：Application Programming Interface，应用程序编程接口）是一组预先定义好的“规则”和“接口”，
// 用来让不同的软件系统之间进行数据交换和功能调用。
//API接口通常由三部分组成：
//1. 请求方法（GET、POST、PUT、DELETE等）
//2. 请求路径（URL）
//3. 请求参数（Query String、Body）
//4. 响应数据（JSON、XML）
//API接口的格式通常是：
//请求方法 请求路径 请求参数 响应数据
//API就是前后端、系统与系统之间“沟通交流”的桥梁。
//前端通过API获取和提交数据，后端通过API对外提供服务。
//API接口的实现方式有多种，最常见的是使用HTTP协议。
//HTTP协议是一种基于TCP/IP协议的“超文本传输协议”，
// 用于在Web浏览器和Web服务器之间传输数据。
//HTTP协议的请求方法有GET、POST、PUT、DELETE等。
//GET方法用于获取资源，POST方法用于创建资源，PUT方法用于更新资源，DELETE方法用于删除资源。
前端学习流程
推荐编写顺序
index.html（先写结构）
先把网页的基本结构搭好，比如标题、表单、表格等。
这样你能在浏览器里看到页面的“骨架”，方便后续调试和开发。
style.css（可选，结构出来后简单美化）
可以先不写，等 index.html 有内容后再加样式。
也可以边写结构边加简单样式，让页面更美观。
script.js（最后写逻辑）
当页面结构有了，再写 JavaScript 代码，实现数据的加载、添加、删除等功能。
这样你可以一边写一边测试功能是否正常。
总结
最常见顺序：
先写 index.html
再写 style.css（可穿插进行）
最后写 script.js
这样做的好处是：
先有页面结构，后有样式和交互，思路清晰，开发效率高。
- index.html
- style.css
body {
font-family: Arial, sans-serif;
margin: 40px;
padding: 20px;
background-color: #f4f4f4;
}
table {
border-collapse: collapse;
width: 60%;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px 12px;
text-align: center;
}
th { background-color: #f2f2f2; }
form { margin-bottom: 20px; }
button { cursor: pointer; }
- script.js
// 定义API接口的URL
// 后端学生数据接口的地址，前端通过它和后端通信
const apiUrl = 'http://localhost:3000/api/students';
// 获取所有学生数据
function loadStudents() {
// 使用fetch函数发送GET请求，获取学生数据
fetch(apiUrl) //向后端请求学生数据（GET请求）
.then(res => res.json()) //将后端返回的JSON数据转换为JavaScript对象
.then(data => { //处理后端返回的数据，拿到学生数组后，开始渲染表格
const table = document.getElementById('studentTable'); //获取表格元素
table.innerHTML = ''; //清空表格内容
data.forEach(student => { //遍历学生数据
table.innerHTML += <tr> <td>${student.id}</td> <td>${student.name}</td> <td>${student.score}</td> <td><button onclick="deleteStudent(${student.id})">删除</button></td> </tr> ;
});
});
}
// 删除学生
// 向后端发送 DELETE 请求，删除指定 id 的学生
function deleteStudent(id) {
fetch(${apiUrl}/${id}, {
method: 'DELETE',
})
.then(res => res.json())
// 删除成功后，重新加载学生数据
.then(() => {
loadStudents();
});
}
// 添加学生
// 向后端发送 POST 请求，添加新学生
// 监听表单提交事件（onsubmit）
// 阻止表单默认提交行为（e.preventDefault()）
// 获取表单输入的学生姓名和成绩
// 向后端发送 POST 请求，添加新学生
document.getElementById('addForm').onsubmit = function(e) {
e.preventDefault(); //阻止表单默认提交行为
const name = document.getElementById('studentName').value; //获取表单输入的学生姓名
const score = document.getElementById('studentScore').value; //获取表单输入的学生成绩
fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
})
.then(res => res.json())
.then(() => {
loadStudents();
this.reset();
});
};
// 添加成功后，重新加载学生数据
window.onload = loadStudents;
浙公网安备 33010602011771号