NiceFish (美人鱼) is a series of projects aimed at demonstrating the development and deployment of a frontend-backend separation pattern. There are three frontend versions: browser environment, mobile environment, and Electron environment; and two backend versions: SpringBoot version and SpringCloud version.
🚀🚀🚀 Please don't hesitate to give us your ⭐️ Star ⭐️. The more stars, the more motivation! 🚀🚀🚀
## 1. Introduction This is the React version of the NiceFish frontend interface. This project is developed using pure JSX, without TypeScript. NiceFish also provides a backend server interface implementation based on SpringBoot, see: https://gitee.com/mumu-osc/nicefish-spring-boot. NiceFish-React demo on GitHub Pages (Mock data, no backend): https://damoqiongqiu.github.io/NiceFish-React. ## 2. Main Dependencies | Name | Version | Description | | ---------------- | ------- | -------------------------------------------------------- | | React | 18.2.0 | React core library. | | react-redux | 8.1.2 | State management. | | react-router-dom | 6.13.0 | Routing. | | Bootstrap | 5.3.1 | Used for responsive layout. | | react-bootstrap | 2.8.0 | Bootstrap-based React component library. | | primereact | 9.6.0 | PrimeReact is an open-source React UI component library. | | echarts | 4.2.1 | Open-source data visualization tool by Baidu. | | CKEditor 5 | 27.1.0 | CKEditor is an open-source rich text editor. | | ajv | 8.12.0 | Ajv is a JSON Schema validation tool. | | i18next | 23.4.1 | i18next is an internationalization tool. | | react-player | 2.12.0 | Video player. | | axios | 1.4.0 | Sending HTTP requests. | **Note: To prevent potential NodeJS module compatibility issues, this project locks all Node module versions in the package.json file. If necessary, you can test compatible version numbers on your own (though this is not recommended, as it may consume a significant amount of time).** ## 3. Usage Open your command line terminal and execute the following commands: ``` git clone https://gitee.com/mumu-osc/NiceFish-React.git cd NiceFish-React npm i npm start ``` **🚀🚀🚀 For Chinese developers**: Due to network constraints, it is recommended to install nrm to manage the npm registry. npm i -g nrm nrm use taobao By doing so, npm will use the registry provided by taobao when installing node modules. ## 4. Switching Between Mock and Backend Versions For the sake of facilitating frontend-backend separation development, this project offers two startup modes: - Startup mode with mock data: npm run start:dev-mock (or directly npm start, which defaults to mock mode). All mock data is located in the src/mock-data directory, in JSON format, consistent with the format of data returned by the backend API (**please refrain from moving these files' paths; NiceFish has implemented custom middleware that enables webpack devServer to load these files in development mode, with the code residing in /config/webpack.dev.js**). - Startup mode to access real backend API: npm run start:dev-backend (using this mode requires a functional backend server; NiceFish provides an implementation of a backend server interface based on SpringBoot, refer to: https://gitee.com/mumu-osc/nicefish-spring-boot.) Configuration items related to the startup environment can be found in environment.\* and webpack.common.js files. ## 5. Unit Testing ``` yarn test or npm run test ``` ## 6. End-to-End Testing ``` yarn cypress:open or npm run cypress:open yarn cypress:run or npm run cypress:run ``` ## 7. Series Projects
|
| [NiceFish-React](https://gitee.com/mumu-osc/NiceFish-React) | This is the React version of the frontend interface, based on React 18.0.0, utilizing PrimeReact, a customized Bootstrap development. Pure JSX, no TypeScript. | 
|
| [nicefish-ionic](http://git.oschina.net/mumu-osc/nicefish-ionic) | This is a mobile demo, based on Ionic, and it already supports PWA. | 
|
| [NiceBlogElectron](https://gitee.com/mumu-osc/NiceBlogElectron) | This is a desktop project based on Electron, packaging NiceFish into a desktop application. This was provided by a frontend developer friend at ZTE Corporation. I forked it, as there were frequent changes in version numbers for some node modules. If you're studying how to utilize Electron for desktop application development, please refer to this project. | 
|
|
| [nicefish-spring-cloud](https://gitee.com/mumu-osc/nicefish-spring-cloud) | Used to demonstrate the integration of frontend code with distributed backend services in a frontend-backend separation mode. | 
|
## 8. Interface Screenshots
## 9. Open Source License
MIT