学习进度条

今日所花时间：三个小时
今日代码量：220行
博客量：一篇
了解到的知识点：

项目概述

基于 Vue.js 的设备管理系统前端页面，实现了设备管理、报修、地图定位和Excel导入导出等功能。本文将详细介绍这个项目中使用的技术和学到的知识点。

使用的主要技术

1. Vue 3 组合式 API

项目中大量使用了 Vue 3 的组合式 API，这是与 Vue 2 选项式 API 最大的不同：

import { ref, shallowRef, nextTick } from 'vue'

// 使用 ref 创建响应式变量
const addDeviceDrawerVisible = ref(false);
const deviceList = ref([]);

// 使用 shallowRef 创建非深度响应式变量（用于大型对象）
const map = shallowRef(null);

学到的知识点：

• ref 用于创建响应式的基本类型或对象
• shallowRef 只对顶层属性做响应式处理，适合大型对象
• nextTick 用于在 DOM 更新后执行代码

2. Element Plus 组件库

项目中使用了 Element Plus 提供的丰富组件：

<el-button type="primary" @click="addDevice">添加设备</el-button>
<el-table :data="deviceList" style="width: 100%" border>
<el-drawer v-model="addDeviceDrawerVisible" title="添加设备" direction="rtl" size="40%">

学到的知识点：

• 表单组件 (el-form, el-form-item)
• 表格组件 (el-table, el-table-column)
• 抽屉组件 (el-drawer)
• 对话框组件 (el-dialog)
• 上传组件 (el-upload)
• 分页组件 (el-pagination)

3. 状态管理 Pinia

使用 Pinia 管理用户 token：

import { useTokenStore } from '@/stores/token'

// 获取用户ID
reportUserId: useTokenStore().token?.id

学到的知识点：

• Pinia 是 Vue 官方推荐的状态管理库
• 比 Vuex 更简单直观的 API
• 更好的 TypeScript 支持

4. 高德地图集成

使用 AMapLoader 加载高德地图：

import AMapLoader from '@amap/amap-jsapi-loader'

AMapLoader.load({
  key: '8738c8766e88e47fc4a2f4d7f65ce315',
  version: '2.0',
  plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.AutoComplete']
}).then((AMap) => {
  // 初始化地图
})

学到的知识点：

• 异步加载地图 API
• 地图标记和事件处理
• 逆地理编码获取地址信息

5. Excel 导入导出

实现了 Excel 文件的导入和模板下载：

// 下载模板
const handleDownloadTemplate = async () => {
  const response = await downloadDeviceTemplate()
  const blob = new Blob([response], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
  })
  // 创建下载链接
}

// 导入Excel
const submitImport = async () => {
  const formData = new FormData()
  formData.append('file', file.raw)
  await uploadDeviceByExcel(formData)
}

学到的知识点：

• 使用 Blob 处理二进制文件
• FormData 上传文件
• 文件类型验证和大小限制

6. 表单验证与提交

实现了复杂的表单验证和提交逻辑：

const submitRepair = async () => {
  try {
    const submitData = {
      // 构造提交数据
    };
    const response = await repairService(submitData);
    // 处理响应
  } catch (error) {
    // 错误处理
  }
}

学到的知识点：

• 表单数据绑定 (v-model)
• 表单验证规则
• 异步提交处理
• 错误处理和用户反馈

7. 分页与搜索

实现了带搜索条件的分页功能：

const getDeviceList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    deviceType: selectedDeviceType.value,
    deviceName: deviceName.value,
    status: state.value
  }
  let result = await deviceListService(params);
  // 更新数据
}

学到的知识点：

• 分页参数管理
• 搜索条件组合
• 分页组件事件处理

项目亮点

1. 模块化设计：将 API 请求封装到单独的 service 文件中，便于维护和复用。

2. 用户体验优化：

   • 表单验证和错误提示
   • 加载状态反馈
   • 操作确认对话框

3. 地图集成：实现了设备位置的直观选择。

4. Excel 导入导出：方便批量操作设备数据。

遇到的挑战与解决方案

1. 地图异步加载问题：

   • 使用 nextTick 确保 DOM 加载完成后再初始化地图

2. 文件上传处理：

   • 使用 FormData 处理文件上传
   • 实现文件类型和大小验证

3. 复杂表单状态管理：

   • 使用 ref 管理表单数据
   • 实现表单重置功能

总结

通过这个项目，我深入学习了 Vue 3 的组合式 API 和 Element Plus 组件库的使用，掌握了以下技能：

• Vue 3 响应式系统
• 复杂表单处理
• 第三方地图服务集成
• 文件上传下载
• 分页和搜索功能实现
• 组件间通信和状态管理

这些技术和知识点不仅适用于设备管理系统，也可以应用于其他类型的管理后台开发。未来可以考虑加入更多功能，如设备状态实时监控、维修历史记录等，进一步提升系统的实用性。

今日开发数据：

• 所花时间：1小时
• 代码量：约100行
• 博客量：1篇