Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xlong1029/xlong-admin-angular
基于 Angular + Ng Alain +Bmob 开发的单页面响应式管理后台系统示例
https://github.com/xlong1029/xlong-admin-angular
angular angular-cli bmob canvas ng-alain ng-zorro-antd
Last synced: 5 days ago
JSON representation
基于 Angular + Ng Alain +Bmob 开发的单页面响应式管理后台系统示例
- Host: GitHub
- URL: https://github.com/xlong1029/xlong-admin-angular
- Owner: xLong1029
- License: mit
- Created: 2019-05-29T07:14:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-08T04:04:31.000Z (about 1 year ago)
- Last Synced: 2023-10-08T05:19:28.583Z (about 1 year ago)
- Topics: angular, angular-cli, bmob, canvas, ng-alain, ng-zorro-antd
- Language: Less
- Homepage: https://xlong1029.github.io/xlong-admin-angular/#/passport/login
- Size: 54.6 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# xlong-admin-angular
## 重要通知!!!
我的账号在Github开启2FA设置后,因某种原因丢失恢复码导致账号无法登录,日后该账号下的所有项目在github不再更新,若想查看持续更新的项目请移步到 [我的码云仓库](https://gitee.com/xlong1029)## 介绍
xlong-admin-angular 是一套基于 Angular + Ng Alain + Bmob + BMap 开发的单页面响应式管理后台系统应用示例。
温馨提示:
1. 因我的Bmob用的是开发版套餐(2022 年 5 月 5 日起,Bomb已对开发版应用创建时间超过 12 个月的停止免费服务),所有查询只有全匹配查询,无模糊查询,请根据自行需求进行修改。
2. 部署到github的站点是https的,上传到Bmob的图片地址是http,在所以线上项目浏览器会报Mixed Content错误,并且无法显示图片,本地运行项目无此问题,建议使用本地运行查看效果。
3. 如果要测试删除功能,请自行添加再删除,请保留我原有的测试数据* 该项目仅作学习参考,请勿商用,将持续添加功能……
## 项目展示
> DEMO地址:https://xlong1029.github.io/xlong-admin-angular/#/passport/login
## 项目迭代
1. 2021-08-10
hydrogen-js-sdk v2.x版本请求服务器会提示“请求到达服务器超过了规定的时间”,官方暂时未给予答复,降至使用v1.7.0版本
2. 2020-03-26
新增:GIS地图示例
包含功能:监控资源列表、资源聚点显示、资源定位打点、灯杆控制、气象信息获取等
## 项目说明#### 1. 前后端分离开发模式
- **前端**:Angular + Ng Alain
- **后端**:Bmob#### 2. 项目用到技术、框架与插件
[angular](https://github.com/angular)
[ng-alain](https://github.com/ng-alain/ng-alain)
[ng-zorro-antd](https://github.com/NG-ZORRO/ng-zorro-antd)
[BMap](http://lbsyun.baidu.com/index.php?title=jspopularGL)#### 3. 浏览器兼容性
由于是响应式页面,PC和移动设备都能统一访问,并且用到了部分版本比较高的插件,所以主要兼容浏览器:IE10+、IE Edge、Safai、Firefox、Chrome等。## 权限功能
账户分超级管理员、管理员和普通用户,不同角色拥有不同的操作权限:- **超级管理**: 查看、编辑、删除、启用、禁用
- **管理员**:查看、启用、禁用
- **普通用户**:查看## 部分项目运行截图
* 登录界面![Image text](static/images/screen-1.gif)
* 个人资料\修改密码
![Image text](static/images/screen-2.gif)
* 用户管理功能
![Image text](static/images/screen-3.gif)
![Image text](static/images/screen-4.gif)
* Canvas示例
![Image text](static/images/screen-5.gif)
* GIS地图示例
![Image text](static/images/screen-6.gif)
![Image text](static/images/screen-7.gif)
![Image text](static/images/screen-8.gif)
![Image text](static/images/screen-9.gif)
## 目录结构
```
│ .editorconfig // 代码编辑器的配置
│ .gitignore
│ .prettierignore
│ .prettierrc
│ .stylelintrc
│ angular.json // 为工作区中的所有项目指定 CLI 的默认配置,可添加第三方插件/字体包
│ browserslist // 配置各种前端工具之间共享的目标浏览器和 Node.js 版本
│ karma.conf.js
│ package.json
│ package-lock.json
│ proxy.conf.json
│ tsconfig.app.json
│ tsconfig.json // 工作空间中各个项目的默认 TypeScript 配置,可定义路径别名
│ tsconfig.spec.json
│ tslint.json
│ README.md
│
├─src
│ │ favicon.ico // 应用图标
│ │ hmr.ts // 热更新配置
│ │ index.html // 首页入口文件
│ │ main.ts // 项目入口,可在此配置Bmob服务
│ │ polyfills.ts // 引用的ES6/ES7方法可以放在这里
│ │ style-icons.ts // 手动配置的 nz-zorro 图标
│ │ style-icons-auto.ts // 通过指令配置的 nz-zorro 图标
│ │ styles.less
│ │ test.ts
│ │ typings.d.ts
│ │
│ ├─assets // 资源目录,这里的资源会被构建
│ ├─common // 通用配置
│ ├─environments // 环境配置
│ ├─bmob // Bmob后端云配置
│ │ bmob-server.ts // 封装bmob的增删改查数据方法
│ │
│ ├─styles // 可覆盖ng-alain样式配置
│ │ index.less // 通用样式
│ │ theme.less // 主题样式
│ │
│ └─app
│ │ app.component.ts
│ │ app.global.ts // 配置全局变量
│ │ app.module.ts
│ │ app-routing.module.ts
│ │ delon.module.ts
│ │
│ ├─core
│ │ │ index.ts
│ │ │ core.module.ts
│ │ │ module-import-guard.ts
│ │ │ README.md
│ │ │
│ │ ├─net // 网络配置
│ │ └─startup // 项目启动配置
│ │
│ ├─layout // 页面布局相关模块
│ │
│ ├─routes // 路由相关模块
│ │ │ routes.module.ts
│ │ │ routes-routing.module.ts // 路由配置
│ │ │
│ │ ├─admin // 管理后台相关页面
│ │ │ ├─account // 个人设置页面
│ │ │ ├─example // 示例相关页面
│ │ │ ├─home // 后台主页
│ │ │ └─user-manage // 用户管理相关页面
│ │ │
│ │ ├─callback // 回调页面
│ │ ├─dashboard // 仪表盘页面(已废弃使用,改用admin/home)
│ │ ├─exception // 异常相关页面
│ │ ├─passport // 通行认证相关页面(包括登录、注册)
│ │ ├─guard // 路由守卫配置
│ │ └─public // 公用模块
│ │
│ └─shared
│ │ index.ts
│ │ shared.module.ts
│ │
│ ├─directive // 自定义指令
│ ├─pipe // 自定义管道
│ ├─utils // 自定义工具箱
│ └─json-schema
│
├─scripts
│
├─e2e
│
└─_mock // mock请求文件
```## 本地运行
1. 安装前台依赖
> npm install2. 运行项目
* 默认端口启动:
> npm start访问地址:http://localhost:4200
* 自定义端口启动:
> ng serve --port 4201 --open访问地址:http://localhost:4201,--open 指令会自动启动浏览器
## 项目测试
> npm run test## 项目打包
> npm run build## Angular官方项目学习
在线例子: https://stackblitz.com/angular/vmeynjlxkqa## 作者联系方式
QQ:381612175
TEL: 18376686974github:https://github.com/xLong1029/
站酷主页:http://xlong.zcool.com.cn/
UI中国:http://i.ui.cn/ucenter/358591.html
* 此项目做学习Angular测试使用,有什么问题可联系我讨论