From 1d7ca7f94e2a2b8c4d420ebade3f0159911d1410 Mon Sep 17 00:00:00 2001 From: gitee-bot Date: Sun, 20 Jul 2025 03:26:56 +0000 Subject: [PATCH] Update README.md --- README.md | 289 +++++++++++++----------------------------------------- 1 file changed, 66 insertions(+), 223 deletions(-) diff --git a/README.md b/README.md index c5a3359..69f0c6e 100644 --- a/README.md +++ b/README.md @@ -1,294 +1,137 @@ -# SyntaxSeed - 开发者成长日志 | 技术分析博客 - -一个面向高中生开发者的简约高端技术博客，展示网站开发历程和技术分析。 -![SyntaxSeed](https://img.shields.io/badge/SyntaxSeed-开发者成长日志-blue) -![Vue](https://img.shields.io/badge/Vue-3.3.4-brightgreen) -![Vite](https://img.shields.io/badge/Vite-4.4.9-yellow) -![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.3.3-blue) -![Express](https://img.shields.io/badge/Express-5.1.0-lightgrey) -## 设计理念 +根据您提供的代码结构和文件信息，以下是一个适合该项目的 README.md 内容： -- **主题**：开发者成长日志 | 技术分析博客 -- **视觉风格**：动态海洋蓝 × 简约科技感 × 微交互动画 +--- -## 核心设计规范 +# SyntaxSeed - 开发者成长日志 | 技术分析博客 -| **元素** | **规范说明** | -|------------|--------------------------------------| -| **主色调** | 浅色模式： #F0F7FF (浅天蓝) | -| | 深色模式： #0A192F (深海蓝) | -| | 强调色： #2A9D8F (海洋绿松石) | -| | 代码高亮： #64FFDA (霓虹青) | -| **字体组合** | 标题：Montserrat (科技感无衬线) | -| | 正文：Open Sans (高可读性) | -| | 代码：Fira Code (连字等宽字体) | -| **动效原则** | 波浪背景动画 + 卡片悬停3D翻转 | -| | 进度条流体效果 + 按钮微交互 | +## 项目简介 +SyntaxSeed 是一个专注于开发者成长历程与技术分析的博客平台。它旨在为开发者提供一个展示技术积累、分享项目经验和记录个人成长的空间。 -## 技术栈 +该项目分为前端和后端两部分，前端使用 Vue.js + TypeScript + Vite 构建，后端采用 Express.js 提供数据接口支持。 -- **前端框架**：Vue 3 + Vite -- **CSS框架**：Tailwind CSS -- **UI组件库**：PrimeVue -- **动效库**：Framer Motion -- **代码高亮**：Prism.js +## 核心功能 +- 博客文章展示与详情阅读 +- 技术标签与文章分类 +- 项目展示与时间轴记录 +- 主题切换（支持暗黑模式） +- 阅读进度条与代码复制功能 +- 动态加载动画与交互组件 -## 功能特点 - -- 响应式设计，适配各种设备屏幕 -- 暗黑/明亮模式切换 -- 博客文章阅读和分类 -- 项目展示和筛选 -- 成长时间轴 -- 技术栈展示 -- 3D卡片翻转效果 -- 波浪背景动画 +## 技术栈 +- 前端：Vue 3, TypeScript, Vite, Tailwind CSS, Axios +- 后端：Node.js, Express, Knex.js, SQLite/MySQL（根据配置） +- 工具：PM2（生产部署） ## 快速开始 ### 前端部分 - #### 安装依赖 - +在项目根目录下执行： ```bash -# 在项目根目录下执行 -npm install -# 或 pnpm install ``` #### 开发模式 - +运行本地开发服务器： ```bash -npm run dev -# 或 pnpm dev ``` #### 构建生产版本 - +生成可部署的静态文件： ```bash -npm run build -# 或 pnpm build ``` #### 预览生产版本 - +本地预览构建后的静态资源： ```bash -npm run preview -# 或 pnpm preview ``` ### 后端部分 - -#### 安装依赖 - +#### 进入 serves 目录 ```bash -# 进入serves目录 cd serves +``` -# 安装依赖 -npm install -# 或 +#### 安装依赖 +```bash pnpm install ``` #### 开发模式 - +启动后端服务： ```bash -# 在serves目录下 -npm run dev -# 或 -pnpm dev +node index.js ``` ## 项目结构 - -``` -/ -├── public/ # 静态资源 -├── src/ -│ ├── assets/ # 项目资源文件 -│ ├── components/ # 通用组件 -│ ├── router/ # 路由配置 -│ ├── views/ # 页面视图 -│ ├── App.vue # 根组件 -│ └── main.js # 入口文件 -├── serves/ # 后端服务 -│ ├── getData/ # API路由和处理函数 -│ ├── db.js # 数据库连接配置 -│ ├── db.config.yaml # 数据库参数配置 -│ └── index.js # 服务入口文件 -├── .env.development # 开发环境配置 -├── .env.production # 生产环境配置 -├── index.html # HTML模板 -├── package.json # 前端项目依赖 -├── vite.config.ts # Vite配置 -├── tailwind.config.js # Tailwind CSS配置 -└── README.md # 项目说明 -``` +- `src/`：前端源码目录，包含组件、路由、视图及工具模块 +- `serves/`：后端 API 服务目录，含数据库配置、路由及服务启动文件 +- `public/`：静态资源目录 +- `utils/`：通用工具模块，如全局加载动画控制 +- `assets/`：前端资源文件，如图标、样式和图片 +- `components/`：可复用的 Vue 组件 +- `views/`：页面级 Vue 组件 ## 部署指南 ### 环境要求 - -- Node.js 16.x 或更高版本 -- MySQL 8.0 或更高版本 -- 支持HTTPS的Web服务器（推荐Nginx） +- Node.js v16+ +- pnpm 包管理器 +- 数据库支持：SQLite 或 MySQL（根据 `.env` 配置） ### 数据库配置 - -1. 创建MySQL数据库 - -```sql -CREATE DATABASE syntaxseed CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; -``` - -2. 配置数据库连接 - -编辑 `serves/db.config.yaml` 文件，设置正确的数据库连接信息： - -```yaml -db: - client: "mysql2" - connection: - host: "your-database-host" - user: "your-database-user" - password: "your-database-password" - database: "syntaxseed" - port: 3306 -``` +修改 `/serves/db.js` 中的数据库连接配置，或通过 `.env` 文件设置数据库路径及类型。 ### 前端部署 - -1. 构建前端项目 - +在项目根目录下构建静态文件： ```bash -# 在项目根目录下 -npm run build -# 或 pnpm build ``` -2. 配置环境变量 - -确保 `.env.production` 文件中的API地址配置正确： - -``` -VITE_API_BASEURL=/api -VITE_staticHost=<你的静态资源地址> -``` - -3. 部署到Web服务器 - -将 `dist` 目录下的所有文件复制到Web服务器的根目录。 +将 `dist/` 目录部署到 Web 服务器，如 Nginx 或 Apache。 ### 后端部署 +#### 安装依赖 +```bash +cd serves +pnpm install +``` -1. 安装PM2（用于生产环境进程管理） - +#### 使用 PM2 启动服务 ```bash -npm install -g pm2 +pm2 start index.js -n syntaxseed-api ``` -2. 启动后端服务 +### 重定向 HTTP 到 HTTPS +在 Nginx 或服务器配置中设置 HTTP 到 HTTPS 的 301 重定向。 -```bash -# 进入serves目录 -cd serves +### SSL 证书配置 +配置 SSL 证书以启用 HTTPS 服务，可通过 Let's Encrypt 免费获取。 -# 安装依赖 -npm install +### API 代理 +前端可通过 Nginx 或类似反向代理服务器将 `/api` 路径代理到后端服务。 -# 使用PM2启动服务 -pm2 start index.js --name "syntaxseed-api" -``` +## 常见问题 -3. 配置Nginx反向代理 - -```nginx -server { - listen 80; - server_name your-domain.com; - - # 重定向HTTP到HTTPS - return 301 https://$host$request_uri; -} - -server { - listen 443 ssl; - server_name your-domain.com; - - # SSL证书配置 - ssl_certificate /path/to/cert.pem; - ssl_certificate_key /path/to/key.pem; - - # 前端静态文件 - location / { - root /path/to/dist; - index index.html; - try_files $uri $uri/ /index.html; - } - - # API代理 - location /api/ { - proxy_pass http://localhost:7204/api/; - proxy_http_version 1.1; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection 'upgrade'; - proxy_set_header Host $host; - proxy_cache_bypass $http_upgrade; - } -} -``` +### 自定义配置 +- 修改 `.env.development` 和 `.env.production` 以配置不同环境变量 +- 在 `/serves/db.js` 中调整数据库连接方式 +- 在 `/src/utils/loading.js` 中自定义加载动画行为 -### 常见问题 - -1. **API连接失败** - - 检查后端服务是否正常运行 - - 确认Nginx配置中的代理路径是否正确 - - 验证防火墙是否允许7204端口的流量 - -2. **数据库连接错误** - - 确认数据库凭据是否正确 - - 检查数据库服务器是否允许远程连接 - - 验证数据库用户是否有足够的权限 - -3. **前端资源加载失败** - - 检查静态资源路径是否正确 - - 确认环境变量配置是否正确 - -## 自定义配置 - -查看 [Vite配置参考](https://vitejs.dev/config/). - -## 后台面板 -* Buildadmin 官网：[Buildadmin](官网：[Buildadmin](https://www.buildadmin.com/) -后台面板是一个基于Vue3的后台管理系统，用于管理SyntaxSeed的博客内容。 -### 功能特点 -- 文章管理：添加、编辑、删除文章 -- 分类管理：创建、编辑、删除文章分类 -- 项目管理：添加、编辑、删除项目 -- 成长时间轴管理：添加、编辑、删除时间轴条目 -- 技术栈管理：添加、编辑、删除技术栈条目 -- 页面管理：添加、编辑、删除页面 -- 用户管理：添加、编辑、删除用户 -- 权限管理：管理用户权限 -- 配置管理：管理系统配置 -- 日志管理：查看系统日志 -- 系统设置：管理系统设置 -- 系统信息：查看系统信息 -- 系统更新：检查系统更新 -- 系统帮助：查看系统帮助 -- 系统退出：退出系统 -### 安装指南 -参考buildadmin 官网文档 +### 后台管理面板 +当前未提供可视化后台管理界面，所有数据通过 API 接口操作。 +## 贡献指南 +欢迎提交 PR 和 Issue，为项目提供优化建议或修复 bug。请确保遵循代码风格并提供清晰的提交信息。 ## 许可证 +本项目采用 MIT 许可证。 + +--- -本项目采用 MIT 许可证。详情请参阅 LICENSE 文件。 \ No newline at end of file +如需进一步定制 README.md 或补充内容，请提供更详细的说明或代码内容。 \ No newline at end of file -- Gitee