[English](README.en.md) | 简体中文
<h1 align="center">NiceFish</h1>
<p align="left">
NiceFish(美人鱼) 是一个系列项目,目标是示范前后端分离的开发+部署模式。前端有3个版本:浏览器环境、移动端环境、Electron 环境;后端有2个版本:SpringBoot 版本和 SpringCloud 版本。
</p>
<p>
🚀🚀🚀请不要吝惜你的⭐️ Star ⭐️,星星越多,动力越足。🚀🚀🚀
</p>
## 1.主要依赖
| 名称 | 版本 | 描述 |
| ----------------- | ------ | ------------------------------------ |
| Angular | 16.2.0 | Angular 核心库。 |
| PrimeNG | 16.2.0 | 开源组件库。 |
| Bootstrap | 5.2.3 | 响应式布局。 |
| ngx-bootstrap | 11.0.2 | 基于 Bootstrap 的开源组件库。 |
| echarts | 5.4.2 | 来自百度的图形库。 |
| ngx-echarts | 15.0.3 | 基于 echarts 封装的 Angular 组件库。 |
| ckeditor5-angular | 5.2.0 | 富文本编辑器。 |
| font-awesome | 4.7.0 | 开源图标库。 |
**注意:为了防止出现 NodeJS 模块兼容性问题,本项目在 package.json 中锁定了所有 Node 模块版本。如有需要,您可以自己测试兼容版本号(不建议这样做,因为会消耗掉大量的时间)。**
## 2.启动项目
打开终端,依次执行以下命令:
git clone https://gitee.com/mumu-osc/NiceFish.git
cd NiceFish
npm i -g @angular/cli
npm i
ng serve
打开浏览器,访问 http://localhost:4200/
**🚀🚀🚀 中文开发者**:网络原因,推荐安装 nrm 来管理 npm 的 registry。
npm i -g nrm
nrm use taobao
这时候用 npm 安装 node 模块就会使用 taobao 提供的 registry 了。
## 3.在 Mock 版本和带服务端版本之间切换
为了方便前后端分离开发,本项目提供 2 种启动模式:
- 带 mock 数据的启动模式:ng serve --configuration development-mock (或者直接 ng serve 启动,默认是 mock 模式),所有 mock 数据都在 src/mock-data 目录中,json 格式,与服务端接口返回的数据格式保持一致。
- 访问真实的服务端接口的启动模式: ng serve --configuration development-backend (使用此模式启动需要有真实的服务端,把 proxy.config.json 中的服务端地址改成你自己的接口地址,NiceFish 提供了一个基于 SpringBoot 的服务端接口实现版本,参见: https://gitee.com/mumu-osc/nicefish-spring-boot 。)
与启动环境有关的配置项在 environment.\* 和 angular.json 中。
## 4.单元测试
执行以下命令进行单元测试:
ng test
<img src="https://gitee.com/mumu-osc/NiceFish/raw/master/src/assets/imgs/unit-test.png">
默认使用 ChromeHeadless 执行单元测试,按照 CPU 核心数量并发执行测试用例,karmar.conf.js 配置方式参考了 VWware 的 Clarity 项目,参见 https://github.com/vmware-clarity/ng-clarity 。
代码覆盖率报告:
<img src="https://gitee.com/mumu-osc/NiceFish/raw/master/src/assets/imgs/codecoverage.png">
关于单元测试的详细使用方法,以及 Jasmine 的语法,请参考: https://angular.io/guide/testing
## 5.集成测试
Angular 从 v12 开始,官方废弃了原来的集成测试工具 Protractor (量角器),本项目已经切换到官方推荐的 Cypress 集成测试工具,执行以下命令启动集成测试:
ng e2e
<img src="https://gitee.com/mumu-osc/NiceFish/raw/master/src/assets/imgs/cypress.png">
关于 Cypress 的技术细节,请参考: https://testing-angular.com/end-to-end-testing/#end-to-end-testing
## 6.构建
与开发状态对应,构建模式有 2 种:
1. 构建开发环境(带 mock 数据,不访问服务端):ng build --configuration development-mock
2. 构建带有服务端接口的开发环境(访问真实的服务端接口):ng build --configuration development-backend
如果需要在构建产物的 index.html 中出现 <base href="/NiceFish/"/>,请在以上命令后面加上参数: --base-href /NiceFish/
注意,这里的 NiceFish 是项目名,如果你把项目名改成了其它的,请把 NiceFish 改成你自己的项目名。
## 7.直接部署到 nginx
1. 根据上一步的描述构建出最终产物。
1. 安装好 nginx,把 dist/browser 目录下的所有内容拷贝到 nginx 的 html 目录下。
1. 参考本项目根目录下的 nginx.conf 配置文件,修改配置(此项目中的默认配置用于 Docker 环境,在 Windows 平台下无法使用)。
1. 重启 nginx。
## 8.部署到 Docker 环境
请依次执行以下命令(请不要使用我的 ID ,改成你自己的 Docker 平台 ID ):
1. 构建镜像:sudo docker build -t damoqiongqiu/nice-fish .
2. 查看镜像列表:sudo docker images
3. 启动容器:sudo docker run -d -it -p 8080:80/tcp --name nice-fish damoqiongqiu/nice-fish:latest
4. 查看运行中的容器:sudo docker ps -a
5. 查看容器日志:docker logs --details CONTAINER_ID
6. 进入容器:sudo docker exec -it CONTAINER_ID sh
<img src="https://gitee.com/mumu-osc/NiceFish/raw/master/src/assets/imgs/8.png">
## 9.打包分析
以下是用 webpack-bundle-analyzer 分析打包之后的模块构成:
<img src="https://gitee.com/mumu-osc/NiceFish/raw/master/src/assets/imgs/bundle-report.png">
看起来 CKEditor 和 ECharts 占了很大的体积,需要做一下异步加载。
webpack-bundle-analyzer 使用方法,请依次执行以下操作:
1. npm i webpack-bundle-analyzer --save-dev
2. package.json 的 scripts 配置里面加一行 "bundle-report": "webpack-bundle-analyzer dist/browser/stats.json"
3. ng build --stats-json 编译(--stats-json 选项会生成一份 stats.json 配置文件)
4. 执行 npm run bundle-report 查看打包过程
## 10.系列项目
<h4>NiceFish 的客户端项目:</h4>
| 名称 | 描述 | Stars |
| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [NiceFish(美人鱼)](http://git.oschina.net/mumu-osc/NiceFish/) | 这是 Angular 版本的前端界面,基于最新的 Angular 版本,使用 PrimeNG 组件库。 | <a href='https://gitee.com/mumu-osc/NiceFish/stargazers'><img src='https://gitee.com/mumu-osc/NiceFish/badge/star.svg?theme=gvp' alt='star'></img></a> |
| [NiceFish-React](https://gitee.com/mumu-osc/NiceFish-React) | 这是 React 版本的前端界面,基于 React 18.0.0 ,使用 PrimeReact, 定制版 Bootstrap 开发。纯 JSX ,没有使用 TypeScript 。
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
这是一个系列项目,目标是示范前后端分离的开发+部署模式,包括: 浏览器环境、移动端环境、Electron 环境;后端有两个版本:SpringBoot 版本和 SpringCloud 版本。 1.主要依赖 名称 版本 描述 Angular 16.2.0 Angular 核心库。 PrimeNG 16.2.0 开源组件库。 Bootstrap 5.2.3 响应式布局。 ngx-bootstrap 11.0.2 基于 Bootstrap 的开源组件库。 echarts 5.4.2 来自百度的图形库。 ngx-echarts 15.0.3 基于 echarts 封装的 Angular 组件库。 ckeditor5-angular 5.2.0 富文本编辑器。 font-awesome 4.7.0 开源图标库。 启动项目 打开终端,依次执行以下命令: git clone https://gitee.com/mumu-osc/NiceFish.git cd NiceFish npm i -g @angular/cli npm i ng serve
资源推荐
资源详情
资源评论
收起资源包目录
基于SpringBoot+SpringCloud+Angular开发的前后端分离的博客系统,包括浏览器、移动端、Electron (394个子文件)
nginx.conf 3KB
styles.dbcc8b238f59a2b1.css 443KB
styles.d76875a34b24b2dc.css 326KB
styles.2efed38b3bbedefb.css 326KB
theme.css 154KB
theme.css 154KB
bootstrap.css 143KB
bootstrap.min.css 119KB
bootstrap-theme.css 25KB
bootstrap-theme.min.css 24KB
Dockerfile 560B
dependencies.dot 19KB
.editorconfig 260B
fontawesome-webfont.2b13baa7dd4f54c9.eot 162KB
primeicons.ffecb2549ad1765a.eot 71KB
glyphicons-halflings-regular.7a0f4b092e86cb52.eot 20KB
glyphicons-halflings-regular.eot 20KB
.gitignore 558B
dependencies.html 53KB
sys-param.component.html 8KB
report.html 8KB
user-edit-role.component.html 7KB
component-permission-edit.component.html 7KB
user-profile.component.html 5KB
sign-up.component.html 5KB
role-edit.component.html 5KB
app.component.html 4KB
sign-in.component.html 4KB
user-table.component.html 4KB
component-permission-table.component.html 4KB
api-permission-edit.component.html 3KB
role-table.component.html 3KB
api-permission-table.component.html 3KB
index.html 3KB
post-table.component.html 2KB
comment-list.component.html 2KB
comment-table.component.html 2KB
index.html 2KB
write-post.component.html 2KB
post-list.component.html 2KB
retrieve-pwd.component.html 1KB
manage-main.component.html 976B
user-main.component.html 854B
post-detail.component.html 774B
user-info.component.html 570B
online-contact.component.html 506B
post-headline.component.html 477B
post-detail-main.component.html 476B
chart.component.html 400B
component-index.html 290B
block-spinner.component.html 244B
home.component.html 202B
captcha.component.html 107B
favicon-32x32.ico 4KB
favicon-16x16.ico 1KB
favicon.ico 1KB
favicon.ico 1KB
2.jpg 5KB
2.jpg 5KB
vendor.bf9be2132363af4a.js 4.88MB
src_app_manage_manage_module_ts.649390dbb0655bb7.js 4.72MB
src_app_manage_manage_module_ts.0e28ce7a6e9f5fb1.js 4.72MB
vendor.bc899c7a4fcbb5f2.js 4.19MB
scripts.3c95c0732b871423.js 3.18MB
src_app_blog_post_write-post_write-post_module_ts.6952e256ab3c95ae.js 1.3MB
src_app_blog_post_write-post_write-post_module_ts.bb68d871509fca6c.js 1.3MB
default-src_app_shared_animations_fly-in_ts-src_app_shared_post_module_ts.59966f6bdb24cb95.js 702KB
default-src_app_shared_animations_fly-in_ts-src_app_shared_post_module_ts.f24733f486ecb318.js 494KB
default-src_app_blog_post_post_module_ts.f540e58da51c176c.js 292KB
default-src_app_blog_post_post_module_ts.56124422d8f64675.js 292KB
default-src_app_blog_post_post_module_ts.be86d1f258004afd.js 290KB
main.8b97a0f3ae1e3d9d.js 179KB
main.d4a2aa20af89803d.js 178KB
polyfills.ee601d55a5c2a8c1.js 107KB
polyfills.182b44297d012f3b.js 105KB
src_app_blog_home_home_module_ts.42ded29888bf4cce.js 14KB
src_app_blog_home_home_module_ts.fcddc70d25d0a0a0.js 14KB
runtime.a12cca67b4764801.js 13KB
runtime.57bbdb77187b2ecc.js 13KB
runtime.19598df68f0dd7ff.js 13KB
src_app_blog_user_user_module_ts.2ef82014b540ff62.js 13KB
src_app_blog_user_user_module_ts.4ca9391326eee9df.js 13KB
src_app_shared_animations_fly-in_ts.4f9d29922d66434c.js 2KB
src_app_shared_animations_fly-in_ts.2dd7190ae25bace4.js 2KB
karma.conf.js 2KB
stats.json 33.81MB
package-lock.json 530KB
dependencies.json 85KB
config.json 18KB
user-list-mock.json 17KB
user-list-mock.json 17KB
role-list-mock.json 10KB
role-list-mock.json 10KB
post-list-mock.json 9KB
post-list-mock.json 9KB
post-list-data-mock.json 9KB
post-list-data-mock.json 9KB
angular.json 7KB
user-detail-mock.json 6KB
user-detail-mock.json 6KB
共 394 条
- 1
- 2
- 3
- 4
资源评论
流华追梦
- 粉丝: 3619
- 资源: 2050
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- XILINXFPGA源码Xilinxspratan3xcs100E(VGAPS2)
- XILINXFPGA源码XilinxSPARTAN-3E入门开发板实例
- XILINXFPGA源码XilinxSdramVerilog和VHDL版本文档
- 物联网智能家居方案-基于Nucleo-STM32L073&机智云(大赛作品,文档齐全,可直接运行)(文档加Matlab源码)
- XILINXFPGA源码XilinxISE9.xFPGACPLD设计源码
- 成都市地图含高新区(高新南区,高新西区),天府新区,东部新区虚拟行政区划
- XILINXFPGA源码XilinxEDK设计试验
- XILINXFPGA源码XilinxEDKMicroBlaze内置USB固件程序
- 基于 django 的视频点播后台管理系统源代码+数据库
- 基于Java的网上医院预约挂号系统的设计与实现(部署视频)-kaic.mp4
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功