nonhana/ApiPlayer-Frontend

一个模仿Apifox的HTTP接口管理平台。Frontend：Vue3.0+Vite+Pinia+TypeScript+Element Plus

项目简介

该项目是：字节跳动第六届青训营前端大项目2 - HTTP 接口管理平台的前端项目，选取的技术栈为：

Vue3.0 + Vite + Pinia + TypeScript + Element Plus 。

该仓库用于统筹管理前端开发的工作进程。

目前该项目由仓库持有者： @nonhana 进行更新维护。

最终大项目获奖：优秀奖

项目说明

具体可参见该项目的目录结构，以下作一些大概的说明：

• public：存放公共资源，目前只有一个网站图标 favicon.ico
• src：代码根目录，存放源代码资源。
  • components：组件目录， 根据不同的页面划分不同的组件目录，和views目录下面的页面一一对应 。
  • little：小组件目录，是给components中的组件调用的小组件存放的目录。
  • router：路由目录，采用 vue-router ，配置文件为 index.ts 。
  • static：静态资源目录，分为 svg 和 img 。 svg 里面存放的都是 svg 文件； img 里面可以存放 .png 、 .jpg 等格式的图片文件。 命名必须采用驼峰命名法 。
  • utils：工具目录，封装了所有的工具相关代码。
  • views：页面目录，存放了所有的页面入口。
• index.html：单页面应用的入口

项目规范

1. 给组件命名的时候，除了 index.vue ，其他一律都用驼峰命名法。比如： MyComponents.vue 这种形式。
2. 比如我在views里面新建了两个页面：home和login，那么在components里面需要新建 ModelHome 和 ModelLogin 目录，然后再在里面新建需要的组件。
3. little目录里面的组件不需要按照views的页面来划分，直接一个目录即可。里面组件的命名也是采用驼峰命名法。

项目特色

1. 支持团队管理

   ApiPlayer提供了强大的团队管理功能。支持以团队的方式来管理与维护项目，成员可以轻松地协作、共同管理和维护HTTP接口。每个团队成员都可以被分配特定的角色和权限，以确保项目的安全性和合规性。这个特性使得团队可以高效地协同工作，确保接口的稳定性和可用性。

2. 权限逻辑功能完善

   项目的权限逻辑是其成功的关键之一。我们设计了两层的权限系统，从上到下为团队权限——>项目权限。项目权限基于团队权限，两者互相配合，能够构成相对比较完善的权限机制，能够让团队在进行项目开发的时候控制各个团队成员只尽自己的职能，而不干涉职能以外的操作，让整个团队开发更有条理与层次。

3. 支持Swagger文档导入

   ApiPlayer支持从Swagger文档中自动导入接口信息。这意味着你可以轻松地将现有的Swagger文档导入到我们的平台中，无需手动输入接口信息。这一功能大大节省了时间，同时确保了接口信息的一致性。并且可以配合目录树的管理形式，将导入的接口按照其功能分类至各个目录。

4. 支持基于JSON_Schema的apiMock功能

   我们提供了基于JSON_Schema的apiMock功能。项目开发成员可以在项目中创建虚拟的接口，包括Body-JSON和responses，用于模拟实际接口的请求以及返回行为。这对于前端开发人员和测试团队来说是一个极其有用的工具，可以在实际接口尚未完全准备好时进行开发和测试。

5. 支持项目全局环境信息管理

   项目的全局环境信息管理使得开发人员可以轻松地管理不同环境下的变量和配置，包括开发、测试和生产环境等。这一特性确保了项目接口可以在不同的环境中无缝切换，并确保接口的一致性和可靠性。并且支持全局参数、变量的设置，可以将某些该项目全局配置的参数放至全局参数中，减少开发人员的工作量、减少耦合度。

6. 支持以目录树结构形式管理api接口，并可拖曳进行分组

   Apiplayer采用直观的目录树结构来管理api接口，允许开发人员轻松地组织和分类接口，使其更易于导航和查找。并且可以通过简单的拖放操作来进行分组，使得接口管理更加直观，以适应不断变化的项目需求。

7. 支持查看历史记录操作的功能

   当一个团队当中超过复数个用户同时维护一个接口时，难免会碰到接口信息被对方改变而自己并不知情的情况。为了让接口的变更都有其记录以便更好的溯源，项目添加了记录接口信息变更的功能，使得用户能够及时的查看到变更的消息以及使其变更的用户信息，促进团队的沟通与合作。

后记

目前这个项目是由我一人维护中，最近在进行code review的时候发现并识别出了比较多的可优化项，因此想趁着自己的技术不断进步的同时进行code review，对项目的整体代码质量进行提升，并期望能够以一个相对比较贴近最佳实践的方式来维护与更新功能，也方便有参考学习意愿的同学来参考学习，也可以对我的代码提出修改意见哦~！！

关于这个项目的详细介绍可以查看飞书文档：ApiPlayer项目文档。

截止到 2024-02-03 ，完成的更新内容有：

1. 对整个项目的TS部分进行比较大的重构，包括但不限于：
   1. 二次封装axios，实现每个接口的请求与返回结构类型定义。
   2. 对store、各个组件的type进行重新定义。
2. 对每个组件代码进行code review，更新接口的同时也优化部分样式代码、部分script对数据的处理。
3. 新增 API历史记录及其回滚功能 ，详情可见飞书文档。