427 lines
12 KiB
PHP
427 lines
12 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="基于 Laravel + Laravel-S + Swoole 的高性能后端 API 系统">
|
||
<title>Laravel-S - 高性能后端 API 系统</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* Header */
|
||
header {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
padding: 20px 0;
|
||
position: fixed;
|
||
width: 100%;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: white;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 30px;
|
||
list-style: none;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: white;
|
||
text-decoration: none;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
padding: 200px 0 100px;
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 48px;
|
||
margin-bottom: 20px;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 18px;
|
||
margin-bottom: 40px;
|
||
opacity: 0.9;
|
||
max-width: 600px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 15px 40px;
|
||
background: white;
|
||
color: #667eea;
|
||
text-decoration: none;
|
||
border-radius: 30px;
|
||
font-weight: bold;
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: white;
|
||
color: #667eea;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: transparent;
|
||
color: white;
|
||
border: 2px solid white;
|
||
}
|
||
|
||
/* Features Section */
|
||
.features {
|
||
padding: 100px 0;
|
||
background: white;
|
||
}
|
||
|
||
.section-title {
|
||
text-align: center;
|
||
font-size: 36px;
|
||
margin-bottom: 60px;
|
||
color: #333;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 40px;
|
||
}
|
||
|
||
.feature-card {
|
||
padding: 40px;
|
||
background: #f8f9fa;
|
||
border-radius: 10px;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-size: 24px;
|
||
margin-bottom: 15px;
|
||
color: #667eea;
|
||
}
|
||
|
||
.feature-card p {
|
||
color: #666;
|
||
}
|
||
|
||
/* Tech Stack Section */
|
||
.tech-stack {
|
||
padding: 100px 0;
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||
}
|
||
|
||
.tech-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 30px;
|
||
}
|
||
|
||
.tech-item {
|
||
text-align: center;
|
||
padding: 30px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.tech-item h4 {
|
||
color: #667eea;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
/* Architecture Section */
|
||
.architecture {
|
||
padding: 100px 0;
|
||
background: white;
|
||
}
|
||
|
||
.architecture-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 50px;
|
||
align-items: center;
|
||
}
|
||
|
||
.architecture-text h3 {
|
||
font-size: 28px;
|
||
margin-bottom: 20px;
|
||
color: #667eea;
|
||
}
|
||
|
||
.architecture-text p {
|
||
margin-bottom: 15px;
|
||
color: #666;
|
||
}
|
||
|
||
.architecture-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.architecture-list li {
|
||
padding: 10px 0;
|
||
padding-left: 30px;
|
||
position: relative;
|
||
color: #555;
|
||
}
|
||
|
||
.architecture-list li:before {
|
||
content: "✓";
|
||
position: absolute;
|
||
left: 0;
|
||
color: #667eea;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
padding: 40px 0;
|
||
background: #333;
|
||
color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
footer p {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.hero h1 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.architecture-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Animations */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.animate-fadeInUp {
|
||
animation: fadeInUp 0.6s ease-out;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="container">
|
||
<nav>
|
||
<a href="#" class="logo">🚀 Laravel-S</a>
|
||
<ul class="nav-links">
|
||
<li><a href="#features">特性</a></li>
|
||
<li><a href="#tech">技术栈</a></li>
|
||
<li><a href="#architecture">架构</a></li>
|
||
<li><a href="/admin">后台管理</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="hero">
|
||
<div class="container animate-fadeInUp">
|
||
<h1>高性能后端 API 系统</h1>
|
||
<p>基于 Laravel + Laravel-S + Swoole 构建的现代化后端 API 系统，提供卓越的性能和开发效率</p>
|
||
<div>
|
||
<a href="/admin" class="btn btn-primary">进入后台管理</a>
|
||
<a href="https://github.com/hhxsv5/laravel-s" target="_blank" class="btn btn-secondary">查看文档</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="features" id="features">
|
||
<div class="container">
|
||
<h2 class="section-title">核心特性</h2>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">⚡</div>
|
||
<h3>高性能</h3>
|
||
<p>基于 Swoole 协程框架，提供卓越的并发处理能力，轻松应对高并发场景</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🧩</div>
|
||
<h3>模块化</h3>
|
||
<p>采用 Laravel Modules 实现模块化架构，业务模块独立管理，易于扩展和维护</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3>安全可靠</h3>
|
||
<p>JWT 认证、RBAC 权限控制、数据验证等多重安全防护机制</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📊</div>
|
||
<h3>完整后台</h3>
|
||
<p>基于 Vue3 + Ant Design Vue 构建的现代化后台管理系统</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔄</div>
|
||
<h3>热重载</h3>
|
||
<p>开发环境支持文件监控热重载，提升开发体验</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📝</div>
|
||
<h3>RESTful API</h3>
|
||
<p>遵循 RESTful 规范的 API 设计，统一的响应格式</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="tech-stack" id="tech">
|
||
<div class="container">
|
||
<h2 class="section-title">技术栈</h2>
|
||
<div class="tech-grid">
|
||
<div class="tech-item">
|
||
<div style="font-size: 36px;">🐘</div>
|
||
<h4>PHP</h4>
|
||
</div>
|
||
<div class="tech-item">
|
||
<div style="font-size: 36px;">🔷</div>
|
||
<h4>Laravel</h4>
|
||
</div>
|
||
<div class="tech-item">
|
||
<div style="font-size: 36px;">🚀</div>
|
||
<h4>Swoole</h4>
|
||
</div>
|
||
<div class="tech-item">
|
||
<div style="font-size: 36px;">⚡</div>
|
||
<h4>Laravel-S</h4>
|
||
</div>
|
||
<div class="tech-item">
|
||
<div style="font-size: 36px;">🔑</div>
|
||
<h4>JWT-Auth</h4>
|
||
</div>
|
||
<div class="tech-item">
|
||
<div style="font-size: 36px;">📦</div>
|
||
<h4>Laravel Modules</h4>
|
||
</div>
|
||
<div class="tech-item">
|
||
<div style="font-size: 36px;">💚</div>
|
||
<h4>MySQL</h4>
|
||
</div>
|
||
<div class="tech-item">
|
||
<div style="font-size: 36px;">🔴</div>
|
||
<h4>Redis</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="architecture" id="architecture">
|
||
<div class="container">
|
||
<h2 class="section-title">系统架构</h2>
|
||
<div class="architecture-content">
|
||
<div class="architecture-text">
|
||
<h3>模块化设计</h3>
|
||
<p>项目采用清晰的分层架构，将业务逻辑合理划分：</p>
|
||
<ul class="architecture-list">
|
||
<li>基础模块（Auth、System）：不使用 Laravel Modules 扩展</li>
|
||
<li>业务模块：使用 Laravel Modules 独立管理</li>
|
||
<li>Controller 层：处理 HTTP 请求</li>
|
||
<li>Service 层：业务逻辑处理</li>
|
||
<li>Model 层：数据模型定义</li>
|
||
<li>统一的 API 响应格式</li>
|
||
</ul>
|
||
</div>
|
||
<div class="architecture-diagram">
|
||
<div style="background: #f8f9fa; padding: 30px; border-radius: 10px;">
|
||
<h4 style="text-align: center; margin-bottom: 20px; color: #667eea;">快速开始</h4>
|
||
<pre style="background: #333; color: #fff; padding: 20px; border-radius: 5px; overflow-x: auto;"><code># 安装依赖
|
||
composer install
|
||
|
||
# 配置环境
|
||
cp .env.example .env
|
||
|
||
# 执行迁移
|
||
php artisan migrate
|
||
|
||
# 启动 Laravel-S
|
||
php bin/laravels start
|
||
|
||
# 访问后台
|
||
# http://localhost:8000/admin</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2024 Laravel-S. Built with ❤️ using Laravel & Swoole</p>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|