Become an AceSign inSign up
myopenresources/ cc
TypeScript angular2 ng-bootstrap cropper HTML CSS JavaScript Webpack Sass angular-cli jQuery mit alpha ng2 bootstrap4
View on GitHub
Need help with cc?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

myopenresources
415 Stars 233 Forks MIT License 197 Commits 17 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

河马开源-hippo myopenresources
# 41,876
TypeScr...
angular...
cropper
Webpack
 153 commits

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以及前端开发工具
    1.3 懂得阅读第三方组件文档以及使用百度、google搜索问题
    1.4 没有基础的同学请先自学基础，与本界面无关或是基础问题概不回答，请勿浪费他人时间，谢谢！
  2. 关于环境、安装、启动、构建以及更新等相关问题，请阅读以下所有内容，谢谢！

在线预览(可能部署的不是最新版本，最新版本请下载代码)

http://www.myopenresources.top/cc-client/#/login

java后端项目

收费版1（基于本界面与Spring mvc 开发）：https://blog.csdn.net/rotatingwindmill/article/details/80640301
收费版2（基于本界面与Spring boot开发）：https://blog.csdn.net/rotatingwindmill/article/details/80700660

界面展示


点击查看更多

更新记录

  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进行交流
  2. 技术交流群：168733660

贡献

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

许可

  1. MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.