25 Star 47 Fork 22

Evan / wow-note-react

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
Apache-2.0

wow-note 个人云笔记

wow-note

本仓库为前端仓库,需要了解后端仓库请🍧https://gitee.com/uyevan/wow-note-spring

您也可以在线预览成品🎉http://note.jfkj.xyz

项目简介 👨‍💻

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

项目架构 🪜

项目架构图

应用结构 🛎️

应用结构

功能特性 🎉

  • 服务端渲染:NextJS是基于React的服务端渲染框架,在此项目开发中我使用到了一些组件在服务端渲染,特性就是快速渲染也有利于CEO优化。
  • NextJS钩子:NextJS提供了很多额外的API和生命周期函数,如对 Router 的优化, useEffect 钩子等等。
  • 新概念UI:我在这项目的UI选择策略上并未选择原生的渲染,而是选择了 NextUI 框架,因为它提供了主流的组件与丰富的选择,最重要的是各种组件特别好看。

环境要求 ✅

NodeJS https://nodejs.org

v18.17.0 (npm: '9.6.7')

React https://react.docschina.org

18.2.0

Next.js https://nextjs.org

Next.js v14.0.4

NextUI https://nextui.org

"nextui-org/accordion": "v2.0.28",
"nextui-org/react": "v2.2.9"

Docker 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是支持全段自定义适配的,一下是电脑端的预览结果,手机端不分上下; 主页 文档中心 笔记编辑 分享中心 分享查看

其他说明 🤥

本项目是我学习过程中写出的一个项目,写的项目也一般般,我的技术也一般般,刚好都一般般。如果对你有帮助可以给个 Star 噢!如果你觉得还有可优化的地方可以 Pull 到仓库,欢迎你来参与~

Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright 2024 evan Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

简介

📚基于React,SpringCloud框架的下一代个人云笔记项目前端. 展开 收起
TypeScript 等 4 种语言
Apache-2.0
取消

发行版 (1)

全部

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/uyevan/wow-note-react.git
git@gitee.com:uyevan/wow-note-react.git
uyevan
wow-note-react
wow-note-react
master

搜索帮助