德尚网络

Appearance

Uniapp 接口方法命名规范 ​

概述 ​

为了保持代码的一致性和可维护性，Uniapp 端的接口方法命名应该与 Vue3 端（PC端）保持一致，因为两者使用的是相同的后端接口。

命名原则 ​

1. 接口方法名保持一致 ​

✅ 正确示例：

typescript
// Vue3 端 (PC端)
export function getTblOrderPages(params: Record<string, any>) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/pages`, params)
}

// Uniapp 端 (移动端)
export function getTblOrderPages(params: Record<string, any>) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/pages`, params)
}

❌ 错误示例：

typescript
// Vue3 端
export function getTblOrderPages(params: Record<string, any>) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/pages`, params)
}

// Uniapp 端 - 命名不一致
export function getOrderList(params: Record<string, any>) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/pages`, params)
}

2. 参数类型保持一致 ​

✅ 正确示例：

typescript
// 两个端都使用相同的参数类型
export function getTblOrderPages(params: Record<string, any>) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/pages`, params)
}

❌ 错误示例：

typescript
// Vue3 端
export function getTblOrderPages(params: Record<string, any>) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/pages`, params)
}

// Uniapp 端 - 参数类型不一致
export function getTblOrderPages(params: any) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/pages`, params)
}

3. 接口路径保持一致 ​

✅ 正确示例：

typescript
// 两个端使用相同的接口路径
export function getTblOrderInfo(id: number) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/${id}`)
}

❌ 错误示例：

typescript
// Vue3 端
export function getTblOrderInfo(id: number) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/${id}`)
}

// Uniapp 端 - 路径不一致
export function getTblOrderInfo(id: number) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/info/${id}`)
}

实际案例对比 ​

订单管理接口 ​

功能Vue3 端方法名Uniapp 端方法名状态
获取订单列表getTblOrderPagesgetTblOrderPages✅ 一致
获取订单详情getTblOrderInfogetTblOrderInfo✅ 一致
获取订单状态字典getTblOrderStatusDictgetTblOrderStatusDict✅ 一致
修改订单金额modifyTblOrderAmountmodifyTblOrderAmount✅ 一致
获取订单商品列表getTblOrderGoodsListgetTblOrderGoodsList✅ 一致
获取订单日志getTblOrderLogListgetTblOrderLogList✅ 一致

店铺管理接口 ​

功能Vue3 端方法名Uniapp 端方法名状态
获取店铺信息getTblStoreInfogetTblStoreInfo✅ 一致
获取店铺余额getTblStoreBalancegetTblStoreBalance✅ 一致
获取店铺流水getTblStoreBalanceLogPagesgetTblStoreBalanceLogPages✅ 一致

命名规范 ​

1. 方法命名格式 ​

[操作动词][实体名称][具体功能]

示例：

  • getTblOrderPages - 获取订单分页列表
  • getTblOrderInfo - 获取订单详情
  • modifyTblOrderAmount - 修改订单金额
  • getTblOrderStatusDict - 获取订单状态字典

2. 操作动词规范 ​

操作动词示例
查询/获取getgetTblOrderPages
创建/新增createcreateTblOrder
更新/修改update/modifyupdateTblOrder
删除deletedeleteTblOrder
提交submitsubmitTblOrder
确认confirmconfirmTblOrder
取消cancelcancelTblOrder

3. 实体命名规范 ​

  • 使用数据库表名前缀：Tbl
  • 实体名称使用驼峰命名：Order、Store、Goods
  • 具体功能使用描述性名称：Pages、Info、List、Dict

文件结构规范 ​

Vue3 端文件结构 ​

vue-element-admin/src/pages-store/main/api/
├── tbl-order/
│   └── tblOrder.ts
├── tbl-store/
│   └── tblStore.ts
└── tbl-goods/
    └── tblGoods.ts

Uniapp 端文件结构 ​

uniapp/src/store/api/
├── tbl-order/
│   └── tblOrder.ts
├── tbl-store/
│   └── tblStore.ts
└── tbl-goods/
    └── tblGoods.ts

优势 ​

1. 代码一致性 ​

  • 减少学习成本
  • 提高代码可读性
  • 便于团队协作

2. 维护便利性 ​

  • 接口变更时只需修改一处
  • 减少重复代码
  • 降低维护成本

3. 开发效率 ​

  • 前端开发者可以快速切换项目
  • 减少接口调试时间
  • 提高开发效率

注意事项 ​

1. API_BASE_URLS 差异 ​

typescript
// Vue3 端
import { API_BASE_URLS } from '@/utils/request'

// Uniapp 端
import { API_BASE_URLS } from '@/utils/request'

// 使用不同的基础URL
API_BASE_URLS.STORE  // 店铺端
API_BASE_URLS.USER   // 用户端

2. 请求方式差异 ​

typescript
// Vue3 端 - 使用 { params }
export function getTblOrderPages(params: Record<string, any>) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/pages`, { params })
}

// Uniapp 端 - 直接传递 params
export function getTblOrderPages(params: Record<string, any>) {
    return request.get(`${API_BASE_URLS.STORE}/tbl-order/order/pages`, params)
}

3. 类型定义保持一致 ​

typescript
// 两个端都应该使用相同的类型定义
interface Order {
    id: number;
    order_sn: string;
    order_status: number;
    // ...
}

总结 ​

保持 Uniapp 端和 Vue3 端接口方法命名的一致性，不仅提高了代码的可维护性，还确保了使用相同后端接口的便利性。这种规范化的命名方式有助于团队协作和项目的长期维护。

最后更新：2024-01-20
维护者：DSPlatform技术团队(德尚网络)

获取帮助 ​

如果您在使用过程中遇到问题，可以通过以下方式获取帮助：

  • 官方网站：https://www.csdeshang.com
  • 电话咨询：15364080101（微信同号）
  • QQ咨询：858761000
  • 邮箱咨询：858761000@qq.com
  • 工作时间：工作日 9:00-18:00
  • 微信咨询：扫码添加微信
微信二维码

版权所有 © 2014-至今 德尚网络