feat: добавлены интерактивные вкладки для примеров кода
- Создана система вкладок для примеров на разных языках программирования - Добавлены вкладки для монолитной архитектуры (Java, Rust, JavaScript, Python) - Встроены CSS стили и JavaScript для переключения вкладок - Улучшена навигация по примерам кода в Markdown файлах
This commit is contained in:
Alexander Abakumov committed
1 parent
0e1a7607f9
commit
5737d0e893
2 files changed
+924
-78
No files matched your search
@@ -120,7 +120,15 @@
|
||||
|
||||
#### Примеры реализации
|
||||
|
||||
**Java (Spring Boot)**
|
||||
<div class="tabs">
|
||||
<div class="tab-buttons">
|
||||
<button class="tab-btn active" onclick="showTab('monolith-java', this)">Java</button>
|
||||
<button class="tab-btn" onclick="showTab('monolith-rust', this)">Rust</button>
|
||||
<button class="tab-btn" onclick="showTab('monolith-js', this)">JavaScript</button>
|
||||
<button class="tab-btn" onclick="showTab('monolith-python', this)">Python</button>
|
||||
</div>
|
||||
|
||||
<div id="monolith-java" class="tab-content active">
|
||||
|
||||
```java
|
||||
// Монолитная архитектура
|
||||
@@ -184,8 +192,9 @@ public class OrderController {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Rust (Actix Web)**
|
||||
</div>
|
||||
|
||||
<div id="monolith-rust" class="tab-content">
|
||||
|
||||
```rust
|
||||
// Монолитная архитектура
|
||||
@@ -238,8 +247,9 @@ async fn create_order(
|
||||
Ok(web::Json(order))
|
||||
}
|
||||
```
|
||||
|
||||
**Node.js (Fastify)**
|
||||
</div>
|
||||
|
||||
<div id="monolith-js" class="tab-content">
|
||||
|
||||
```javascript
|
||||
// Монолитная архитектура
|
||||
@@ -267,8 +277,9 @@ fastify.post('/api/orders', async (request, reply) => {
|
||||
return order;
|
||||
});
|
||||
```
|
||||
|
||||
**Python (FastAPI)**
|
||||
</div>
|
||||
|
||||
<div id="monolith-python" class="tab-content">
|
||||
|
||||
```python
|
||||
# Монолитная архитектура
|
||||
@@ -299,6 +310,8 @@ async def create_order(request: CreateOrderRequest):
|
||||
order = await order_service.create_order(request)
|
||||
return order
|
||||
```
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### 2. SQL vs NoSQL
|
||||
|
||||
@@ -340,7 +353,12 @@ async def create_order(request: CreateOrderRequest):
|
||||
|
||||
#### Примеры реализации
|
||||
|
||||
**Java (Spring Boot + JPA)**
|
||||
**Выберите язык программирования:**
|
||||
- [Java (Spring Boot + JPA)](#java-sql) | [Rust (SQLx)](#rust-sql) | [JavaScript (Node.js)](#javascript-sql) | [Python (SQLAlchemy)](#python-sql)
|
||||
|
||||
---
|
||||
|
||||
### Java (Spring Boot + JPA) {#java-sql}
|
||||
|
||||
```java
|
||||
// SQL подход (PostgreSQL)
|
||||
@@ -400,7 +418,7 @@ public class MongoUser {
|
||||
}
|
||||
```
|
||||
|
||||
**Rust (SQLx + MongoDB)**
|
||||
### Rust (SQLx) {#rust-sql}
|
||||
|
||||
```rust
|
||||
// SQL подход (PostgreSQL)
|
||||
@@ -482,7 +500,7 @@ async fn create_user_with_order(
|
||||
}
|
||||
```
|
||||
|
||||
**Node.js (pg + Mongoose)**
|
||||
### JavaScript (Node.js) {#javascript-sql}
|
||||
|
||||
```javascript
|
||||
// SQL подход (PostgreSQL)
|
||||
@@ -571,7 +589,7 @@ async function createUserWithOrderMongo(request) {
|
||||
}
|
||||
```
|
||||
|
||||
**Python (SQLAlchemy + MongoDB)**
|
||||
### Python (SQLAlchemy) {#python-sql}
|
||||
|
||||
```python
|
||||
# SQL подход (PostgreSQL)
|
||||
@@ -687,7 +705,12 @@ def create_user_with_order_mongo(request):
|
||||
|
||||
#### Примеры реализации
|
||||
|
||||
**Java (Spring Boot)**
|
||||
**Выберите язык программирования:**
|
||||
- [Java (Spring Boot)](#java-rest) | [Rust (Actix Web)](#rust-rest) | [JavaScript (Node.js)](#javascript-rest) | [Python (FastAPI)](#python-rest)
|
||||
|
||||
---
|
||||
|
||||
### Java (Spring Boot) {#java-rest}
|
||||
|
||||
```java
|
||||
// REST API
|
||||
@@ -716,7 +739,7 @@ public class UserResolver implements GraphQLResolver<User> {
|
||||
}
|
||||
```
|
||||
|
||||
**Rust (Actix Web + Juniper)**
|
||||
### Rust (Actix Web) {#rust-rest}
|
||||
|
||||
```rust
|
||||
// REST API
|
||||
@@ -753,7 +776,26 @@ const resolvers = {
|
||||
};
|
||||
```
|
||||
|
||||
**Python (FastAPI + Strawberry)**
|
||||
### JavaScript (Node.js) {#javascript-rest}
|
||||
|
||||
```javascript
|
||||
// REST API
|
||||
fastify.get('/api/users/:id', async (request, reply) => {
|
||||
const user = await userService.findById(request.params.id);
|
||||
return user;
|
||||
});
|
||||
|
||||
// GraphQL
|
||||
const resolvers = {
|
||||
User: {
|
||||
orders: async (user) => {
|
||||
return await orderService.findByUserId(user.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Python (FastAPI + Strawberry) {#python-rest}
|
||||
|
||||
```python
|
||||
# REST API
|
||||
@@ -969,7 +1011,12 @@ class User:
|
||||
|
||||
#### Примеры реализации
|
||||
|
||||
**Java (Spring Boot + Redis)**
|
||||
**Выберите язык программирования:**
|
||||
- [Java (Spring Boot + Redis)](#java-cache) | [Rust (Redis + Tokio)](#rust-cache) | [JavaScript (Node.js + Redis)](#javascript-cache) | [Python (FastAPI + Redis)](#python-cache)
|
||||
|
||||
---
|
||||
|
||||
### Java (Spring Boot + Redis) {#java-cache}
|
||||
|
||||
```java
|
||||
// Cache-Aside Pattern
|
||||
@@ -1025,8 +1072,9 @@ public class UserServiceWriteThrough {
|
||||
}
|
||||
}
|
||||
```
|
||||
</div>
|
||||
|
||||
**Rust (Redis + Tokio)**
|
||||
<div id="rust-cache" class="tab-content">
|
||||
|
||||
```rust
|
||||
// Cache-Aside Pattern
|
||||
@@ -1084,8 +1132,9 @@ impl UserService {
|
||||
}
|
||||
}
|
||||
```
|
||||
</div>
|
||||
|
||||
**Node.js (Redis + ioredis)**
|
||||
<div id="javascript-cache" class="tab-content">
|
||||
|
||||
```javascript
|
||||
// Cache-Aside Pattern
|
||||
@@ -1159,8 +1208,9 @@ class UserServiceWriteBehind {
|
||||
}
|
||||
}
|
||||
```
|
||||
</div>
|
||||
|
||||
**Python (Redis + aioredis)**
|
||||
<div id="python-cache" class="tab-content">
|
||||
|
||||
```python
|
||||
# Cache-Aside Pattern
|
||||
@@ -1233,6 +1283,8 @@ class UserService:
|
||||
except Exception as e:
|
||||
print(f"Async save error: {e}")
|
||||
```
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Рекомендации по выбору
|
||||
|
||||
@@ -1333,3 +1385,86 @@ class UserService:
|
||||
|
||||
> **💡 Совет**: Документируйте архитектурные решения в Architecture Decision Records (ADR) для будущих поколений разработчиков.
|
||||
|
||||
<style>
|
||||
.tabs {
|
||||
margin: 20px 0;
|
||||
border: 1px solid #e1e4e8;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-buttons {
|
||||
display: flex;
|
||||
background-color: #f6f8fa;
|
||||
border-bottom: 1px solid #e1e4e8;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #586069;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background-color: #e1e4e8;
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background-color: #fff;
|
||||
color: #0366d6;
|
||||
border-bottom: 2px solid #0366d6;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tab-content pre {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: #f6f8fa;
|
||||
padding: 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab-content code {
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function showTab(tabId, button) {
|
||||
// Найти родительский контейнер вкладок
|
||||
const tabsContainer = button.closest('.tabs');
|
||||
|
||||
// Скрыть все вкладки в этом контейнере
|
||||
const contents = tabsContainer.querySelectorAll('.tab-content');
|
||||
contents.forEach(content => content.classList.remove('active'));
|
||||
|
||||
// Убрать активный класс со всех кнопок в этом контейнере
|
||||
const buttons = tabsContainer.querySelectorAll('.tab-btn');
|
||||
buttons.forEach(btn => btn.classList.remove('active'));
|
||||
|
||||
// Показать выбранную вкладку
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
button.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in new issue
Block a user