1. Project Overview

NiceFish

NiceFish (Mermaid) is a series of projects designed to demonstrate front-end and back-end separated development and deployment patterns. The frontend has 3 versions: browser environment, mobile environment, and Electron environment; the backend has 2 versions: SpringBoot version and SpringCloud version.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

iceFish (Mermaid) is a series of projects designed to demonstrate front-end and back-end separated development and deployment patterns. The frontend has 3 versions: browser environment, mobile environment, and Electron environment; the backend has 2 versions: SpringBoot version and SpringCloud version.

Project Series

NiceFish client projects:

Name

Description

NiceFish (Mermaid)

This is the Angular version of the frontend interface, based on the latest Angular version and using the PrimeNG component library.

NiceFish-React

This is the React version of the frontend interface, based on React 18.0.0, using PrimeReact and a customized version of Bootstrap. Pure JSX, without TypeScript.

nicefish-ionic

This is a mobile demo based on ionic. This project already supports PWA.

NiceBlogElectron

This is an Electron-based desktop project that packages NiceFish into a desktop application using Electron. It was provided by a frontend developer from ZTE (Zhongxing Telecommunications Equipment). I forked a copy, but several Node module versions frequently need to be changed. If you are researching how to use Electron to develop desktop applications, please refer to this project.

NiceFish backend projects:

Name

Description

nicefish-spring-boot

Demonstrates how frontend code integrates with backend services in a front-end/back-end separated architecture. The baseline version has been completed. You can use it as a foundation to continue developing code tailored to your own business scenarios.

nicefish-spring-cloud

Demonstrates how frontend code integrates with distributed backend services in a front-end/back-end separated architecture.

5. Tech Stack

SpringBoot Backend Version

Development environment

• JDK 1.8
• Development Tool: IDEA
• Build Tool: Maven
• MySQL >=5 or MariaDB >=10

3. Usage

• Clone this project using git clone
• Import the pom.xml file in the root directory into IDEA
• Execute the docs/nicefish-spring-boot.sql script in MySQL (includes test data)
• Modify the application.yml configuration file and replace the MySQL settings with your own
• Configure Maven to use the Alibaba Cloud repository
• Start NiceFishApplication.java in the nicefish-cms module
• Swagger API documentation: [http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html)
• Druid monitoring address: [http://localhost:8080/druid/sql.html](http://localhost:8080/druid/sql.html)

Project Module Dependencies

• nicefish-core: Provides common utilities
• nicefish-shiro-rbac: Provides general authentication and authorization services based on Shiro, using the RBAC model.
• nicefish-cms: A CMS application built on the above core modules

Angular Frontend Version

Main Dependencies

• Angular 15.2.4
• PrimeNG 15.3.0
• Bootstrap 3.4.1
• echarts 5.4.2
• ngx-echarts 15.0.3
• ckeditor5-angular 5.2.0
• font-awesome 4.7.0

Note: To prevent NodeJS module compatibility issues, all Node module versions are locked in package.json. If necessary, you can test compatible versions yourself (this is not recommended, as it will consume a considerable amount of time).

Start the Project

Open a terminal and execute the following commands in order:

Visit Yifei Open Source at [https://code.exmay.com/](https://code.exmay.com/) to download
cd NiceFish
npm i -g @angular/cli
npm i
ng serve

Open your browser and visit [http://localhost:4200/](http://localhost:4200/)

For Chinese developers: Due to network restrictions, installing nrm to manage the npm registry is recommended.

npm i -g nrm
nrm use taobao

After this, npm will use the registry provided by Taobao when installing Node modules.

For more information, please refer to the README.md documentation.

NiceFish (Mermaid)

NiceFish-React

nicefish-ionic

NiceBlogElectron

Download Backend Source Code

nicefish-spring-boot

nicefish-spring-cloud