cc - GitLite

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #claude-code #codex #cli #developer-tools #react #windows

cc

★ 396 Open GitHub ↗

一个基于angular5.0.0+ng-bootstrap1.0.0-beta.8+bootstrap4.0.0-beta.2+scss的后台管理系统界面(没基础的同学请先自学基础，谢谢！)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## CC admin 
 一个基于angular5.0.0+ng-bootstrap1.0.0-beta.8+bootstrap4.0.0-beta.2+scss的后台管理系统界面

## *使用前必读
1. 具备能力（很重要） 
 1.1 需要有html、js或typescript、bootstrap、css或scss、ng5以及懂得面向对象基础 
 1.2 懂得使用nodejs、npm、yarn以及前端开发工具 
2. 关于环境、安装、启动、构建以及更新等相关问题，请阅读以下所有内容，谢谢！

## 界面展示
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/cc-0.png" width="960" height="515" />
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/cc-1.png" width="960" height="515" />
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/theme-green.png" width="960" height="515" />
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/cc-2.png" width="960" height="515" />
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/cc-3.png" width="960" height="515" />
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/cc-4.png" width="960" height="515" />
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/cc-5.png" width="960" height="515" />
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/cc-6.png" width="960" height="515" />
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/cc-7.png" width="960" height="515" />
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/cc-8.png" width="960" height="515" />
<img src="https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc/cc-9.png" width="960" height="515" />

<a href='https://github.com/332557712/cc/blob/master/src/assets/img/demo/cc'>点击查看更多</a>

## 更新记录
1. 搭建环境，分别加入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. 登录界面 
 2.1 src/login/login.component.ts
3. 主页界面 
 3.1 src/main/main.component.ts
4. 添加alert与confirm组件 
 4.1 src/app/shared/modal/modal.service.ts
5. 添加toast组件 
 5.1 src/app/shared/toast/toast.service.ts
6. 添加第三方ng-charts组件 
 6.1 https://github.com/swimlane/ngx-charts
7. 添加第三方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. 添加层次图组件 
 8.1 src/app/shared/hierarchy-view/hierarchy-view.component.ts
9. 添加第三方ng2-img-cropper组件 
 9.1 https://github.com/search?q=ng2-img-cropper&type=Code&utf8=%E2%9C%93
10. 添加头像更换功能 
 10.1 src/main/avatar-cropper.component.ts
11. 添加http服务 
 11.1 src/app/core/http.service.ts
12. 添加utils工具 
 12.1 src/app/core/utils.ts
13. 添加pagination组件 
 13.1 src/app/shared/pagination/pagination.component.ts
14. 添加http-pagination组件 
 14.1 src/app/shared/pagination/http-pagination.component.ts
15. 添加spin组件 
 15.1 src/app/shared/spin/spin.component.ts
16. 添加第三方angular2-ui-switch组件 
 16.1 https://github.com/yuyang041060120/angular2-ui-switch
17. 添加时间轴样式 
 17.1 assets/scss/base/_common.scss
18. 添加日期选择datepickerI18n配置 
 18.1 src/app/shared/datepickerI18n/datepickerI18n.ts
19. 添加img-cropper-select指令 
 19.1 src/app/shared/img-cropper-select/img-cropper-select.directive.ts
20. 添加tree组件 
 20.1 src/app/shared/tree/tree.component.ts
21. 添加select-tree组件 
 21.1 src/app/shared/tree/select-tree.component.ts
22. 添加jquery
23. 添加ztree组件 
 23.1 src/app/shared/ztree/ztree.component.ts
24. 添加select-ztree组件 
 24.1 src/app/shared/ztree/select-ztree.component.ts
25. 添加img-select-to-base指令 
 25.1 src/app/shared/img-select/img-select-to-base.directive.ts
26. 添加switch组件 
 26.1 src/app/shared/switch/switche.component.ts
27. 移除第三方angular2-ui-switch组件 
28. 升级版本为0.0.2 
29. 添加第三方ng2-file-upload组件 
 29.1 http://valor-software.com/ng2-file-upload/
30. 添加路由预加载策略，解决懒加载时首次使用卡顿问题 
 30.1 可参考博客http://blog.csdn.net/rotating_windmill/article/details/75142648
31. 添加custom-scrollbar.directive指令 
 31.1 配置参考：http://manos.malihu.gr/jquery-custom-content-scroller/
32. 添加image-viewer.directive指令 
 32.1 配置参考：https://github.com/fengyuanchen/viewer#methods 
 32.2 配置参考：http://www.cnblogs.com/yi0921/p/7080284.html
33. 添加spin.component组件 
 33.1 src/app/shared/spin/spin.component.ts与src/app/shared/spin/spin.service.ts
34. 添加部署Tomcat的方法 
 34.1 参考下面的`部署到Tomcat`章节说明
35. 解决构建时使用--prod参数的报错问题,使用--prod --aot可提升性能，升级cc版本为0.0.3
36. 升级angular版本，使用yarn进行包版本管理，升级cc版本为0.0.4
37. 升级ng-bootstrap1.0.0-beta.4与bootstrap4.0.0-beta+scss版本，升级cc版本为0.0.5
38. 添加ng2-date-picker组件 
 38.1 配置参考：https://github.com/vlio20/angular-datepicker
39. 添加localStorage.service与sessionStorage.service服务 
 39.1 src/app/shared/storage/localStorage.service.ts 
 39.2 src/app/shared/storage/sessionStorage.service.ts
40. 添加page-browser.component组件 
 40.1 src/app/shared/page-browser/page-browser.component.ts
41. 添加editor.component组件 
 41.1 src/app/shared/editor/editor.component.ts 
 41.2 配置参考：https://quilljs.com/docs/modules/toolbar/
42. 将shared目录中的共享模块按具体模块拆分，升级cc版本为0.0.6 
43. 添加第三方ag-grid组件 
 43.1 配置参考:https://www.ag-grid.com/angular-getting-started/?framework=angular
44. 添加simple-data-table.directive指令以及相关组件 
 44.1 src/app/shared/simple-data-table/simple-data-http-page.component 
 44.2 src/app/shared/simple-data-table/simple-data-sort.component 
 44.3 src/app/shared/simple-data-table/simple-data-table.directive
45. 补全各组件、指令、服务spec文件
46. 整理目录，升级cc版本为0.0.7 
 46.1 business：业务功能目录 
 46.2 business-service：业务功能服务目录 
 46.3 business-shared：业务功能共享目录 
 46.4 error-page：错误页面目录 
 46.5 login：登录模块目录 
 46.6 main：主体模块目录 
 46.7 shared：公共组件共享目录
47. 添加color-picker.component组件 
 47.1 src/app/shared/color-picker/color-picker.component.ts
48. 整理组件样式，将原来外部直接引入样式移动到组件内部引入，升级cc版本为0.0.8 
49. 添加step.component组件 
 49.1 src/app/shared/step/step.component.ts
50. 添加自定义验证器，正在完善中，目前示例参考修改密码功能 
 50.1 src/app/shared/custom-validator/custom-validator.ts
51. 添加qrcode.component组件 
 51.1 src/app/shared/添加qrcode/qrcode.component.ts 
 51.2 配置参考https://github.com/neocotic/qrious
52. environments配置文件添加domain（域名）属性，根据不同环境的配置请求后端api 
53. 添加proxy.config.json配置文件，有需要代理的自行在package.json的start中添加--proxy-config proxy.config.json 
54. 添加email验证器 
55. 添加url与number验证器 
56. 添加圆角、圆形按钮样式 
57. angular5.0.0、ng-bootstrap1.0.0-beta.8、bootstrap4.0.0-beta.2以及第三方组件的升级 
58. 升级cc版本为0.0.9
59. 细化业务功能目录以及完善页面
60. 添加绿色主题，使用方式如下： 
 60.1 index.html页面中将link的样式文件./assets/scss/theme/_default.css修改成./assets/scss/theme/_green.css 
 60.2 assets/scss/base/_app-base.scss文件中将import的样式文件./theme/_default.scss修改成./theme/_green.scss 
61. 添加http-client-service，需要使用的自己在模块加添加

## 规范
1. 为避免冲突，应用css使用c-为前缀
2. 为避免冲突，应用组件selector使用c-为前缀
3. 目录、文件名命名使用小写字母，多个单词使用-间隔
4. module结尾的为模块、component结尾的为组件、service结尾的为服务、directive结尾的为指令、pipe结尾的为管道   
5. 所有模块放在app目录下、所有资源文件放在assets目录下，所有scss文件按模块区分，放在assets/scss/modules下

## 环境
1. 下载并安装nodeJS环境
2. 安装与配置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

## 安装
1. cd E:\project\cc <---- 进入到项目所在的目录
2. yarn install <---- 安装

## 启动
1. cd E:\project\cc <---- 进入到项目所在的目录
2. npm start <---- 使用npm命令运行
3. 浏览器中输入`http://localhost:4200/` <---- 本机访问

## 构建
1. npm run build <---- 使用npm命令构建，构建完成后会在项目中出现一个cc-client目录

## 部署到Tomcat
1. 首先使用构建命令(npm run build)打包，打包完成后项目中会出现一个cc-client的目录，这个目录就是我们最终要部署的包了。
2. 将cc-client整个目录复制到Tomcat的webapps目录下。
3. 运行tomcat，在浏览器中输入`http://localhost:8080/cc-client/#/login`。
4. 注： 
 4.1 想将默认的cc-client修改成你自己的base路径，打开package.json，修改构建命令build，将cc-client修改成你自己的base路径。 
 4.2 想将打包生成的目录cc-client修改成你自己的名称，打开.angular-cli.json，修改配置outDir，将cc-client修改成你自己的名称。

## 单元测试
1. npm test <---- 使用npm命令测试，目前的模块中没有加入测试代码，需要自行添加

## 特别声明
1. 如果本界面中使用到了您的产品或是对您造成了影响请及时联系我，我将第一时间去除

## 技术交流
1. 在github进行交流
3. 技术交流群：168733660

## 贡献
1. 站在巨人的肩膀上，才能够走得更远，感谢那些默默贡献的人！

## 许可
1. [MIT](/LICENSE)

cc

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README