English | 简体中文

NiceFish-React

NiceFish（美人鱼） 是一个系列项目，目标是示范前后端分离的开发+部署模式。前端有3个版本：浏览器环境、移动端环境、Electron 环境；后端有2个版本：SpringBoot 版本和 SpringCloud 版本。

🚀🚀🚀请不要吝惜你的⭐️ Star ⭐️，星星越多，动力越足。🚀🚀🚀

1.简介

这是 NiceFish 的 React 版前端界面，此项目采用纯 JSX 开发，没有使用 TypeScript 。NiceFish 提供了一个基于 SpringBoot 的服务端接口实现版本，参见： https://gitee.com/mumu-osc/nicefish-spring-boot 。

NiceFish-React 在 GitHub Pages 上的演示地址（Mock 数据，无后端）： https://damoqiongqiu.github.io/NiceFish-React 。

2.主要依赖

名称	版本	描述
React	18.2.0	React 核心库。
react-redux	8.1.2	状态管理。
react-router-dom	6.13.0	路由。
Bootstrap	5.3.1	用来做响应式布局。
react-bootstrap	2.8.0	基于 Bootstrap 的 React 组件库。
primereact	9.6.0	PrimeReact 是一个开源的 React UI 组件库。
echarts	4.2.1	百度开源的数据可视化工具。
CKEditor 5	27.1.0	CKEditor 是一个开源的富文本编辑器。
ajv	8.12.0	ajv 是一个 JSON Schema 校验工具。
i18next	23.4.1	i18next 是一个国际化工具。
react-player	2.12.0	视频播放器。
axios	1.4.0	发送 HTTP 请求。

注意：为了防止出现 NodeJS 模块兼容性问题，本项目在 package.json 中锁定了所有 Node 模块版本。如有需要，您可以自己测试兼容版本号（不建议这样做，因为会消耗掉大量的时间）。

3.用法

打开你的命令行终端，执行以下命令：

   git clone https://gitee.com/mumu-osc/NiceFish-React.git
   cd NiceFish-React
   npm i
   npm start

🚀🚀🚀 中文开发者：网络原因，推荐安装 nrm 来管理 npm 的 registry。

npm i -g nrm
nrm use taobao

这时候用 npm 安装 node 模块就会使用 taobao 提供的 registry 了。

4.在 Mock 版本和带服务端版本之间切换

为了方便前后端分离开发，本项目提供 2 种启动模式：

• 带 mock 数据的启动模式：npm run start:dev-mock （或者直接 npm start 启动，默认是 mock 模式），所有 mock 数据都在 src/mock-data 目录中，json 格式，与服务端接口返回的数据格式保持一致（请不要移动这些文件的路径，NiceFish 自定义了一个中间件让 webpack devServer 在开发状态能够加载这些文件，代码位于 /config/webpack.dev.js 中。）。
• 访问真实的服务端接口的启动模式： npm run start:dev-backend （使用此模式启动需要有真实的服务端，NiceFish 提供了一个基于 SpringBoot 的服务端接口实现版本，参见： https://gitee.com/mumu-osc/nicefish-spring-boot 。）

与启动环境有关的配置项在 environment.* 和 webpack.common.js 中。

5.单元测试

   yarn test or npm run test

6.端到端测试

   yarn cypress:open or  npm run cypress:open
   yarn cypress:run or  npm run cypress:run

7.系列项目

NiceFish 的客户端项目：

名称	描述	Stars
NiceFish（美人鱼）	这是 Angular 版本的前端界面，基于最新的 Angular 版本，使用 PrimeNG 组件库。
NiceFish-React	这是 React 版本的前端界面，基于 React 18.0.0 ，使用 PrimeReact， 定制版 Bootstrap 开发。纯 JSX ，没有使用 TypeScript 。
nicefish-ionic	这是一个移动端的 demo，基于 ionic，此项目已支持 PWA。
NiceBlogElectron	这是一个基于 Electron 的桌面端项目，把 NiceFish 用 Electron 打包成了一个桌面端运行的程序。这是由 ZTE 中兴通讯的前端道友提供的，我 fork 了一个，有几个 node 模块的版本号老要改，如果您正在研究如何利用 Electron 开发桌面端应用，请参考这个项目。

NiceFish 的服务端项目：

名称	描述	Stars
nicefish-spring-boot	用来示范前后端分离模式下，前端代码与后端服务的对接方式，已经完成了基线版本。以此为基础，你可以继续开发出适合自己业务场景的代码。
nicefish-spring-cloud	用来示范前后端分离模式下，前端代码与分布式后端服务的对接方式。

8.界面截图

9.开源许可证

MIT

（此项目的作者正在寻找一份新的工作，如果有好的机会，请联系我的 VX： lanxinshuma）