# wow-note-react **Repository Path**: uyevan/wow-note-react ## Basic Information - **Project Name**: wow-note-react - **Description**: 📚基于React,SpringCloud框架的下一代个人云笔记项目前端.其接入到了Next.js、NextUI、TailwindCss、Docker等技术栈. - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: https://note.jfkj.xyz - **GVP Project**: No ## Statistics - **Stars**: 81 - **Forks**: 30 - **Created**: 2024-02-11 - **Last Updated**: 2025-05-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: React, Tailwind, Nodejs, TypeScript, nextjs ## README # wow-note 个人云储笔记

🍔

> 本仓库为前端仓库，后端仓库请访问 [https://gitee.com/uyevan/wow-note-spring](https://gitee.com/uyevan/wow-note-spring) > > 在线预览: [https://note.jfkj.xyz](https://note.jfkj.xyz) ## 项目简介 👨‍💻 Wow-note 是一个功能强大的个人云笔记平台，专注于笔记的**创建**、**管理**、**分享**和**协作**。通过丰富的功能和直观的界面，让用户可以随时随地记录灵感、整理知识并与他人共享。项目采用前后端分离架构，前端基于Next.js实现，后端采用Spring Cloud微服务架构。 最新版本引入了多项高级功能，包括实时协作编辑、AI辅助写作、ElasticSearch搜索支持、MongoDB文档存储等，大幅提升了用户体验和系统性能。 ## 系统架构 🪜 ![项目架构图](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/design_TIP.png#pic_center) ### 前端架构 - 基于Next.js的SSR架构 - React组件化开发 - 响应式UI设计 - 微前端模块化结构 ### 后端架构 - Spring Cloud微服务架构 - 多数据源支持(MySQL + MongoDB + ElasticSearch) - 消息队列(RabbitMQ)实现异步处理 - 分布式日志系统 ### 持续集成与部署 - Jenkins实现自动化构建与部署 - Docker容器化应用打包 - 阿里云容器镜像托管 - 自动化测试与质量检测 ## 功能特性 🎉 ### 核心功能 - **笔记管理**: 创建、编辑、删除、归档笔记，支持富文本和Markdown格式 - **集合管理**: 创建文档集合，实现层级化组织笔记 - **标签系统**: 灵活标记笔记，快速分类和检索 - **分享功能**: 生成分享链接，控制访问权限 - **搜索系统**: 支持基于ElasticSearch和MySQL的全文检索 - **用户管理**: 用户注册、登录、权限控制 ### 新增特性 - **实时协作**: 多人同时编辑一篇笔记，实时同步变更 - **AI辅助**: 智能摘要生成、内容补全、写作建议 - **历史版本**: 笔记修改历史记录，支持版本回溯 - **评论系统**: 对笔记添加评论，促进交流 - **移动适配**: 全面优化移动端体验 - **离线支持**: 支持离线编辑，自动同步 - **完整日志**: 详细记录用户操作，方便追踪和分析 ## 技术栈 🍵 ### 前端技术 - **TypeScript**: 类型安全的JavaScript超集 - **React 18**: 用户界面构建库 - **Next.js 14**: React服务端渲染框架 - **NextUI**: 高质量React UI组件库 - **TailwindCSS**: 实用型CSS框架 - **Axios**: HTTP客户端 - **React Query**: 数据获取和缓存 - **Zustand**: 状态管理 - **Monaco Editor**: 代码编辑器 ### 后端技术 - **Spring Cloud**: 微服务框架 - **Spring Boot**: Java应用开发框架 - **MyBatis-Plus**: ORM框架 - **MySQL**: 关系型数据库 - **MongoDB**: 文档型数据库 - **ElasticSearch**: 搜索引擎 - **RabbitMQ**: 消息队列 - **Redis**: 缓存系统 - **JWT**: 身份认证 ### 开发与部署 - **Docker**: 容器化部署 - **Jenkins**: CI/CD自动化 - **Nginx**: 负载均衡和反向代理 - **Git**: 版本控制 ## 部署方案 🚀 ### Docker容器化部署 项目使用Docker实现前端应用的容器化部署，以下是Dockerfile配置: ```dockerfile # 构建阶段 FROM node:18-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm install --save --force COPY . . RUN npm run build # 运行阶段 FROM node:18-alpine WORKDIR /app COPY --from=builder /app/next.config.js ./ COPY --from=builder /app/public ./public COPY --from=builder /app/.next ./.next COPY --from=builder /app/node_modules ./node_modules COPY --from=builder /app/package.json ./package.json # 暴露端口 EXPOSE 3000 # 启动应用 CMD ["npm", "start"] ``` ### CI/CD自动化流程 项目通过Jenkins实现前端持续集成与部署: 1. **代码拉取**: 从Git仓库拉取最新代码 2. **安装依赖**: 执行`npm install`安装项目依赖 3. **代码检查**: 运行ESLint检查代码质量 4. **单元测试**: 执行自动化测试 5. **构建应用**: 运行`npm run build`构建生产版本 6. **镜像构建**: 构建Docker镜像 7. **镜像推送**: 推送到阿里云容器镜像仓库 8. **部署应用**: 更新运行环境中的容器 ``` 代码提交 → Jenkins触发 → 依赖安装 → 测试构建 → 镜像构建推送 → 容器部署 ``` ### Nginx配置与部署 前端应用使用Nginx作为Web服务器和反向代理，典型配置如下: ```nginx server { listen 80; server_name note.jfkj.xyz; # 重定向到HTTPS return 301 https://$host$request_uri; } server { listen 443 ssl; server_name note.jfkj.xyz; # SSL配置 ssl_certificate /path/to/certificate.crt; ssl_certificate_key /path/to/private.key; # 前端应用 location / { proxy_pass http://localhost:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # API请求转发到后端 location /api { proxy_pass http://gateway-service:9091; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 30d; add_header Cache-Control "public, no-transform"; } } ``` ## 快速开始 🔛 ### 本地开发环境 1. **环境要求** - Node.js: v18.17.0+ - npm: 9.6.7+ 2. **克隆仓库** ```bash git clone https://gitee.com/uyevan/wow-note-react.git cd wow-note-react ``` 3. **安装依赖** ```bash npm install --save --force ``` 4. **配置环境** - 在`next.config.js`中配置API代理 - 在`app/constants/openApiConstants.tsx`中设置API基础URL 5. **启动开发服务器** ```bash npm run dev ``` 开发服务器将在`http://localhost:3000`启动 6. **生产构建** ```bash npm run build npm run start ``` ### Docker部署 1. **拉取镜像** ```bash docker pull registry.cn-shenzhen.aliyuncs.com/wow-note-react/wow-note-react:latest ``` 2. **运行容器** ```bash docker run -d -p 3000:3000 --name wow-note-react registry.cn-shenzhen.aliyuncs.com/wow-note-react/wow-note-react:latest ``` 3. **使用Docker Compose** ```yaml version: '3' services: wow-note-frontend: image: registry.cn-shenzhen.aliyuncs.com/wow-note-react/wow-note-react:latest container_name: wow-note-frontend ports: - "3000:3000" environment: - NODE_ENV=production - API_URL=https://api.jfkj.xyz restart: always ``` ## 项目结构 🗃️ ``` ├─app │ ├─assets │ │ ├─css // 样式表文件 │ │ ├─data // 静态数据文件 │ │ └─icons // 图标文件 │ ├─components │ │ ├─ai // AI相关组件 │ │ ├─auth // 身份验证组件 │ │ ├─collaboration // 协作功能组件 │ │ ├─common // 通用组件 │ │ ├─editor // 编辑器组件 │ │ ├─home // 主页组件 │ │ └─profile // 用户资料组件 │ │ ├─folder // 文件夹组件 │ │ ├─note // 笔记组件 │ │ └─share // 分享组件 │ ├─config // 配置文件 │ ├─constants // 常量文件 │ ├─hooks // 自定义Hooks │ ├─pages // 页面组件 │ │ ├─auth // 身份验证页面 │ │ ├─note // 笔记页面 │ │ ├─profile // 用户页面 │ │ └─share // 分享页面 │ ├─service // 服务层 │ │ ├─api // API调用 │ │ ├─components // 服务组件 │ │ └─view // 视图相关的服务文件 │ ├─store // 状态管理 │ ├─types // TypeScript类型定义 │ └─utils // 工具函数和辅助函数 ``` ## 项目预览 💻 > NextUI支持完全响应式设计，以下是桌面端的预览截图，移动端有专门的优化布局 ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_1.png) ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_2.png) ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_3.png) ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_4.png) ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_5.png) ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_6.png) ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_7.png) ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_8.png) ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_9.png) ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_10.png) ![Demo](https://evan-1304983303.cos.ap-nanjing.myqcloud.com/note/note_11.png) ## 特别鸣谢 🏆 感谢以下开源项目和社区的支持: - React社区 - Next.js团队 - NextUI团队 - TailwindCSS社区 - Spring Cloud & Spring Boot社区 ## 贡献指南 🤝 欢迎贡献代码、提交问题或建议！请先fork本仓库，然后提交Pull Request。 ## 联系方式 📬 项目维护者: Evan - Email: [uyevan@163.com](mailto:uyevan@163.com) - 微信: 微信联系方式 ## 许可证 📄 本项目采用MIT许可证，详情请查看LICENSE文件。