# 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)