488 lines
12 KiB
Markdown
488 lines
12 KiB
Markdown
# 前端开发指南
|
||
|
||
## 技术栈选择
|
||
|
||
### 推荐方案：Vue.js + Element Plus
|
||
|
||
**理由：**
|
||
- 学习曲线平缓，适合快速开发
|
||
- Element Plus 组件丰富，适合管理后台
|
||
- 社区活跃，文档完善
|
||
|
||
### 备选方案：React + Ant Design
|
||
|
||
**理由：**
|
||
- 生态系统庞大
|
||
- Ant Design 企业级组件库
|
||
- 适合大型项目
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
e-scooter-rental-system/
|
||
├── frontend/ # 前端项目
|
||
│ ├── public/ # 静态资源
|
||
│ ├── src/
|
||
│ │ ├── components/ # 公共组件
|
||
│ │ ├── views/ # 页面组件
|
||
│ │ ├── router/ # 路由配置
|
||
│ │ ├── store/ # 状态管理
|
||
│ │ ├── api/ # API 接口
|
||
│ │ ├── utils/ # 工具函数
|
||
│ │ └── App.vue # 根组件
|
||
│ ├── package.json
|
||
│ └── vue.config.js
|
||
└── server/ # 后端项目 (已存在)
|
||
```
|
||
|
||
## 页面设计
|
||
|
||
### 1. 车辆管理页面
|
||
|
||
**功能：**
|
||
- 车辆列表展示（表格）
|
||
- 车辆搜索和筛选
|
||
- 车辆详情查看
|
||
- 车辆添加/编辑/删除
|
||
- 车辆状态更新
|
||
|
||
**页面布局：**
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 顶部导航栏 │
|
||
├─────────────────────────────────────┤
|
||
│ 搜索栏 + 筛选条件 │
|
||
├─────────────────────────────────────┤
|
||
│ 车辆列表（表格） │
|
||
│ - 车辆编号 │
|
||
│ - 车辆类型 │
|
||
│ - 状态（空闲/使用中/维修中） │
|
||
│ - 位置 │
|
||
│ - 操作（查看/编辑/删除） │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 2. 订单管理页面
|
||
|
||
**功能：**
|
||
- 订单列表展示
|
||
- 订单搜索和筛选（按状态、时间等）
|
||
- 订单详情查看
|
||
- 创建新订单
|
||
- 结束订单
|
||
- 逾期订单提醒
|
||
|
||
**页面布局：**
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 顶部导航栏 │
|
||
├─────────────────────────────────────┤
|
||
│ 搜索栏 + 筛选条件（状态、时间范围） │
|
||
├─────────────────────────────────────┤
|
||
│ 订单列表（表格） │
|
||
│ - 订单号 │
|
||
│ - 客户名称 │
|
||
│ - 车辆信息 │
|
||
│ - 租期 │
|
||
│ - 费用 │
|
||
│ - 状态 │
|
||
│ - 操作（查看/结束） │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 3. 客户管理页面
|
||
|
||
**功能：**
|
||
- 客户列表展示
|
||
- 客户搜索
|
||
- 客户详情查看
|
||
- 添加/编辑/删除客户
|
||
- 信用评分管理
|
||
|
||
**页面布局：**
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 顶部导航栏 │
|
||
├─────────────────────────────────────┤
|
||
│ 搜索栏 │
|
||
├─────────────────────────────────────┤
|
||
│ 客户列表（表格） │
|
||
│ - 客户姓名 │
|
||
│ - 联系方式 │
|
||
│ - 信用评分 │
|
||
│ - 租赁历史 │
|
||
│ - 操作（查看/编辑/删除） │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 4. 财务统计页面
|
||
|
||
**功能：**
|
||
- 收入统计图表
|
||
- 逾期账款统计
|
||
- 订单收入趋势
|
||
- 导出报表
|
||
|
||
**页面布局：**
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 顶部导航栏 │
|
||
├─────────────────────────────────────┤
|
||
│ 统计卡片 │
|
||
│ - 总收入 │
|
||
│ - 本月收入 │
|
||
│ - 逾期账款 │
|
||
│ - 订单数量 │
|
||
├─────────────────────────────────────┤
|
||
│ 图表区域 │
|
||
│ - 收入趋势图 │
|
||
│ - 订单状态分布 │
|
||
│ - 车辆使用率 │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
## 组件设计
|
||
|
||
### 公共组件
|
||
|
||
1. **导航栏组件**
|
||
- 顶部导航
|
||
- 侧边栏菜单
|
||
|
||
2. **表格组件**
|
||
- 支持分页
|
||
- 支持搜索
|
||
- 支持排序
|
||
|
||
3. **表单组件**
|
||
- 输入框
|
||
- 下拉选择
|
||
- 日期选择
|
||
- 表单验证
|
||
|
||
4. **弹窗组件**
|
||
- 确认弹窗
|
||
- 详情弹窗
|
||
- 编辑弹窗
|
||
|
||
### 页面组件
|
||
|
||
1. **车辆管理**
|
||
- VehicleList.vue
|
||
- VehicleDetail.vue
|
||
- VehicleForm.vue
|
||
|
||
2. **订单管理**
|
||
- OrderList.vue
|
||
- OrderDetail.vue
|
||
- OrderForm.vue
|
||
|
||
3. **客户管理**
|
||
- CustomerList.vue
|
||
- CustomerDetail.vue
|
||
- CustomerForm.vue
|
||
|
||
4. **财务统计**
|
||
- FinanceDashboard.vue
|
||
- StatisticsChart.vue
|
||
|
||
## API 接口调用
|
||
|
||
### 基础配置
|
||
|
||
```javascript
|
||
// src/api/request.js
|
||
import axios from 'axios'
|
||
|
||
const request = axios.create({
|
||
baseURL: 'http://localhost:3000/api',
|
||
timeout: 10000
|
||
})
|
||
|
||
// 请求拦截器
|
||
request.interceptors.request.use(config => {
|
||
// 添加认证 token
|
||
const token = localStorage.getItem('token')
|
||
if (token) {
|
||
config.headers.Authorization = `Bearer ${token}`
|
||
}
|
||
return config
|
||
})
|
||
|
||
// 响应拦截器
|
||
request.interceptors.response.use(
|
||
response => response.data,
|
||
error => {
|
||
console.error('API Error:', error)
|
||
return Promise.reject(error)
|
||
}
|
||
)
|
||
|
||
export default request
|
||
```
|
||
|
||
### 车辆管理 API
|
||
|
||
```javascript
|
||
// src/api/vehicle.js
|
||
import request from './request'
|
||
|
||
export const getVehicles = (params) => request.get('/vehicles', { params })
|
||
export const getVehicle = (id) => request.get(`/vehicles/${id}`)
|
||
export const createVehicle = (data) => request.post('/vehicles', data)
|
||
export const updateVehicle = (id, data) => request.put(`/vehicles/${id}`, data)
|
||
export const deleteVehicle = (id) => request.delete(`/vehicles/${id}`)
|
||
export const getVehiclesByStatus = (status) => request.get(`/vehicles/status/${status}`)
|
||
```
|
||
|
||
### 订单管理 API
|
||
|
||
```javascript
|
||
// src/api/order.js
|
||
import request from './request'
|
||
|
||
export const getOrders = (params) => request.get('/orders', { params })
|
||
export const getOrder = (id) => request.get(`/orders/${id}`)
|
||
export const createOrder = (data) => request.post('/orders', data)
|
||
export const updateOrder = (id, data) => request.put(`/orders/${id}`, data)
|
||
export const endOrder = (id) => request.post(`/orders/${id}/end`)
|
||
export const getOverdueOrders = () => request.get('/orders/overdue')
|
||
```
|
||
|
||
### 客户管理 API
|
||
|
||
```javascript
|
||
// src/api/customer.js
|
||
import request from './request'
|
||
|
||
export const getCustomers = (params) => request.get('/customers', { params })
|
||
export const getCustomer = (id) => request.get(`/customers/${id}`)
|
||
export const createCustomer = (data) => request.post('/customers', data)
|
||
export const updateCustomer = (id, data) => request.put(`/customers/${id}`, data)
|
||
export const deleteCustomer = (id) => request.delete(`/customers/${id}`)
|
||
export const searchCustomers = (keyword) => request.get(`/customers/search/${keyword}`)
|
||
```
|
||
|
||
## 状态管理
|
||
|
||
### 使用 Vuex
|
||
|
||
```javascript
|
||
// src/store/index.js
|
||
import { createStore } from 'vuex'
|
||
|
||
export default createStore({
|
||
state: {
|
||
vehicles: [],
|
||
orders: [],
|
||
customers: [],
|
||
currentUser: null
|
||
},
|
||
mutations: {
|
||
SET_VEHICLES(state, vehicles) {
|
||
state.vehicles = vehicles
|
||
},
|
||
SET_ORDERS(state, orders) {
|
||
state.orders = orders
|
||
},
|
||
SET_CUSTOMERS(state, customers) {
|
||
state.customers = customers
|
||
}
|
||
},
|
||
actions: {
|
||
async fetchVehicles({ commit }) {
|
||
const response = await getVehicles()
|
||
commit('SET_VEHICLES', response.data)
|
||
}
|
||
}
|
||
})
|
||
```
|
||
|
||
## 路由配置
|
||
|
||
```javascript
|
||
// src/router/index.js
|
||
import { createRouter, createWebHistory } from 'vue-router'
|
||
|
||
const routes = [
|
||
{
|
||
path: '/',
|
||
redirect: '/vehicles'
|
||
},
|
||
{
|
||
path: '/vehicles',
|
||
name: 'VehicleList',
|
||
component: () => import('@/views/VehicleList.vue')
|
||
},
|
||
{
|
||
path: '/vehicles/:id',
|
||
name: 'VehicleDetail',
|
||
component: () => import('@/views/VehicleDetail.vue')
|
||
},
|
||
{
|
||
path: '/orders',
|
||
name: 'OrderList',
|
||
component: () => import('@/views/OrderList.vue')
|
||
},
|
||
{
|
||
path: '/customers',
|
||
name: 'CustomerList',
|
||
component: () => import('@/views/CustomerList.vue')
|
||
},
|
||
{
|
||
path: '/finance',
|
||
name: 'FinanceDashboard',
|
||
component: () => import('@/views/FinanceDashboard.vue')
|
||
}
|
||
]
|
||
|
||
const router = createRouter({
|
||
history: createWebHistory(),
|
||
routes
|
||
})
|
||
|
||
export default router
|
||
```
|
||
|
||
## 样式设计
|
||
|
||
### 使用 Element Plus 主题
|
||
|
||
```javascript
|
||
// src/main.js
|
||
import { createApp } from 'vue'
|
||
import ElementPlus from 'element-plus'
|
||
import 'element-plus/dist/index.css'
|
||
import App from './App.vue'
|
||
import router from './router'
|
||
import store from './store'
|
||
|
||
const app = createApp(App)
|
||
app.use(ElementPlus)
|
||
app.use(router)
|
||
app.use(store)
|
||
app.mount('#app')
|
||
```
|
||
|
||
### 自定义样式
|
||
|
||
```scss
|
||
// src/assets/styles/main.scss
|
||
// 主题色
|
||
$primary-color: #409EFF;
|
||
$success-color: #67C23A;
|
||
$warning-color: #E6A23C;
|
||
$danger-color: #F56C6C;
|
||
$info-color: #909399;
|
||
|
||
// 布局
|
||
.container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
// 表格样式
|
||
.table-container {
|
||
.el-table {
|
||
.cell {
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 表单样式
|
||
.form-container {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
```
|
||
|
||
## 开发步骤
|
||
|
||
### 1. 创建前端项目
|
||
|
||
```bash
|
||
# 进入项目目录
|
||
cd E:\code\e-scooter-rental-system
|
||
|
||
# 创建前端项目
|
||
npm create vue@latest frontend
|
||
# 或使用 Vue CLI
|
||
# vue create frontend
|
||
|
||
# 进入前端目录
|
||
cd frontend
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 安装 Element Plus
|
||
npm install element-plus
|
||
|
||
# 安装 Vue Router
|
||
npm install vue-router@4
|
||
|
||
# 安装 Vuex (可选)
|
||
npm install vuex@next
|
||
```
|
||
|
||
### 2. 配置开发环境
|
||
|
||
```javascript
|
||
// frontend/vue.config.js
|
||
module.exports = {
|
||
devServer: {
|
||
port: 8080,
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://localhost:3000',
|
||
changeOrigin: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问：http://localhost:8080
|
||
|
||
## 注意事项
|
||
|
||
1. **跨域问题**
|
||
- 开发环境使用 proxy 解决跨域
|
||
- 生产环境需要配置 CORS
|
||
|
||
2. **API 认证**
|
||
- 使用 JWT token 认证
|
||
- token 存储在 localStorage
|
||
|
||
3. **错误处理**
|
||
- 统一错误提示
|
||
- 网络错误处理
|
||
|
||
4. **性能优化**
|
||
- 按需加载组件
|
||
- 图片懒加载
|
||
- 数据缓存
|
||
|
||
## 下一步
|
||
|
||
1. 安装 MongoDB（首要任务）
|
||
2. 生成测试数据
|
||
3. 创建前端项目
|
||
4. 开发车辆管理页面
|
||
5. 开发订单管理页面
|
||
6. 开发客户管理页面
|
||
7. 开发财务统计页面
|