# 下单小票打印

**Repository Path**: livesleep/print-order

## Basic Information

- **Project Name**: 下单小票打印
- **Description**: 简单的订单CRUD搭配打印功能
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-27
- **Last Updated**: 2025-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript

## README

# 订单打印管理系统

## 📋 项目概述

订单打印管理系统是一个专为中小企业设计的轻量级订单管理和打印解决方案，提供直观的订单管理界面、实时打印预览以及历史打印记录查询功能。系统采用前后端分离架构，支持订单的创建、编辑、打印和历史记录查询等核心业务流程。

## 🚀 功能特性

### 核心功能
- **订单管理**：创建、编辑、删除和查询订单信息
- **客户信息管理**：存储和管理客户姓名、联系电话等信息
- **商品明细管理**：支持多商品订单，自动计算小计和总计金额
- **打印预览功能**：在打印前预览订单完整内容，避免打印错误
- **打印记录查询**：查看所有历史打印记录，并支持预览详情
- **用户认证系统**：提供登录功能，保护系统安全

### 技术优势
- **响应式设计**：适配各种设备屏幕，提供良好的移动端体验
- **实时数据更新**：订单状态实时同步，确保数据准确性
- **优雅的UI**：采用Element Plus组件库，提供现代化的用户界面
- **前后端分离**：前端Vue.js + 后端Node.js，架构清晰，易于维护

## 🛠️ 技术栈

### 前端技术
- **Vue.js 3**：渐进式JavaScript框架
- **Element Plus**：Vue 3组件库，提供丰富的UI组件
- **Vite**：现代前端构建工具，提供快速的开发体验
- **Axios**：HTTP客户端，用于与后端API通信

### 后端技术
- **Node.js**：JavaScript运行环境
- **Express**：Web应用框架
- **MySQL**：关系型数据库
- **dotenv**：环境变量管理

## 📁 项目结构

```
print/
├── backend/             # 后端代码
│   ├── db.js            # 数据库配置和连接
│   ├── index.js         # 后端入口文件
│   ├── middlewares/     # 中间件
│   ├── routes/          # 路由定义
│   └── package.json     # 后端依赖
├── frontend/            # 前端代码
│   ├── src/             # 源代码
│   │   ├── components/  # 组件
│   │   ├── hooks/       # 自定义Hooks
│   │   ├── services/    # API服务
│   │   ├── views/       # 页面视图
│   │   └── main.js      # 前端入口文件
│   └── package.json     # 前端依赖
└── .gitignore           # Git忽略文件
```

## 🔌 系统架构

```svg
<svg width="800" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="800" height="400" fill="#f5f7fa" rx="10" ry="10"/>
  
  <!-- 标题 -->
  <text x="400" y="30" font-family="Arial" font-size="20" font-weight="bold" text-anchor="middle" fill="#303133">系统架构图</text>
  
  <!-- 前端层 -->
  <rect x="50" y="60" width="300" height="100" rx="8" ry="8" fill="#409EFF" opacity="0.9"/>
  <text x="200" y="110" font-family="Arial" font-size="16" font-weight="bold" text-anchor="middle" fill="white">前端应用</text>
  <text x="120" y="140" font-family="Arial" font-size="12" text-anchor="middle" fill="white">Vue.js 3</text>
  <text x="200" y="140" font-family="Arial" font-size="12" text-anchor="middle" fill="white">Element Plus</text>
  <text x="280" y="140" font-family="Arial" font-size="12" text-anchor="middle" fill="white">Vite</text>
  
  <!-- 后端层 -->
  <rect x="450" y="60" width="300" height="100" rx="8" ry="8" fill="#67C23A" opacity="0.9"/>
  <text x="600" y="110" font-family="Arial" font-size="16" font-weight="bold" text-anchor="middle" fill="white">后端服务</text>
  <text x="520" y="140" font-family="Arial" font-size="12" text-anchor="middle" fill="white">Node.js</text>
  <text x="600" y="140" font-family="Arial" font-size="12" text-anchor="middle" fill="white">Express</text>
  <text x="680" y="140" font-family="Arial" font-size="12" text-anchor="middle" fill="white">REST API</text>
  
  <!-- 数据库层 -->
  <rect x="250" y="220" width="300" height="100" rx="8" ry="8" fill="#E6A23C" opacity="0.9"/>
  <text x="400" y="270" font-family="Arial" font-size="16" font-weight="bold" text-anchor="middle" fill="white">MySQL数据库</text>
  <text x="320" y="300" font-family="Arial" font-size="12" text-anchor="middle" fill="white">orders表</text>
  <text x="400" y="300" font-family="Arial" font-size="12" text-anchor="middle" fill="white">print_records表</text>
  <text x="480" y="300" font-family="Arial" font-size="12" text-anchor="middle" fill="white">users表</text>
  
  <!-- 连接箭头 -->
  <line x1="350" y1="110" x2="450" y2="110" stroke="#909399" stroke-width="2" marker-end="url(#arrowhead)"/>
  <line x1="200" y1="160" x2="200" y2="220" stroke="#909399" stroke-width="2" marker-end="url(#arrowhead)"/>
  <line x1="600" y1="160" x2="600" y2="220" stroke="#909399" stroke-width="2" marker-end="url(#arrowhead)"/>
  
  <!-- 箭头标记 -->
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#909399"/>
    </marker>
  </defs>
</svg>
```

## 📋 数据库设计

### orders表
| 字段名 | 数据类型 | 约束 | 描述 |
| :--- | :--- | :--- | :--- |
| `id` | `INT` | `PRIMARY KEY AUTO_INCREMENT` | 订单ID |
| `order_no` | `VARCHAR(50)` | `NOT NULL UNIQUE` | 订单编号 |
| `customer_name` | `VARCHAR(100)` | `NOT NULL` | 客户姓名 |
| `customer_phone` | `VARCHAR(20)` | | 客户电话 |
| `total_amount` | `DECIMAL(10,2)` | `NOT NULL` | 订单总金额 |
| `order_time` | `DATETIME` | `NOT NULL DEFAULT CURRENT_TIMESTAMP` | 下单时间 |
| `print_status` | `TINYINT` | `DEFAULT 0` | 打印状态(0:未打印, 1:已打印) |
| `items` | `JSON` | `NOT NULL` | 商品明细 |

### print_records表
| 字段名 | 数据类型 | 约束 | 描述 |
| :--- | :--- | :--- | :--- |
| `id` | `INT` | `PRIMARY KEY AUTO_INCREMENT` | 记录ID |
| `order_id` | `INT` | `NOT NULL, FOREIGN KEY` | 关联的订单ID |
| `print_time` | `DATETIME` | `NOT NULL DEFAULT CURRENT_TIMESTAMP` | 打印时间 |
| `printer_info` | `VARCHAR(200)` | | 打印机信息 |
| `print_status` | `VARCHAR(20)` | `DEFAULT 'pending'` | 打印状态 |

### users表
| 字段名 | 数据类型 | 约束 | 描述 |
| :--- | :--- | :--- | :--- |
| `id` | `INT` | `PRIMARY KEY AUTO_INCREMENT` | 用户ID |
| `username` | `VARCHAR(50)` | `NOT NULL UNIQUE` | 用户名 |
| `password` | `VARCHAR(100)` | `NOT NULL` | 密码 |
| `created_at` | `DATETIME` | `NOT NULL DEFAULT CURRENT_TIMESTAMP` | 创建时间 |

## 🚦 快速开始

### 环境要求
- Node.js 14.x 或更高版本
- MySQL 5.7 或更高版本

### 安装步骤

#### 1. 克隆项目
```bash
git clone [项目仓库地址]
cd print
```

#### 2. 配置后端
```bash
# 进入后端目录
cd backend

# 安装依赖
npm install

# 配置环境变量
# 创建 .env 文件并配置以下内容
# DB_HOST=localhost
# DB_USER=root
# DB_PASSWORD=your_password
# DB_NAME=print_system
# PORT=3000

# 启动后端服务
node index.js
```

#### 3. 配置前端
```bash
# 进入前端目录
cd ../frontend

# 安装依赖
npm install

# 启动前端服务
npm run dev
```

#### 4. 访问系统
打开浏览器，访问 http://localhost:5173/

## 📸 系统截图

### 登录页面
```svg
<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="800" height="500" fill="#f0f2f5"/>
  
  <!-- 登录卡片 -->
  <rect x="250" y="100" width="300" height="300" rx="10" ry="10" fill="white" stroke="#e0e0e0" stroke-width="1"/>
  
  <!-- 标题 -->
  <text x="400" y="150" font-family="Arial" font-size="20" font-weight="bold" text-anchor="middle" fill="#303133">用户登录</text>
  
  <!-- 用户名输入框 -->
  <rect x="280" y="180" width="240" height="40" rx="4" ry="4" fill="#f5f7fa" stroke="#dcdfe6" stroke-width="1"/>
  <text x="295" y="205" font-family="Arial" font-size="14" text-anchor="middle" fill="#909399">用户名</text>
  
  <!-- 密码输入框 -->
  <rect x="280" y="240" width="240" height="40" rx="4" ry="4" fill="#f5f7fa" stroke="#dcdfe6" stroke-width="1"/>
  <text x="295" y="265" font-family="Arial" font-size="14" text-anchor="middle" fill="#909399">密码</text>
  
  <!-- 登录按钮 -->
  <rect x="280" y="300" width="240" height="40" rx="4" ry="4" fill="#409EFF"/>
  <text x="400" y="325" font-family="Arial" font-size="16" font-weight="bold" text-anchor="middle" fill="white">登录</text>
  
  <!-- 提示信息 -->
  <text x="400" y="370" font-family="Arial" font-size="12" text-anchor="middle" fill="#909399">默认账号: admin | 默认密码: 123456</text>
</svg>
```

### 订单列表页面
```svg
<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="800" height="500" fill="#f5f7fa"/>
  
  <!-- 顶部导航 -->
  <rect x="0" y="0" width="800" height="60" fill="#409EFF"/>
  <text x="400" y="35" font-family="Arial" font-size="18" font-weight="bold" text-anchor="middle" fill="white">订单打印管理系统</text>
  
  <!-- 主内容区域 -->
  <rect x="20" y="80" width="760" height="400" rx="8" ry="8" fill="white" stroke="#e0e0e0" stroke-width="1"/>
  
  <!-- 页面标题 -->
  <text x="40" y="110" font-family="Arial" font-size="18" font-weight="bold" fill="#303133">订单管理</text>
  
  <!-- 搜索栏 -->
  <rect x="40" y="130" width="300" height="32" rx="4" ry="4" fill="#f5f7fa" stroke="#dcdfe6" stroke-width="1"/>
  <rect x="350" y="130" width="80" height="32" rx="4" ry="4" fill="#409EFF"/>
  <text x="390" y="150" font-family="Arial" font-size="14" text-anchor="middle" fill="white">搜索</text>
  <rect x="440" y="130" width="80" height="32" rx="4" ry="4" fill="#67C23A"/>
  <text x="480" y="150" font-family="Arial" font-size="14" text-anchor="middle" fill="white">新增</text>
  
  <!-- 表格头部 -->
  <rect x="40" y="180" width="720" height="36" fill="#f5f7fa" stroke="#ebeef5" stroke-width="1"/>
  <text x="70" y="203" font-family="Arial" font-size="14" font-weight="bold" text-anchor="start" fill="#606266">订单编号</text>
  <text x="200" y="203" font-family="Arial" font-size="14" font-weight="bold" text-anchor="start" fill="#606266">客户姓名</text>
  <text x="320" y="203" font-family="Arial" font-size="14" font-weight="bold" text-anchor="start" fill="#606266">订单金额</text>
  <text x="430" y="203" font-family="Arial" font-size="14" font-weight="bold" text-anchor="start" fill="#606266">打印状态</text>
  <text x="550" y="203" font-family="Arial" font-size="14" font-weight="bold" text-anchor="start" fill="#606266">操作</text>
  
  <!-- 表格内容行 -->
  <rect x="40" y="216" width="720" height="40" fill="white" stroke="#ebeef5" stroke-width="1"/>
  <text x="70" y="241" font-family="Arial" font-size="14" text-anchor="start" fill="#303133">ORD123456789</text>
  <text x="200" y="241" font-family="Arial" font-size="14" text-anchor="start" fill="#303133">张三</text>
  <text x="320" y="241" font-family="Arial" font-size="14" text-anchor="start" fill="#303133">¥128.00</text>
  <circle cx="430" cy="236" r="8" fill="#E6A23C"/>
  <text x="445" y="241" font-family="Arial" font-size="14" text-anchor="start" fill="#606266">待打印</text>
  <rect x="550" y="222" width="60" height="28" rx="4" ry="4" fill="#409EFF"/>
  <text x="580" y="239" font-family="Arial" font-size="12" text-anchor="middle" fill="white">预览</text>
  
  <!-- 分页 -->
  <rect x="40" y="440" width="720" height="32" fill="#fafafa" stroke="#ebeef5" stroke-width="1"/>
  <text x="60" y="460" font-family="Arial" font-size="12" text-anchor="start" fill="#909399">共 10 条记录</text>
  <rect x="630" y="444" width="60" height="24" rx="4" ry="4" fill="#409EFF"/>
  <text x="660" y="460" font-family="Arial" font-size="12" text-anchor="middle" fill="white">1 / 1</text>
</svg>
```

### 打印预览页面
```svg
<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="800" height="500" fill="rgba(0,0,0,0.5)"/>
  
  <!-- 模态框 -->
  <rect x="100" y="50" width="600" height="400" rx="8" ry="8" fill="white"/>
  
  <!-- 模态框标题 -->
  <rect x="100" y="50" width="600" height="50" rx="8 8 0 0" ry="8 8 0 0" fill="#fafafa"/>
  <text x="120" y="80" font-family="Arial" font-size="16" font-weight="bold" text-anchor="start" fill="#303133">打印预览</text>
  
  <!-- 打印内容区域 -->
  <rect x="130" y="120" width="540" height="280" rx="4" ry="4" fill="white" stroke="#e0e0e0" stroke-width="1"/>
  
  <!-- 订单标题 -->
  <text x="350" y="150" font-family="Arial" font-size="20" font-weight="bold" text-anchor="middle" fill="#303133">订单打印</text>
  
  <!-- 订单信息 -->
  <text x="180" y="180" font-family="Arial" font-size="14" text-anchor="start" fill="#606266">订单号：ORD123456789</text>
  <text x="380" y="180" font-family="Arial" font-size="14" text-anchor="start" fill="#606266">创建时间：2024-01-01 10:00:00</text>
  
  <!-- 客户信息 -->
  <text x="150" y="210" font-family="Arial" font-size="16" font-weight="bold" text-anchor="start" fill="#303133">客户信息</text>
  <text x="180" y="235" font-family="Arial" font-size="14" text-anchor="start" fill="#606266">姓名：张三</text>
  <text x="380" y="235" font-family="Arial" font-size="14" text-anchor="start" fill="#606266">电话：13800138000</text>
  
  <!-- 商品明细 -->
  <text x="150" y="265" font-family="Arial" font-size="16" font-weight="bold" text-anchor="start" fill="#303133">商品明细</text>
  
  <!-- 商品表格头部 -->
  <rect x="150" y="275" width="500" height="30" fill="#f5f7fa" stroke="#ebeef5" stroke-width="1"/>
  <text x="170" y="295" font-family="Arial" font-size="14" font-weight="bold" text-anchor="start" fill="#606266">商品名称</text>
  <text x="350" y="295" font-family="Arial" font-size="14" font-weight="bold" text-anchor="middle" fill="#606266">数量</text>
  <text x="450" y="295" font-family="Arial" font-size="14" font-weight="bold" text-anchor="middle" fill="#606266">单价</text>
  <text x="550" y="295" font-family="Arial" font-size="14" font-weight="bold" text-anchor="middle" fill="#606266">小计</text>
  
  <!-- 商品行 -->
  <rect x="150" y="305" width="500" height="30" fill="white" stroke="#ebeef5" stroke-width="1"/>
  <text x="170" y="325" font-family="Arial" font-size="14" text-anchor="start" fill="#303133">商品A</text>
  <text x="350" y="325" font-family="Arial" font-size="14" text-anchor="middle" fill="#606266">2</text>
  <text x="450" y="325" font-family="Arial" font-size="14" text-anchor="middle" fill="#606266">¥50.00</text>
  <text x="550" y="325" font-family="Arial" font-size="14" text-anchor="middle" fill="#606266">¥100.00</text>
  
  <!-- 总计 -->
  <rect x="150" y="345" width="500" height="30" fill="#fafafa" stroke="#ebeef5" stroke-width="1"/>
  <text x="450" y="365" font-family="Arial" font-size="16" font-weight="bold" text-anchor="start" fill="#303133">总计：</text>
  <text x="550" y="365" font-family="Arial" font-size="16" font-weight="bold" text-anchor="middle" fill="#f56c6c">¥100.00</text>
  
  <!-- 底部按钮 -->
  <rect x="550" y="420" width="80" height="32" rx="4" ry="4" fill="#dcdfe6"/>
  <text x="590" y="440" font-family="Arial" font-size="14" text-anchor="middle" fill="#606266">关闭</text>
  <rect x="640" y="420" width="80" height="32" rx="4" ry="4" fill="#409EFF"/>
  <text x="680" y="440" font-family="Arial" font-size="14" text-anchor="middle" fill="white">打印</text>
</svg>
```

## 📝 使用说明

### 登录系统
1. 打开系统登录页面
2. 输入用户名和密码（默认账号：admin，密码：123456）
3. 点击登录按钮进入系统

### 管理订单
1. 在订单列表页面可以查看所有订单信息
2. 使用搜索框可以按订单编号或客户姓名搜索订单
3. 点击"新增"按钮创建新订单
4. 点击订单操作列的"预览"按钮查看订单详情

### 打印订单
1. 在订单预览页面确认订单信息无误
2. 点击"打印"按钮调用浏览器打印功能
3. 在打印对话框中选择打印机并确认打印

### 查询打印记录
1. 导航到打印记录页面
2. 查看所有历史打印记录
3. 点击记录操作列的"预览"按钮可以再次查看订单详情

## 🛡️ 安全注意事项
- 系统默认使用简单的账号密码认证，请在生产环境中加强安全措施
- 建议修改默认的管理员账号密码
- 生产环境中应配置HTTPS协议
- 定期备份数据库，防止数据丢失

## 📦 部署说明

### 前端部署
```bash
# 进入前端目录
cd frontend

# 构建生产版本
npm run build

# 将dist目录部署到Web服务器
# 如Nginx、Apache等
```

### 后端部署
```bash
# 进入后端目录
cd backend

# 安装PM2进行进程管理
npm install -g pm2

# 启动后端服务
pm start
```

## 🔧 常见问题

### 无法连接数据库
- 检查数据库连接配置是否正确
- 确认MySQL服务是否正在运行
- 验证数据库用户权限是否足够

### 前端无法访问后端API
- 检查后端服务是否正常启动
- 确认前端代理配置是否正确
- 检查跨域设置是否允许

### 打印功能不工作
- 确认浏览器是否支持打印API
- 检查打印机是否已正确连接
- 验证打印样式是否正确配置

## 📄 许可证

[MIT License](LICENSE)

## 🤝 贡献指南

1. Fork 本仓库
2. 创建你的特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交你的更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 打开一个 Pull Request

## 💡 开发建议

- 遵循代码风格规范，保持代码整洁
- 编写单元测试，确保代码质量
- 及时更新文档，保持文档与代码同步
- 使用版本控制管理代码变更

## 📧 联系我们

如有任何问题或建议，请联系项目维护者。