一个基于angular4.2.4+ng-bootstrap1.0.0-beta.4+bootstrap4.0.0-beta+scss的后台管理系统界面
关于环境、安装、启动、构建以及更新等相关问题,请您阅读以下所有内容,请勿上来就直接问,好好珍惜别人的时间,也珍惜自己的时间,谢谢!
- 搭建环境,分别加入ng-bootstrap1.0.0-alpha.25、bootstrap4.1.3、font-awesome4.7.0、animate.css3.5.2等,cc版本为0.0.1
1.1 https://ng-bootstrap.github.io/#/home
1.2 https://v4-alpha.getbootstrap.com/
1.3 http://fontawesome.io/
1.4 https://github.com/daneden/animate.css - 登录界面
2.1 src/login/login.component.ts - 主页界面
3.1 src/main/main.component.ts - 添加alert与confirm组件
4.1 src/app/shared/modal/modal.service.ts - 添加toast组件
5.1 src/app/shared/toast/toast.service.ts - 添加第三方ng-charts组件
6.1 https://github.com/swimlane/ngx-charts - 添加第三方angular-2-dropdown-multiselect组件与angular2-select组件
7.1 https://github.com/softsimon/angular-2-dropdown-multiselect
7.2 https://github.com/basvandenberg/ng-select) - 添加层次图组件
8.1 src/app/shared/hierarchy-view/hierarchy-view.component.ts - 添加第三方ng2-img-cropper组件
9.1 https://github.com/search?q=ng2-img-cropper&type=Code&utf8=%E2%9C%93 - 添加头像更换功能
10.1 src/main/avatar-cropper.component.ts - 添加http服务
11.1 src/app/core/http.service.ts - 添加utils工具
12.1 src/app/core/utils.ts - 添加pagination组件
13.1 src/app/shared/pagination/pagination.component.ts - 添加http-pagination组件
14.1 src/app/shared/pagination/http-pagination.component.ts - 添加spin组件
15.1 src/app/shared/spin/spin.component.ts - 添加第三方angular2-ui-switch组件
16.1 https://github.com/yuyang041060120/angular2-ui-switch - 添加时间轴样式
17.1 assets/scss/base/_common.scss - 添加日期选择datepickerI18n配置
18.1 src/app/shared/datepickerI18n/datepickerI18n.ts - 添加img-cropper-select指令
19.1 src/app/shared/img-cropper-select/img-cropper-select.directive.ts - 添加tree组件
20.1 src/app/shared/tree/tree.component.ts - 添加select-tree组件
21.1 src/app/shared/tree/select-tree.component.ts - 添加jquery
- 添加ztree组件
23.1 src/app/shared/ztree/ztree.component.ts - 添加select-ztree组件
24.1 src/app/shared/ztree/select-ztree.component.ts - 添加img-select-to-base指令
25.1 src/app/shared/img-select/img-select-to-base.directive.ts - 添加switch组件
26.1 src/app/shared/switch/switche.component.ts - 移除第三方angular2-ui-switch组件
- 升级版本为0.0.2
- 添加第三方ng2-file-upload组件
29.1 http://valor-software.com/ng2-file-upload/ - 添加路由预加载策略,解决懒加载时首次使用卡顿问题
30.1 可参考博客http://blog.csdn.net/rotating_windmill/article/details/75142648 - 添加custom-scrollbar.directive指令
31.1 配置参考:http://manos.malihu.gr/jquery-custom-content-scroller/ - 添加image-viewer.directive指令
32.1 配置参考:https://github.com/fengyuanchen/viewer#methods
32.2 配置参考:http://www.cnblogs.com/yi0921/p/7080284.html - 添加spin.component组件
33.1 src/app/shared/spin/spin.component.ts与src/app/shared/spin/spin.service.ts - 添加部署Tomcat的方法
34.1 参考下面的部署到Tomcat
章节说明 - 解决构建时使用--prod参数的报错问题,使用--prod --aot可提升性能,升级cc版本为0.0.3
- 升级angular版本,使用yarn进行包版本管理,升级cc版本为0.0.4
- 升级ng-bootstrap1.0.0-beta.4与bootstrap4.0.0-beta+scss版本,升级cc版本为0.0.5
- 添加ng2-date-picker组件
38.1 配置参考:https://github.com/vlio20/angular-datepicker - 添加localStorage.service与sessionStorage.service服务
39.1 src/app/shared/storage/localStorage.service.ts
39.2 src/app/shared/storage/sessionStorage.service.ts
- 为避免冲突,应用css使用c-为前缀
- 为避免冲突,应用组件selector使用c-为前缀
- 目录、文件名命名使用小写字母,多个单词使用-间隔
- module结尾的为模块、component结尾的为组件、service结尾的为服务、directive结尾的为指令
- 所有模块放在app目录下、所有资源文件放在assets目录下,所有scss文件所模块区分,放在assets/scss/modules下
- 下载并安装nodeJS环境
- 安装与配置yarn,参考:https://yarnpkg.com/zh-Hans/
2.1 使用cnpm i -g yarn 或 npm i -g yarn安装yarn
2.2 配置registry地址:yarn config set registry http://registry.npm.taobao.org
2.3 配置sass-binary-site地址:yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
- cd E:\project\cc <---- 进入到项目所在的目录
- yarn install <---- 安装
- cd E:\project\cc <---- 进入到项目所在的目录
- npm start <---- 使用npm命令运行
- 浏览器中输入
http://localhost:4200/
<---- 本机访问
- npm run build <---- 使用npm命令构建,构建完成后会在项目中出现一个cc-client目录
- 首先使用构建命令(npm run build)打包,打包完成后项目中会出现一个cc-client的目录,这个目录就是我们最终要部署的包了。
- 将cc-client整个目录复制到Tomcat的webapps目录下。
- 运行tomcat,在浏览器中输入
http://localhost:8080/cc-client/#/login
。 - 注:
4.1 想将默认的cc-client修改成你自己的base路径,打开package.json,修改构建命令build,将cc-client修改成你自己的base路径。
4.2 想将打包生成的目录cc-client修改成你自己的名称,打开.angular-cli.json,修改配置outDir,将cc-client修改成你自己的名称。
- npm test <---- 使用npm命令测试,目前的模块中没有加入测试代码,需要自行添加
- 如果本界面中使用到了您的产品或是对您造成了影响请及时联系我,我将第一时间去除
- 在github进行交流
- 技术交流群:168733660
- 站在巨人的肩膀上,才能够走得更远,感谢那些默默贡献的人!