课程汇报
网页设计与Web 编程：网站构建过程
本专题记录个人展示网站的构建思路，包括前端语言、后端逻辑、动态数据、服务器部署和 AI 协作迭代过程。
HTML
CSS
JavaScript
HTML(EJS动态生成)
HTML是由浏览器直接解析的静态文件，EJS包含了HTML和嵌入式JavaScript在服务端（如Node.js/Express）被处理，生成动态HTML字符串再发送给客户端。
index.ejs代码
CSS
CSS 负责网页的视觉效果，例如：页面布局字体大小和颜色，卡片和留言板样式，响应式布局，动画效果。
main.css代码
JavaScript
JavaScript 负责一些浏览器端交互，例如：页面滚动时内容渐显，首页专题分类筛选，留言表单提交前校验。
main.js代码
后端语言与结构框架
Node.js （后端运行环境）
先前JavaScript主要在前端被浏览器解析执行，Node.js是JavaScript在服务器端的一个运行环境，负责运行服务器程序。
Express（Web框架）
Express是基于Node.js的Web后端框架，负责定义路由、处理请求、接收表单、返回页面。
服务器部署
阿里云
购买阿里云服务器和域名，在域名控制台里添加记录（服务器的ip地址）来解析域名。
登陆服务器上传文件
通过WinSCP，实现SFTP加密文件传输，将本地文件上传到Ubuntu服务器。
WinSCP
配置Nginx，npm等环境
在服务器上安装运行环境Node.js，npm，Nginx，Certbot等环境，Nginx用来监听端口，接受公网访问请求转发给内部相应端口的Node.js服务，Cerbort环境负责申请 HTTPS 证书。
数据存储
JSON文件
没有使用传统数据库，而是采用 JSON 文件作为轻量级数据存储。服务器端通过 Node.js 的文件系统模块读取 site.json，将其中的数据转换为 JavaScript 对象；当访客访问页面或提交留言时，服务器会修改对象中的访问量、留言等字段，再把更新后的对象重新写回 JSON 文件。
site.json
AI交互说明
通过 AI 辅助的整个过程更像是“人提出需求，AI 协助设计、编码、部署”。确定个人网页展示的网站主题，AI根据需求生成前后端代码；个人购买服务器并添加记录解析域名，手动上传文件并在本地服务器测试；AI 协助完成服务器环境检查、Node.js 安装、Nginx 配置、HTTPS 配置和服务启动；后续的一些可扩展性工作也交由AI添加。
