Skip to content

NiceFish 的 React 版界面。 请不要吝惜你的⭐️ Star ⭐️,星星越多,动力越足。

License

Notifications You must be signed in to change notification settings

damoqiongqiu/NiceFish-React

Repository files navigation

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 组件库。 star
NiceFish-React 这是 React 版本的前端界面,基于 React 18.0.0 ,使用 PrimeReact, 定制版 Bootstrap 开发。纯 JSX ,没有使用 TypeScript 。 star
nicefish-ionic 这是一个移动端的 demo,基于 ionic,此项目已支持 PWA。 star
NiceBlogElectron 这是一个基于 Electron 的桌面端项目,把 NiceFish 用 Electron 打包成了一个桌面端运行的程序。这是由 ZTE 中兴通讯的前端道友提供的,我 fork 了一个,有几个 node 模块的版本号老要改,如果您正在研究如何利用 Electron 开发桌面端应用,请参考这个项目。 star

NiceFish 的服务端项目:

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

8.界面截图

9.开源许可证

MIT

About

NiceFish 的 React 版界面。 请不要吝惜你的⭐️ Star ⭐️,星星越多,动力越足。

Resources

License

Stars

Watchers

Forks

Packages

No packages published