# nodejs-uniapp

**Repository Path**: gitZhongXH/uniapp01

## Basic Information

- **Project Name**: nodejs-uniapp
- **Description**: nodejs-uniapp
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-10
- **Last Updated**: 2026-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 电商APP全栈项目

一个基于 Vue 3 + Express + MySQL 的全栈电商应用，包含用户注册、登录认证等基础功能。

## 技术栈

### 前端 (Frontend)
- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **Vue Router** - 官方路由管理器
- **Pinia** - Vue 官方状态管理库

### 后端 (Backend)
- **Express.js** - Node.js Web 应用框架
- **Sequelize** - ORM 数据库工具
- **MySQL2** - MySQL 数据库驱动
- **JWT** - JSON Web Token 认证
- **Bcrypt** - 密码加密
- **CORS** - 跨域资源共享

### 数据库
- **MySQL** - 关系型数据库

## 项目结构

```
uniapp01/
├── backend/                 # 后端服务
│   ├── config/
│   │   └── database.js      # 数据库配置
│   ├── controllers/
│   │   └── auth.js          # 认证控制器
│   ├── middleware/
│   │   └── auth.js          # 认证中间件
│   ├── models/
│   │   └── User.js          # 用户模型
│   ├── routes/
│   │   └── auth.js          # 认证路由
│   ├── app.js               # 应用入口
│   └── package.json
├── frontend/                # 前端应用
│   ├── pages/
│   │   ├── index/           # 首页
│   │   └── login/           # 登录页
│   ├── store/
│   │   ├── index.js         # Store 入口
│   │   └── user.js          # 用户状态管理
│   ├── utils/
│   │   └── request.js       # 网络请求封装
│   ├── App.vue              # 根组件
│   ├── main.js              # 应用入口
│   ├── router.js            # 路由配置
│   └── package.json
└── README.md
```

## 环境要求

- Node.js >= 16.0.0
- MySQL >= 5.7
- npm 或 yarn

## 快速开始

### 1. 克隆项目

```bash
git clone <your-repo-url>
cd uniapp01
```

### 2. 数据库配置

1. 创建 MySQL 数据库：
```sql
CREATE DATABASE test_app CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

2. 修改后端数据库配置 [backend/config/database.js](backend/config/database.js)：
```javascript
const sequelize = new Sequelize('test_app', '你的用户名', '你的密码', {
  host: 'localhost',  // 数据库地址
  port: 3306,         // 数据库端口
  dialect: 'mysql',
  // ... 其他配置
});
```

### 3. 安装依赖

#### 后端依赖
```bash
cd backend
npm install
```

#### 前端依赖
```bash
cd frontend
npm install
```

### 4. 启动服务

#### 启动后端服务
```bash
cd backend
npm run dev
```
后端服务将运行在 http://localhost:3000

#### 启动前端服务
```bash
cd frontend
npm run dev
```
前端应用将运行在 http://localhost:5173

## API 接口文档

### 基础信息
- **Base URL**: `http://localhost:3000/api`
- **Content-Type**: `application/json`

### 接口列表

#### 1. 用户注册
- **URL**: `/auth/register`
- **Method**: `POST`
- **请求体**:
```json
{
  "username": "用户名",
  "password": "密码"
}
```
- **响应**:
```json
{
  "message": "用户注册成功",
  "user": {
    "id": 1,
    "username": "用户名"
  }
}
```

#### 2. 用户登录
- **URL**: `/auth/login`
- **Method**: `POST`
- **请求体**:
```json
{
  "username": "用户名",
  "password": "密码"
}
```
- **响应**:
```json
{
  "message": "登录成功",
  "token": "JWT_TOKEN",
  "user": {
    "id": 1,
    "username": "用户名"
  }
}
```

#### 3. 健康检查
- **URL**: `/health`
- **Method**: `GET`
- **响应**:
```json
{
  "status": "ok"
}
```

## 使用教程

### 用户注册流程

1. 打开前端应用 http://localhost:5173
2. 点击"注册"按钮进入注册页面
3. 输入用户名和密码
4. 点击"注册"提交表单
5. 注册成功后自动跳转到登录页面

### 用户登录流程

1. 在登录页面输入用户名和密码
2. 点击"登录"按钮
3. 登录成功后，JWT Token 将存储在 localStorage
4. 自动跳转到首页

### 认证状态说明

- 登录成功后，Token 会保存在浏览器的 localStorage 中
- 每次请求会自动携带 Token 进行身份验证
- 页面刷新时会自动检查登录状态

## 开发指南

### 后端开发

#### 添加新接口

1. 在 `controllers/` 目录下创建控制器
2. 在 `routes/` 目录下定义路由
3. 在 `app.js` 中注册路由

示例：
```javascript
// controllers/product.js
exports.getProducts = async (req, res) => {
  // 实现逻辑
};

// routes/product.js
const express = require('express');
const router = express.Router();
const { getProducts } = require('../controllers/product');

router.get('/', getProducts);
module.exports = router;

// app.js
const productRoutes = require('./routes/product');
app.use('/api/products', productRoutes);
```

#### 添加新模型

在 `models/` 目录下创建模型文件：
```javascript
const { DataTypes } = require('sequelize');
const sequelize = require('../config/database');

const Product = sequelize.define('Product', {
  name: DataTypes.STRING,
  price: DataTypes.DECIMAL,
  // ...
});

module.exports = Product;
```

### 前端开发

#### 添加新页面

1. 在 `pages/` 目录下创建页面文件夹和 .vue 文件
2. 在 `router.js` 中注册路由

示例：
```javascript
// router.js
{
  path: '/products',
  name: 'Products',
  component: () => import('./pages/products/products.vue')
}
```

#### 使用状态管理

```javascript
// 在组件中使用
import { useUserStore } from '../store/user'

export default {
  setup() {
    const userStore = useUserStore()
    
    // 访问状态
    console.log(userStore.isLoggedIn)
    
    // 调用方法
    userStore.login({ username, password })
    
    return { userStore }
  }
}
```

#### 发起网络请求

```javascript
import request from '../utils/request'

// GET 请求
const data = await request.get('/products')

// POST 请求
const result = await request.post('/products', { name: '商品', price: 99 })
```

## 脚本命令

### 后端命令
```bash
npm run start    # 生产模式启动
npm run dev      # 开发模式启动（热重载）
```

### 前端命令
```bash
npm run dev      # 启动开发服务器
npm run build    # 构建生产版本
npm run preview  # 预览生产构建
```

## 常见问题

### 1. 数据库连接失败
- 检查 MySQL 服务是否启动
- 确认数据库配置信息正确
- 检查防火墙设置

### 2. 跨域问题
- 后端已配置 CORS 中间件
- 检查前后端端口是否正确

### 3. 前端无法访问后端
- 确认后端服务已启动
- 检查 `request.js` 中的 API