# web 

**Repository Path**: siwanmaoxi/web

## Basic Information

- **Project Name**: web 
- **Description**: web 大作业
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-03
- **Last Updated**: 2026-01-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web技术及应用开发实践 - 实验作业

云南大学软件学院 Web开发课程实验项目

## 项目概述

本仓库包含三个实验项目：

- **实验1**: 百度首页布局 - 使用HTML/CSS/JS实现
- **实验2**: 云南大学软件学院网站 - 使用Vite + TypeScript + Tailwind CSS实现
- **实验3-4**: 学生管理系统后端API - 使用NestJS + TypeORM + SQLite实现

## 目录结构

```
web/
├── experiment1/              # 实验1：百度首页
│   ├── index.html
│   ├── css/
│   ├── js/
│   ├── images/
│   └── README.md
├── experiment2/              # 实验2：软院网站（响应式）
│   ├── index.html
│   ├── package.json
│   ├── vite.config.ts
│   ├── tailwind.config.js
│   ├── src/
│   └── README.md
├── experiment34/             # 实验3-4：学生管理系统API
│   └── student-management-api/
│       ├── src/              # 源代码
│       ├── package.json
│       ├── tsconfig.json
│       ├── nest-cli.json
│       └── README.md
├── 百度.png                  # 实验1参考截图
├── 软院.png                  # 实验2参考截图
└── README.md                 # 本文件
```

## 实验1：百度首页

### 技术要求
- ✅ 纯HTML、CSS、JavaScript实现
- ✅ 不使用第三方框架
- ✅ 独立完成，未抄袭原站点代码

### 运行方式
```bash
# 直接打开
双击 experiment1/index.html

# 或使用本地服务器
cd experiment1
python -m http.server 8000
```

### 功能实现
- 完整页面布局
- 搜索框交互
- 响应式设计
- 动画效果

详见 [experiment1/README.md](experiment1/README.md)

## 实验2：云南大学软件学院网站

### 技术要求
- ✅ 使用响应式前端框架（Tailwind CSS）
- ✅ 使用现代构建工具（Vite）
- ✅ 使用TypeScript
- ✅ 响应式设计

### 安装和运行
```bash
# 1. 进入项目目录
cd experiment2

# 2. 安装依赖（首次运行）
npm install

# 3. 启动开发服务器
npm run dev

# 4. 构建生产版本
npm run build
```

### 功能实现
- 响应式布局（桌面端、平板、手机）
- 轮播图组件（自动播放）
- 动态内容渲染
- TypeScript类型安全
- Tailwind CSS样式

详见 [experiment2/README.md](experiment2/README.md)

## 实验3-4：学生管理系统后端API

### 技术要求
- ✅ 使用NodeJS和TypeScript开发后端服务
- ✅ 使用NestJS框架
- ✅ 使用TypeORM进行数据库操作
- ✅ 实现RESTful API规范
- ✅ 部署到云端服务器（AutoDL）

### 安装和运行
```bash
# 1. 进入项目目录
cd experiment34/student-management-api

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run start:dev

# 4. 构建生产版本
npm run build

# 5. 启动生产服务器
npm run start:prod
```

### 功能实现
- 学生信息CRUD操作（创建、查询、更新、删除）
- 课程信息CRUD操作
- 学生与课程的多对多关联关系
- 数据验证（使用class-validator）
- RESTful API设计（11个接口）
- TypeORM数据库ORM
- SQLite轻量级数据库
- PM2进程管理（生产环境）
- AutoDL云端部署

### API接口
**学生管理**：
- `POST /api/students` - 创建学生
- `GET /api/students` - 获取所有学生
- `GET /api/students/:id` - 获取单个学生
- `GET /api/students/by-number/:studentNumber` - 按学号查询
- `PUT /api/students/:id` - 更新学生信息
- `DELETE /api/students/:id` - 删除学生

**课程管理**：
- `POST /api/courses` - 创建课程
- `GET /api/courses` - 获取所有课程
- `GET /api/courses/:id` - 获取单个课程
- `PUT /api/courses/:id` - 更新课程信息
- `DELETE /api/courses/:id` - 删除课程

详见 [experiment34/student-management-api/README.md](experiment34/student-management-api/README.md)

## 环境要求

### 实验1
- 现代浏览器（Chrome、Firefox、Safari、Edge）
- 无需其他依赖

### 实验2
- Node.js 16+
- npm 7+
- 现代浏览器

### 实验3-4
- Node.js 16+
- npm 7+
- TypeScript 5+
- SQLite 3（使用sql.js，无需单独安装）

## 开发说明

### 实验1开发流程
1. 使用浏览器直接打开HTML文件
2. 使用浏览器开发者工具调试
3. 修改代码后刷新页面查看效果

### 实验2开发流程
1. 运行 `npm run dev` 启动开发服务器
2. 修改代码后自动热更新
3. 使用浏览器开发者工具调试
4. 使用 `npm run build` 构建生产版本

### 实验3-4开发流程
1. 运行 `npm run start:dev` 启动开发服务器（热重载）
2. 修改代码后自动重新编译
3. 使用Postman或curl测试API接口
4. 查看控制台SQL日志进行调试
5. 使用 `npm run build` 构建生产版本
6. 使用PM2部署到云端服务器

## 技术对比

| 特性 | 实验1 | 实验2 | 实验3-4 |
|------|-------|-------|---------|
| HTML | ✅ 原生 | ✅ 原生 | - |
| CSS | ✅ 原生 | ✅ Tailwind CSS | - |
| JavaScript | ✅ 原生JS | ✅ TypeScript | ✅ TypeScript |
| 框架 | ❌ 无 | ❌ 无 | ✅ NestJS |
| 构建工具 | ❌ 无 | ✅ Vite | ✅ @nestjs/cli |
| 响应式 | ✅ 媒体查询 | ✅ Tailwind响应式 | - |
| 类型检查 | ❌ 无 | ✅ TypeScript | ✅ TypeScript |
| 热更新 | ❌ 无 | ✅ HMR | ✅ 热重载 |
| 数据库 | ❌ 无 | ❌ 无 | ✅ SQLite (TypeORM) |
| API | ❌ 无 | ❌ 无 | ✅ RESTful API |
| 部署 | 静态托管 | 静态托管 | 云服务器 (PM2) |

## ⚠️ 重要：需要从原网站获取的内容

### 实验1（百度）
如需更真实的效果，可访问 www.baidu.com 获取：
- 百度Logo的SVG或图片
- 确切的颜色值（蓝色、红色）
- 页面图标

### 实验2（软院网站）- **必需操作**
⚠️ **实验2需要添加图片才能完整显示**

请按以下步骤操作：

#### 1. 获取轮播图图片
访问云南大学软件学院官网，下载3张轮播图：
- 方法：右键点击轮播图 → "图片另存为"
- 或使用浏览器开发者工具（F12 → Network → 找到图片）

#### 2. 放置图片
将下载的图片放到以下位置：
```
experiment2/public/images/
├── slide1.jpg    (第一张轮播图)
├── slide2.jpg    (第二张轮播图)
└── slide3.jpg    (第三张轮播图)
```

#### 3. 图片要求
- **格式**：JPG、PNG 或 WebP
- **尺寸**：建议 1920x600 或 1600x500 像素
- **大小**：建议单张图片不超过 500KB

#### 4. 其他可选资源
- 学校Logo图片
- 真实新闻和通知数据
- 官方配色方案

**详细说明**：查看 `experiment2/public/images/README.md`

#### 备用方案
如果暂时无法获取图片，代码会自动显示渐变色背景作为占位

## 提交清单

实验提交时应包含：

### 实验1
- [ ] index.html
- [ ] css/style.css
- [ ] js/main.js
- [ ] README.md
- [ ] 所需图片资源（如有）

### 实验2
- [ ] 所有源代码文件
- [ ] package.json
- [ ] 配置文件（vite.config.ts, tailwind.config.js等）
- [ ] README.md
- [ ] node_modules 不需要提交（通过npm install安装）
- [ ] dist 不需要提交（通过npm run build生成）

### 实验3-4
- [ ] 所有源代码文件（src/目录）
- [ ] package.json
- [ ] 配置文件（tsconfig.json, nest-cli.json等）
- [ ] README.md
- [ ] API测试文档
- [ ] 实验报告
- [ ] 云端部署指南
- [ ] node_modules 不需要提交（通过npm install安装）
- [ ] dist 不需要提交（通过npm run build生成）
- [ ] *.db 不需要提交（数据库文件）