# wow-note-react

**Repository Path**: manong99898/wow-note-react

## Basic Information

- **Project Name**: wow-note-react
- **Description**: 📚基于React,NextJS,SpringCloud框架的下一代个人云笔记项目前端.
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 30
- **Created**: 2024-02-18
- **Last Updated**: 2024-02-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wow-note 个人云笔记

> 本仓库为前端仓库，需要了解后端仓库请🍧[https://gitee.com/uyevan/wow-note-spring](https://gitee.com/uyevan/wow-note-spring)
>> 您也可以在线预览成品🎉[http://note.jfkj.xyz](http://note.jfkj.xyz)
#### 项目简介 👨‍💻

>  wow-note 个人云笔记项目是专门用来在线 **存储** 和 **分享** 个人笔记文档的软件；使用者可以快速地进行创建文件夹或笔记等操作，也可以对其进行 **分享** 操作，以便更多人查看与利用此分享者笔记。开发此软件的根本目的是对个人以前所学的技术进行一个综合的总结，无论使在以前在学校教过或自学过的相关技术进行一个打捞和评估；其次是本项目可能会作为我的毕设项目，虽然我写过很多项目（**UY云，UyClub工具箱，乐应软件库**...）但无论从技术层面，开发成本和难度上来看 wow-note 这项目都比这些小项目复杂得多。  
>  wow-note项目后端是基于 SpringCloud 微服务方案扩展；前端是基于 NextJS（基于React的服务端渲染框架） 框架进行扩展。开发流程就是 **设计，边编码边测试，部署**，虽然不能说特别牛x，但对于我个人而言从设计到现在意义非凡，毕竟现在满脑子各种离谱Bug，如果对你有帮助不妨给个Star。   
>  ![项目简介](https://pan.losfer.cn/view.php/22ba8b1539bbe2f1d283594a402f1301.png#pic_center)


项目架构 🪜
> ![项目架构图](https://pan.losfer.cn/view.php/680a854047142eebf8a113304dc464fd.png)

应用结构 🛎️
>![应用结构](https://pan.losfer.cn/view.php/cc8a362d838cabfca830b18a588cf40f.png)

#### 功能特性 🎉
> - 服务端渲染：NextJS是基于React的服务端渲染框架，在此项目开发中我使用到了一些组件在服务端渲染，特性就是快速渲染也有利于CEO优化。
> - NextJS钩子：NextJS提供了很多额外的API和生命周期函数，如对 **Router** 的优化， **useEffect** 钩子等等。
> - 新概念UI：我在这项目的UI选择策略上并未选择原生的渲染，而是选择了 **NextUI** 框架，因为它提供了主流的组件与丰富的选择，最重要的是各种组件特别好看。
#### 环境要求 ✅
**NodeJS** [https://nodejs.org](https://nodejs.org/)
> v18.17.0 (npm: '9.6.7')

**React** [https://react.docschina.org](https://react.docschina.org)

> 18.2.0

**NextJS** [https://nextjs.org](https://nextjs.org/)
> Next.js v14.0.4

**NextUI** [https://nextui.org](https://nextui.org/)
> "nextui-org/accordion": "v2.0.28",   
    "nextui-org/react": "v2.2.9"

**Docker** [https://www.docker.com](https://www.docker.com/)

> Cloud integration: v1.0.35+desktop.5   
 Version:           24.0.6   
 API version:       1.43   
 Go version:        go1.20.7   
 OS/Arch:           windows/amd64

#### 技术栈 🍵
 - JavaScript
 - TypeScript
 - NodeJS
 - Next.js
 - NextUI
 - React
 - TailWindCSS
 - Docker
#### 快速开始 🔛
>  我首先是在电脑（Windows11）本地进行开发，然后通过Docker打包镜像，再放到服务器进行部署的，可以通过拉取本地进行调试，也可以通过Docker进行拉去调试。

💻 本地拉去运行
> - 环境配置：配置本地 **NodeJS** 环境；
> - 拉取项目：`git clone https://gitee.com/uyevan/wow-note-react.git`；
> - 应用配置：防止跨域问题我加了应用代理的，你可以在 **next.config.js** 文件内修改代理；应用服务域名可以在 **app/constants/openApiConstants.tsx** 中更改；
> - 运行项目：打开终端执行 `npm i --save --force` 进行依赖安装，你可能好奇为什么不用yarn一个包管理工具，因为我以前一直用的npm！执行后需要等待，过程比较慢要安装 **react/nextJS/nextUI** 等较大的框架，然后就执行 `npm run dev` 后打开调试服务IP进行其他操作了；如果你想上线可以执行 `npm run build` 进行构建项目，再运行 `npm run start` 进行启动；

🦣 拉去镜像运行

> - 环境配置：无论你是什么系统，要确保 **Docker** 环境并且正常启动；并且你要保证有足够空间，因为整个进行较大（2.5GB上下）,因为国内无法访问DockerHub，所以我这里使用了阿里云镜像仓库服务（个人免费），无论哪个只要有Docker环境即可；
> - 拉去镜像：`docker pull registry.cn-shenzhen.aliyuncs.com/wow-note-react/wow-note-react:latest`；
> - 运行镜像：`docker run -d -p 3000:3000 --name wow-note-react registry.cn-shenzhen.aliyuncs.com/wow-note-react/wow-note-react:latest`；
> - 运行测试：如果是本地则可以访问 **localhost:3000** 进行验证；如果是服务器可以先开放某个端口再映射这个端口启动容器，再进行验证；

#### 项目结构 🗃️
🐝 我把组件，页和服务都分开创建了，分的其实也不是特别细，感觉还可以再细分更多组件，主要是有些功能实现起来很麻烦，代码量较大，不细分组件可能后期维护根本看不懂，就比如文件夹路由导航功能；主要结构如下：
>├─app   
│  ├─assets   
│  │  ├─css   
│  │  ├─data   
│  │  └─icons   
│  ├─components   
│  │  ├─auth   
│  │  ├─home   
│  │  └─profile   
│  │      ├─folder   
│  │      ├─note   
│  │      └─share   
│  ├─config   
│  ├─constants   
│  ├─pages   
│  │  ├─auth   
│  │  ├─profile   
│  │  └─share   
│  ├─service   
│  │  ├─components   
│  │  └─view   
│  ├─utils   
│  └─view   

🛠️ 其他配置文件跟 React 应用不分上下；
#### 项目预览 💻
> NextUI是支持全段自定义适配的，一下是电脑端的预览结果，手机端不分上下；
> ![主页](https://pan.losfer.cn/view.php/378d247e3a4a5f4df2ec9e6bfe222d28.png#pic_center)
> ![文档中心](https://pan.losfer.cn/view.php/a2d229d4d5592ebf123d5488f375662a.png#pic_center)
> ![笔记编辑](https://pan.losfer.cn/view.php/215ca0d889bb61a6905c97c568e5e477.png#pic_center)
> ![分享中心](https://pan.losfer.cn/view.php/df236eeea320f0eb4ec77ea7fc87f762.png#pic_center)
> ![分享查看](https://pan.losfer.cn/view.php/00ee13a00cfd9524337e5678b6b35234.png#pic_center)
#### 其他说明 🤥
> 本项目是我学习过程中写出的一个项目，写的项目也一般般，我的技术也一般般，刚好都一般般。如果对你有帮助可以给个 **Star** 噢！如果你觉得还有可优化的地方可以 Pull 到仓库，欢迎你来参与~