up

2026-03-25 23:08:58 +08:00
commit 00bd6eef13
40 changed files with 7262 additions and 0 deletions
@@ -0,0 +1,311 @@
+# Qoder 辅助编程实战：Linux 服务器 Web 开发企业首页
+
+## 一、学习目标
+
+通过本教程，您将学会：
+- 使用 Qoder 连接远程 Linux 服务器
+- 在服务器上搭建 Web 服务环境
+- 开发一个企业首页网站
+- 使用 Qoder 的 AI 辅助编程功能
+
+---
+
+## 二、环境准备
+
+### 2.1、服务器环境要求
+
+| 组件 | 版本要求 | 用途 |
+|-----|---------|------|
+| Linux 系统 | Ubuntu 20.04+ / CentOS 7+ | 服务器操作系统 |
+| Node.js | 18.x+ | 运行环境 |
+| Nginx | 1.20+ | Web 服务器 |
+| Git | 2.x+ | 版本控制 |
+
+### 2.2、Qoder 配置
+
+确保 Qoder 已安装以下功能：
+- SSH 远程连接插件
+- 终端功能
+- 文件浏览器
+
+---
+
+## 三、服务器环境搭建
+
+### 3.1、连接服务器
+
+在 Qoder 中打开终端，连接您的 Linux 服务器：
+
+```bash
+# 使用 SSH 连接服务器
+ssh username@your-server-ip
+
+# 示例
+ssh root@192.168.1.100
+```
+
+### 3.2、安装 Node.js
+
+```bash
+# 使用 nvm 安装 Node.js
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+source ~/.bashrc
+
+# 安装 Node.js 18
+nvm install 18
+nvm use 18
+
+# 验证安装
+node -v  # 应显示 v18.x.x
+npm -v   # 应显示 9.x.x
+```
+
+### 3.3、安装 Nginx
+
+```bash
+# Ubuntu/Debian
+sudo apt update
+sudo apt install -y nginx
+
+# CentOS/RHEL
+sudo yum install -y epel-release
+sudo yum install -y nginx
+
+# 启动 Nginx
+sudo systemctl start nginx
+sudo systemctl enable nginx
+
+# 验证安装
+curl http://localhost
+```
+
+---
+
+## 四、创建企业首页项目
+
+### 4.1、项目结构
+
+```
+enterprise-homepage/
+├── public/                 # 静态资源
+│   ├── css/
+│   │   └── style.css
+│   ├── js/
+│   │   └── main.js
+│   └── images/
+├── views/                  # 页面模板
+│   └── index.html
+├── server.js               # 服务器入口
+├── package.json
+└── README.md
+```
+
+### 4.2、初始化项目
+
+在服务器上执行：
+
+```bash
+# 创建项目目录
+mkdir -p /var/www/enterprise-homepage
+cd /var/www/enterprise-homepage
+
+# 初始化 npm 项目
+npm init -y
+
+# 安装依赖
+npm install express
+```
+
+---
+
+## 五、代码开发
+
+### 5.1、使用 Qoder 编辑远程文件
+
+Qoder 支持通过 SSH 编辑远程服务器文件：
+
+1. 在 Qoder 中按 `Cmd+Shift+P`
+2. 选择 **"Remote-SSH: Connect to Host"**
+3. 输入服务器地址和凭据
+4. 打开 `/var/www/enterprise-homepage` 目录
+
+### 5.2、核心代码文件
+
+参考 `code/` 目录下的完整代码：
+
+| 文件 | 路径 | 说明 |
+|-----|------|------|
+| `server.js` | `code/enterprise-homepage/server.js` | Express 服务器 |
+| `index.html` | `code/enterprise-homepage/views/index.html` | 首页 HTML |
+| `style.css` | `code/enterprise-homepage/public/css/style.css` | 样式文件 |
+| `main.js` | `code/enterprise-homepage/public/js/main.js` | 交互脚本 |
+
+---
+
+## 六、Qoder AI 辅助编程技巧
+
+### 6.1、代码生成
+
+在 Qoder 中，选中代码区域或打开新文件，使用 AI 辅助：
+
+**示例提示词：**
+```
+请帮我创建一个响应式的企业首页导航栏，包含：
+- 公司 Logo
+- 导航菜单（首页、产品、服务、关于我们、联系我们）
+- 移动端汉堡菜单
+- 滚动时导航栏固定并改变样式
+```
+
+### 6.2、代码解释
+
+选中不理解的代码，右键选择 **"解释选中代码"**。
+
+### 6.3、代码优化
+
+选中需要优化的代码，使用提示词：
+```
+请优化这段代码：
+1. 提高性能
+2. 添加错误处理
+3. 增加代码注释
+```
+
+### 6.4、调试辅助
+
+遇到错误时，复制错误信息给 Qoder：
+```
+我遇到了这个错误：
+[粘贴错误信息]
+
+请帮我分析原因并提供解决方案。
+```
+
+---
+
+## 七、部署与运行
+
+### 7.1、启动服务
+
+在服务器终端执行：
+
+```bash
+cd /var/www/enterprise-homepage
+node server.js
+```
+
+### 7.2、使用 PM2 守护进程（生产环境）
+
+```bash
+# 安装 PM2
+npm install -g pm2
+
+# 启动服务
+pm2 start server.js --name "enterprise-homepage"
+
+# 设置开机自启
+pm2 startup
+pm2 save
+```
+
+### 7.3、Nginx 反向代理
+
+```bash
+# 创建 Nginx 配置文件
+sudo nano /etc/nginx/sites-available/enterprise-homepage
+```
+
+添加配置：
+```nginx
+server {
+    listen 80;
+    server_name your-domain.com;
+
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
+```
+
+启用配置：
+```bash
+sudo ln -s /etc/nginx/sites-available/enterprise-homepage /etc/nginx/sites-enabled/
+sudo nginx -t
+sudo systemctl reload nginx
+```
+
+---
+
+## 八、Qoder 工作流总结
+
+```plantuml
+@startuml
+skinparam componentStyle rectangle
+
+start
+:在 Qoder 中连接 SSH;
+:打开远程项目目录;
+:使用 AI 辅助编写代码;
+:保存并同步到服务器;
+:在终端启动服务;
+:浏览器预览效果;
+if (需要修改?) then (是)
+  :返回编辑代码;
+else (否)
+  :部署完成;
+endif
+stop
+
+@enduml
+```
+
+---
+
+## 九、常见问题
+
+### Q1: Qoder 无法连接 SSH？
+**A:** 检查 SSH 配置：
+```bash
+# 确保 SSH 服务运行
+sudo systemctl status sshd
+
+# 检查防火墙
+sudo ufw allow 22
+```
+
+### Q2: 如何上传本地文件到服务器？
+**A:** 使用 scp 命令：
+```bash
+scp -r local-folder username@server-ip:/remote/path
+```
+
+### Q3: 如何调试 Node.js 应用？
+**A:** 使用 `--inspect` 参数：
+```bash
+node --inspect=0.0.0.0:9229 server.js
+```
+然后在 Chrome 中打开 `chrome://inspect`
+
+---
+
+## 十、下一步学习
+
+完成企业首页后，您可以尝试：
+1. 添加后端 API 接口
+2. 集成数据库（MongoDB/MySQL）
+3. 实现用户认证系统
+4. 添加管理后台
+5. 部署到云服务器（阿里云/腾讯云/AWS）
+
+---
+
+## 参考资源
+
+- [Express 官方文档](https://expressjs.com/)
+- [Nginx 配置指南](https://nginx.org/en/docs/)
+- [Qoder 官方文档](https://qoder.io/docs)