# web-final-homework

**Repository Path**: panarea/web-final-homework

## Basic Information

- **Project Name**: web-final-homework
- **Description**: 外卖点餐系统前端实现：
基于 Vue3 + TypeScript + UnoCSS + Vue Router + FontAwesome 技术栈开发的外卖点餐类APP前端项目，参考主流外卖平台（如美团外卖、饿了么）的界面与功能设计，实现了完整的外卖点餐业务流程。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-08
- **Last Updated**: 2025-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 外卖点餐系统前端实现

基于 Vue3 + TypeScript + UnoCSS + Vue Router + FontAwesome 技术栈开发的外卖点餐类APP前端项目，参考主流外卖平台（如美团外卖、饿了么）的界面与功能设计，实现了完整的外卖点餐业务流程。

## 项目简介

本项目是一个高仿外卖点餐系统的前端实现，采用现代化的前端技术栈，注重页面的交互体验与响应式布局。项目实现了外卖APP的核心功能模块，包括商家浏览、商品选择、订单管理、支付流程和用户认证等完整业务流程。

### 技术栈

- **Vue 3** - 采用 Composition API，提升代码组织性和复用性
- **TypeScript** - 提供类型安全保障，减少运行时错误
- **UnoCSS** - 原子化CSS框架，支持按需生成样式
- **Vue Router** - 前端路由管理，实现SPA应用
- **FontAwesome** - 图标库，提升用户界面美观性
- **Vite** - 现代前端构建工具，提供快速开发体验

## 功能介绍

### 核心页面（8个主要页面）

1. **首页（index.vue）** - 展示推荐商家、横幅广告、分类导航、超级会员等内容
2. **商家列表页（BusinessList.vue）** - 展示所有可选商家，支持分类浏览和筛选
3. **商家信息页（BusinessInfo.vue）** - 展示单个商家的详细信息、商品列表、购物车功能等
4. **确认订单页（Order.vue）** - 用户选择商品后进入下单页面，确认订单信息
5. **订单列表页（OrderList.vue）** - 展示用户的历史订单和当前订单状态
6. **支付页（Payment.vue）** - 完成订单支付，支持多种支付方式（支付宝、微信）
7. **登录页（Login.vue）** - 用户登录入口，支持账号密码登录
8. **注册页（Register.vue）** - 新用户注册账号页面

### 主要功能特性

- ✅ **响应式布局** - 使用vw单位实现移动端适配
- ✅ **组件化开发** - 底部导航栏等通用组件封装复用
- ✅ **路由管理** - Vue Router实现页面间无刷新跳转
- ✅ **状态管理** - Composition API管理响应式状态
- ✅ **表单验证** - 登录注册表单基础校验
- ✅ **购物车功能** - 商品数量管理、总价计算
- ✅ **订单管理** - 订单列表、状态展示、折叠展开
- ✅ **支付流程** - 支付方式选择、订单确认

## 如何运行

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 开发环境运行

```bash
npm run dev
```

启动后访问 `http://localhost:5173`

### 生产环境构建

```bash
npm run build
```

### 类型检查

```bash
npm run type-check
```

## 关键代码解释

### 1. 路由配置 (src/router/index.ts)

```typescript
const routes = [
    {
        path: '/',
        redirect: '/index' // 默认跳转到首页
    },
    {
        path: '/index',
        name: 'index',
        component: Index
    },
    // ... 其他路由配置
]
```

使用Vue Router实现SPA路由管理，支持页面间参数传递。

### 2. 响应式状态管理 (src/BusinessInfo.vue)

```typescript
const totalQuantity = ref(5)
const totalPrice = ref(15*3 + 16*2)

const increaseQuantity = (index: number) => {
  foodList.value[index].quantity++
  totalQuantity.value++
  totalPrice.value += foodList.value[index].price
}
```

使用Composition API的ref实现响应式数据绑定，实时更新购物车状态。

### 3. 滚动监听实现 (src/index.vue)

```typescript
const isFixed = ref(false)
onMounted(() => {
  const handleScroll = () => {
    const scroll = document.documentElement.scrollTop
    const width = document.documentElement.clientWidth
    isFixed.value = scroll > width * 0.12
  }
  document.addEventListener('scroll', handleScroll)
})
```

监听页面滚动事件，实现搜索栏固定效果。

### 4. 组件化设计 (src/components/bottom-button.vue)

```vue
<template>
  <ul class="footer w-full h-[14vw] border-t border-[#DDD] bg-white fixed left-0 bottom-0 flex justify-around items-center">
    <li @click="navigateTo('index')">
      <font-awesome-icon icon="fa-home" />
      <p>首页</p>
    </li>
    <!-- ... 其他导航项 -->
  </ul>
</template>
```

封装底部导航组件，实现跨页面复用。

### 5. 条件渲染 (src/OrderList.vue)

```typescript
const showDetails = ref<{ [key: number]: boolean }>({})
function toggleDetails(index: number) {
  showDetails.value[index] = !showDetails.value[index]
}
```

使用对象存储每个订单的展开状态，支持独立控制。

## 项目代码统计

### 文件结构

```
src/
├── components/          # 组件目录
│   └── bottom-button.vue (57行)
├── router/             # 路由配置
│   └── index.ts (67行)
├── assets/             # 静态资源
├── icons/              # 图标文件
├── App.vue (43行)      # 根组件
├── main.ts (24行)      # 入口文件
├── index.vue (301行)   # 首页
├── BusinessList.vue (160行) # 商家列表页
├── BusinessInfo.vue (195行) # 商家信息页
├── Order.vue (92行)    # 确认订单页
├── Payment.vue (155行) # 支付页
├── OrderList.vue (118行) # 订单列表页
├── Login.vue (71行)    # 登录页
├── Register.vue (99行) # 注册页
└── shims-vue.d.ts (5行) # 类型声明
```

### 代码行数统计

- **Vue组件文件**: 8个，总计 1,291行
- **TypeScript文件**: 3个，总计 96行
- **总代码行数**: 约 1,387行

### 代码类型占比

- **Vue单文件组件**: 93.1% (1,291行)
- **TypeScript配置**: 6.9% (96行)
- **Vue模板**: ~60%
- **TypeScript逻辑**: ~25%

## 项目特色

1. **现代化技术栈** - 采用Vue3最新特性，TypeScript类型安全
2. **响应式设计** - 完美适配移动端，使用vw单位实现等比缩放
3. **组件化架构** - 高内聚低耦合，提高代码复用性
4. **用户体验** - 流畅的页面切换，丰富的交互反馈
5. **性能优化** - 静态资源预加载，事件监听优化

## 开发说明

本项目为专业实训（初级）课程大作业，基于Vue3技术栈实现外卖点餐系统前端部分。项目完整实现了外卖APP的核心业务流程，展现了现代前端开发的技术能力和实践经验。

## 相关链接

- [Vue 3 官方文档](https://vuejs.org/)
- [TypeScript 官方文档](https://www.typescriptlang.org/)
- [UnoCSS 官方文档](https://unocss.dev/)
- [Vue Router 官方文档](https://router.vuejs.org/)

---

**课程**: 专业实训（初级） 
**完成时间**: 2025年春季学期