12 KiB

Raw Blame History

前端开发指南

技术栈选择

推荐方案：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. 财务统计页面

功能：

收入统计图表
逾期账款统计
订单收入趋势
导出报表

页面布局：

┌─────────────────────────────────────┐
│ 顶部导航栏                           │
├─────────────────────────────────────┤
│ 统计卡片                             │
│ - 总收入                             │
│ - 本月收入                           │
│ - 逾期账款                           │
│ - 订单数量                           │
├─────────────────────────────────────┤
│ 图表区域                             │
│ - 收入趋势图                         │
│ - 订单状态分布                       │
│ - 车辆使用率                         │
└─────────────────────────────────────┘

组件设计

公共组件

导航栏组件
- 顶部导航
- 侧边栏菜单
表格组件
- 支持分页
- 支持搜索
- 支持排序
表单组件
- 输入框
- 下拉选择
- 日期选择
- 表单验证
弹窗组件
- 确认弹窗
- 详情弹窗
- 编辑弹窗

页面组件

车辆管理
- VehicleList.vue
- VehicleDetail.vue
- VehicleForm.vue
订单管理
- OrderList.vue
- OrderDetail.vue
- OrderForm.vue
客户管理
- CustomerList.vue
- CustomerDetail.vue
- CustomerForm.vue
财务统计
- FinanceDashboard.vue
- StatisticsChart.vue

API 接口调用

基础配置

// 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

// 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

// 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

// 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

// 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)
    }
  }
})

路由配置

// 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 主题

// 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')

自定义样式

// 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. 创建前端项目

# 进入项目目录
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. 配置开发环境

// frontend/vue.config.js
module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

3. 启动开发服务器

npm run dev

访问：http://localhost:8080

注意事项

跨域问题
- 开发环境使用 proxy 解决跨域
- 生产环境需要配置 CORS
API 认证
- 使用 JWT token 认证
- token 存储在 localStorage
错误处理
- 统一错误提示
- 网络错误处理
性能优化
- 按需加载组件
- 图片懒加载
- 数据缓存

下一步

安装 MongoDB（首要任务）
生成测试数据
创建前端项目
开发车辆管理页面
开发订单管理页面
开发客户管理页面
开发财务统计页面

12 KiB Raw Blame History Unescape Escape

前端开发指南

技术栈选择

推荐方案：Vue.js + Element Plus

备选方案：React + Ant Design

项目结构

页面设计

1. 车辆管理页面

2. 订单管理页面

3. 客户管理页面

4. 财务统计页面

组件设计

公共组件

页面组件

API 接口调用

基础配置

车辆管理 API

订单管理 API

客户管理 API

状态管理

使用 Vuex

路由配置

样式设计

使用 Element Plus 主题

自定义样式

开发步骤

1. 创建前端项目

2. 配置开发环境

3. 启动开发服务器

注意事项

下一步

12 KiB

Raw Blame History