# VibeCoding网站模板框架

**Repository Path**: codingyunnew/vibe-coding-template-framework

## Basic Information

- **Project Name**: VibeCoding网站模板框架
- **Description**: VibeCoding模板框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-30
- **Last Updated**: 2026-01-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vibe Coding 模板系统

一个完整的全栈开发模板系统，包含用户端官网、管理后台和后端服务三个子系统。

## 项目概述

本项目是一个基于现代技术栈的全栈开发模板，旨在快速搭建企业级应用。系统采用前后端分离架构，包含以下三个子系统：

1. **web-frame** - 用户端官网
2. **sysWeb-frame** - 超级管理员后台管理端
3. **server-frame** - 后端服务

## 技术栈

### 公共技术
- **运行环境**: Node.js 20
- **开发语言**: TypeScript 5.3.3

### web-frame (用户端官网)
- **核心框架**: Vue 3.4.15
- **构建工具**: Vite 5.0.12
- **路由管理**: Vue Router 4.x

### sysWeb-frame (管理后台)
- **核心框架**: Vue 3.4.15
- **UI 组件库**: Ant Design Vue 4.x
- **构建工具**: Vite 5.0.12
- **状态管理**: Pinia 2.x

### server-frame (后端服务)
- **Web 框架**: Express 4.18.2
- **数据库**: MySQL (mysql2 3.6.5)
- **缓存**: Redis 5.8.2

## 项目结构

```
vibe-coding-template-frame/
├── web-frame/          # 用户端官网 (端口: 3000)
├── sysWeb-frame/       # 管理后台 (端口: 3001)
├── server-frame/       # 后端服务 (端口: 4000)
└── README.md           # 项目说明文档
```

## 快速开始

### 环境要求

- Node.js 20+
- MySQL 5.7+ (可选，后端有模拟数据兜底)
- Redis 5+ (可选，连接失败不影响启动)

### 安装依赖

分别进入各个子项目目录安装依赖：

```bash
# 用户端官网
cd web-frame
npm install

# 管理后台
cd ../sysWeb-frame
npm install

# 后端服务
cd ../server-frame
npm install
```

### 配置环境变量

#### server-frame 配置

编辑 `server-frame/.env.development`：

```env
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_NAME=vibe_coding

REDIS_URL=redis://localhost:6379
```

#### 前端项目配置

编辑 `web-frame/.env.development` 和 `sysWeb-frame/.env.development`：

```env
VITE_API_BASE_URL=http://192.168.1.100:4000/api
```

> 注意：请将 `192.168.1.100` 替换为您的本机 IP 地址

### 启动项目

在各自的目录中启动开发服务器：

```bash
# 后端服务 (端口 4000)
cd server-frame
npm run dev

# 用户端官网 (端口 3000)
cd web-frame
npm run dev

# 管理后台 (端口 3001)
cd sysWeb-frame
npm run dev
```

### 访问地址

- 用户端官网: `http://本机IP:3000`
- 管理后台: `http://本机IP:3001`
- 后端服务: `http://本机IP:4000`

## 功能特性

### web-frame (用户端官网)
- ✅ Vue 3 + TypeScript 开发
- ✅ Vite 快速构建
- ✅ Vue Router 路由管理
- ✅ 响应式设计
- ✅ 现代化 UI 界面

### sysWeb-frame (管理后台)
- ✅ Ant Design Vue 组件库
- ✅ 登录认证系统
- ✅ 路由守卫
- ✅ 后台布局（侧边栏 + 头部 + 内容区）
- ✅ 仪表盘统计
- ✅ Pinia 状态管理

### server-frame (后端服务)
- ✅ Express RESTful API
- ✅ MySQL 数据库支持
- ✅ Redis 缓存支持
- ✅ 统一响应格式 `{success, data, message}`
- ✅ 全局错误处理
- ✅ 请求日志记录
- ✅ CORS 跨域支持
- ✅ TypeScript 类型安全

## API 接口示例

### 健康检查
```
GET http://本机IP:4000/health
```

### 获取用户列表
```
GET http://本机IP:4000/api/users
```

### 获取用户详情
```
GET http://本机IP:4000/api/users/:id
```

## 开发规范

1. **代码风格**
   - 使用 TypeScript 进行类型安全开发
   - 组件使用 `<script setup>` 语法
   - 添加函数级注释

2. **API 规范**
   - 后端统一返回 `{success: true, data: {xxx}}` 格式
   - 前端正确处理双层嵌套结构 `response.data.data.xxx`

3. **调试规范**
   - 关键位置打印日志方便控制台查看
   - 不使用 Vite 代理配置
   - 页面调用接口的模块不显示模拟数据

4. **网络配置**
   - 不使用 `localhost`，使用本机网卡 IP 地址
   - 防止本地回环地址被代理软件接管

## 生产部署

### 构建项目

```bash
# 用户端官网
cd web-frame
npm run build

# 管理后台
cd sysWeb-frame
npm run build

# 后端服务
cd server-frame
npm run build
npm start
```

### 环境变量

生产环境请修改各项目的 `.env.production` 文件，配置正确的数据库、Redis 和 API 地址。

## 数据库初始化

如需测试完整功能，请创建数据库和表：

```sql
CREATE DATABASE vibe_coding;

USE vibe_coding;

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(50) NOT NULL,
  email VARCHAR(100) NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO users (username, email) VALUES 
  ('admin', 'admin@example.com'),
  ('user', 'user@example.com');
```

## 许可证

MIT

## 贡献指南

欢迎提交 Issue 和 Pull Request！

## 联系方式

如有问题，请通过 Issue 联系我们。