memory-api-frontend: MemoryAPI 忆汇廊（前端）。这个项目是一个基于 Spring Cloud + React 的全栈微服务架构 API 接口开放平台，致力于提供丰富的 API 接口管理与调试工具、灵活的计费与限制管理功能，为开发者提供高效、安全、易用的服务，助力企业创新和数字化转型。

# MemoryAPI 忆汇廊

前端代码仓库：[memory-api-frontend](https://gitee.com/deng-2022/memory-api-frontend)

## ☕ 项目概述

这个项目是一个基于 Spring Cloud + React 的全栈微服务架构 `API 接口开放平台`，致力于提供丰富的 API  **接口管理与调试** 工具、灵活的 **计费与限制管理** 功能，为开发者提供`高效`、`安全`、`易用`的服务，助力企业创新和数字化转型。

## 🥘 效果展示

### 用户登录

![image-20240226093246181](https://gitee.com/deng-2022/pictures/raw/master/images/image-20240226093246181.png)

### 丰富的接口服务

![image-20240224170147055](https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224170147055.png)

### 接口调用

![image-20240224163717124](https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224163717124.png)

### SDK 集成

![image-20240226200537043](https://gitee.com/deng-2022/pictures/raw/master/images/image-20240226200537043.png)

### 流量监控

![image-20240224170440069](https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224170440069.png)

### 注册用户管理

![image-20240224160321907](https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224160321907.png)

### 接口发布/下线

![image-20240224160344953](https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224160344953.png)

### 个人信息管理

![image-20240224163806434](https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224163806434.png)

## 🍚 使用场景

- 开放平台的接口提供：适用于需要提供 API 接口给其他开发者或应用程序使用的项目。

- 接口管理和调试：管理员和开发者可以使用该平台进行接口管理、调试和监控。

- 应用程序开发：开发者可以在代码中使用提供的 SDK 快速调用接口，加速应用程序开发。

- 计费与限制管理：适用于需要对接口调用进行计费和限制的项目，提供了灵活的计费和充值系统。

## 🥩 核心功能与特点

- **多元 API 生态**：平台提供多样化的 API 接口，涵盖各种应用场景和需求，满足不同开发者的需求。接口文档详尽，易于理解和使用，方便开发者快速集成和使用。

- **高效 SDK 集成**：平台提供多种编程语言和框架的客户端 SDK，简化开发者调用接口的过程。SDK 稳定、兼容性好，提供简洁易用的 API，提高开发效率。

- **实时流量监控**：平台提供热门接口调用排行榜，展示最受欢迎和最常用的接口。提供详细的流量统计分析，帮助开发者了解接口的使用情况和性能表现。

- **资源集中管理**：管理员可以全面管理平台的资源，包括注册用户信息、接口的增删管理、发布上线等。提供灵活的权限设置和角色划分，确保不同管理员之间的权限互不干扰且职责明确。

- **个人信息管理**：用户可以注册并登录平台，管理自己的个人信息，包括账户设置、密码修改等。平台保障用户信息的安全性和隐私性，遵守相关法律法规。

## 🍜 访问地址

暂未部署上线，点击跳转至：[个人博客 MemorySearch 开发文档](https://deng-2022.gitee.io/blog/2023/08/26/Memory%20%E8%81%9A%E5%90%88%E6%90%9C%E7%B4%A2%E5%B9%B3%E5%8F%B0-%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/)

## 🍝 架构设计

原图链接：[项目架构图](https://www.yuque.com/huiyiruchu-7jxo6/azga9e/zonr9byctomyqz4t?singleDoc#)

![image-20240224105144169](https://gitee.com/deng-2022/pictures/raw/master/images/image-20240224105144169.png)

## 🍺 技术选型

### 后端

- Java 核心知识：精通 Java 语言的核心特性，包括集合类、异常处理机制，以及泛型、注解等高级特性。
- Lambda 表达式：能够熟练运用 Lambda 表达式简化代码，提升代码的可读性和可维护性。
- 工具库：熟练运用 Hutool、Apache Commons 等工具库，为日常开发提供便捷和高效的支持。
- SSM + Spring Boot：熟悉 Spring、SpringMVC、MyBatis 组成的 SSM 框架，以及基于 Spring Boot 的快速开发模式。
- MyBatis Plus + MyBatis X：能够利用 MyBatis Plus 的增强功能，结合 MyBatis X 自动化工具，实现高效的 CRUD 代码生成。
- MySQL 数据库：精通 MySQL 数据库设计，掌握索引优化、性能调优等关键技能，通过 Explain 分析等手段不断提升数据库性能。
-  **API 签名认证** ：熟悉 API 签名认证机制，确保数据传输的安全性。
- 用户权限管理：具备实现用户角色、权限管理的经验，能够设计并实现复杂的权限控制逻辑。
- Spring Boot Starter SDK：熟悉 Spring Boot Starter 的扩展机制，能够快速集成第三方 SDK，满足业务需求。
- Nacos：掌握 Nacos 作为服务注册与发现、配置管理中心的用法，为分布式系统提供稳定的支持。
-  **Dubbo RPC** ：熟悉 Dubbo RPC 框架，了解服务治理和远程调用机制，为微服务架构提供强大的通信能力。
- Spring Cloud Gateway：能够使用 Spring Cloud Gateway 实现 API 网关，提供统一的请求入口、访问控制等功能。
- Git：熟练使用 Git 进行版本控制，保证代码的安全和可追溯性。
- IDEA：精通 IntelliJ IDEA 开发工具，利用其强大的功能提升开发效率。
- ChatGPT：能够利用 ChatGPT 进行需求理解、代码片段生成等辅助开发工作。
- Swagger：熟悉 Swagger 文档生成工具，为 API 提供清晰、规范的文档支持。
- Navicat：掌握 Navicat 数据库管理工具，方便日常数据库操作和维护。

### 前端

- React 核心开发：掌握 React.js 框架，能够根据业务需求定制前端模板，实现高效的前端页面渲染。
- Ant Design Pro：熟悉 Ant Design Pro 框架，能够快速搭建企业级的前端应用。
- Ant Design：熟悉 Ant Design 组件库，能够快速构建美观、功能丰富的前端界面。
- Echarts：掌握 Echarts 数据可视化库，为前端界面提供丰富的图表展示功能。
- Axios：用于发送 HTTP 请求，与后端 API 进行交互。
- ECharts：用于数据可视化，展示统计图表。
- VS Code：精通 Visual Studio Code 开发工具，利用其丰富的插件和强大的功能提升开发体验。
- WebStorm IDE：熟悉 WebStorm IDE，为前端开发提供稳定的支持。

## 🍰 快速启动

拉取代码后，应该如何运行该项目？

### 后端

#### 修改配置文件

- 配置 Nacos、MySQL、Redis 为本机地址：

```yaml
# 数据库配置
datasource:
  driver-class-name: com.mysql.cj.jdbc.Driver
  url: jdbc:mysql://localhost:3306/xxx
  username: xxx
  password: xxx
```

```yaml
# Redis 配置
redis:
  database: 0
  host: localhost
  port: 6379
  timeout: 5000
  password: Dw990831
```

```yaml
# Nacos 配置
dubbo:
  application:
    name: dubbo-springboot-demo-provider
  protocol:
    name: dubbo
    port: -1
  registry:
    id: nacos-registry
    address: nacos://localhost:8848
```

#### 额外安装

- 在本地安装 Nacos：[Nacos 下载地址](http:)

- 在 Nacos bin 目录下执行以下命令，启动 Nacos：

```bash
startup.cmd -m standalone
```

#### 启动微服务

- 依次启动 memory-core、memory-gateway、memory-client 微服务

### 前端

::: warning 注意
确保本地 `Node.js 环境配置`完成，版本为 `v18.x.x`及以上
:::

- 修改接收请求的后端地址：

```tsx
 baseURL: process.env.NODE_ENV === 'production' ? 'http://120.55.62.195:8102' : 'http://localhost:8102',
 withCredentials: true,
```

- 执行以下命令，一键启动前端项目：

```bash
yarn start:dev
```

## 🦪 持续优化

随着项目的发展和用户需求的增加，我们将持续优化系统性能，提升用户体验。

加强系统的安全性措施，定期进行安全审计和漏洞扫描，确保用户数据的安全。引入微服务架构将项目向容器化部署发展，确保系统的可扩展性和灵活性。

同时将引入持续集成与部署的流程，实现自动化测试和部署上线，降低运维成本。

Memory/memory-api-frontend

简介

发行版

贡献者

近期动态

Memory/memory-api-frontend .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Memory/memory-api-frontend