My blog admin client by Angular, Bootstrap4.
The project forked from ng2-admin.
The api of this project is accompanied by the nodepress program, and if you want to run up, you need to install nodepress.
If you only need to demonstrate the project locally, you need to comment on the following lines of code:
标签管理
发布文章
全局设置
文章列表
评论管理
markdown编辑器
- 一个类
- 一堆方法
- 返回 promise
- 用第三方组件配合来实现 res/err 的处理
- 定制化的 http 服务是需要自己封装的,如果你想实现拦截器,auth 控制的话,必须封装,项目中用了三方的 angular2-jwt
- 框架基本都同质化了,和 vue API 层面的实现方式相差无几
- 但实现原理不同,Angular 内置了 Zone.js 对所有全局的异步 API 进行了高级包装,并抽象出了异步任务管理层,用以驱动 Angular 的数据检测
- "盒子里的香蕉" [(ngModel)] = [ngModelChange] + (model)
- 一句话:用既定内置的 API 做预期的事
- 看这里有实现文件
- 路由管理可以集中内聚管理,也可以模块化碎片化,项目中两者都有
- 在 app 根组件中,注入 router 对象订阅 event 的事件流,从而实现"拦截",此方法无法中断
- 因为我暂时没找到管方提供的类似拦截的 api,如果有更好的方法,可以随时开一个 Issue
- 本地 token 库 angular2-jwt 会验证三点,1:是否存在 2:是否有效 3:是否过期
- 可选一些配置,见作者 github
- 在登录页,需要使用 Angular 的 http 服务,否则无法发起请求,原因: 1:token 不存在,存在也被验证为失效,不然怎么来登录页的,怎么初始化的 2:angular2-jwt 只要验证不通过就 return false了 ,当然你可以配置
- 这也就是前面所说的 http 服务可以有多个,什么地方用哪一个,取决于你自己
- 组件和 vue 一样,以文件夹为内聚单位,而不是单文件,单文件的话是字符串形式,很不友好
- 比组件高一个维度但又不是一个维度的元素:模块,模块可以理解为一个完整功能的内聚单位
- 组件、过滤器、指令、公共服务、验证...
- 略复杂...我也没搞很明白
- 简单的话,就 to promise,项目中是这么做的
- 简单,都一样
- 简单
- 无奈还是使用了官方提供的 js 插件,具体看官方
- token 从服务端 sdk 生成获取
- 拿 token 上传文件
- 上传后的后续处理:用 image 对象获取图片,成功后再 emit 事件和更新数据,可以保证,我们看到成功提示那一刻,图片已经成功加载到本地了,减少白屏时间
- 由于设置了防盗链导致本地调试 403 错误
- 依赖 form 里面的类、基本类、验证类、...
- 基本的构造方法是怎样的,看官方文档
- 自定义正则验证规则,看官方文档
- 模块为完整功能的内聚单位,可包含多种其他元素,如组件、路由、服务、指令...
- 组件包含 view,类似 view + 控制器映射,负责 view 的直接逻辑
- service 属数据工具性质,本项目中用来获取/管理资源/状态,但没有使用 service 实现数据共享,仅仅是封装了 resource 部分
- 原计划将部分 service 抽象为公共服务,但是多次注入会被多次实例化,导致无法订阅数据流,暂没找到更好方法
- 变量声明(声明前的判断,和调用时可能出现的错误)
(<any>window).aaa = {}
,这里不能用 global 判断,global 在 webpack (nodejs)中是可用的,本项目也依赖了虚拟的 dom 对象,编译后 global 关键字被自动替换为 window 引入,所以只能如上写法,当然还有一种 try catch 的方法也能做到- 在项目中使用 jquery,或其他 js 库,记得声明变量,
declare var jQuery:any;
- 内置了一些如 ngOnInit 这样的周期性钩子函数,不要冲突
- cnpm 和 npm 安装文件结构不一样,会导致重复引用无法编译的问题,主要是由于 cnpm 的版本管理机制不一样导致的,cnpm是空文件夹+快捷方式的方法乱搞,所以遇到模块引用的错误,一般删掉对应文件夹,用 npm 重装就可以了
仪表盘信息聚合(系统/文章信息聚合,echarts)?[won't fix]需要增加一个数据库导出功能评论管理,增删改查功能增加黑名单功能,优化设置部分表单体验增加Markdown编辑器实时本地备份功能弹窗的遮罩层把行为层挡住了标签列表页,描述限制为一行超出隐藏使用codemirror创建一个markdown编辑器 https://github.com/jbt/markdown-editor/blob/master/index.html可以适当性创建一些按钮,如图片、连接、标题、全屏、预览切换,highlight.js + marked用于预览时的解析,codemirror用于编辑模式下的编辑器,引入所有语言的语言包,首次登陆,数据库无数据时,个人头像,名字等均为展示默认值分类列表页的分类描述,超出一行之后,P标签的行间距过大发布文章页的分类目录选中图标,应该替换为ionic里的图标标签项,需要增加icon自定义字段取消文章在列表页的密码和缩略内容/内容字段仪表盘图表组件和echarts整合所有无用组件/代码的清理数据结构变动如article的count,data字段首页无用的都删掉发布文章页,在标签和分类为空时缺少提示信息,文章的默认缩略图需调整所有涉及发布的内容项,都需要增加自定义字段程序截图 + 文档撰写 readme由于数据的准确性没有测试,分类和标签列表的与文章内容的先后顺序不同会导致标签和分类不会被勾选- ~~升级至Angular4 and Bootstrap 4最新测试版 ~~
升级至ngx-bootstrap,并优化markdown全部升级为最新,一键安装构建
# install
cnpm i --python=python2.7
# 开发
npm start
# 构建
npm run build:prod
# 生产,可以用nginx映射dist,不必要开node进程
npm run server:prod
angular-admin/
|
├──config/ * webpack构建配置
│ |
│ ├──head-config.common.js * 配置index.html的头部元信息
│ │
│ ├──helpers.js * 配置文件的辅助函数
│ │
│ ├──webpack.dev.js * webpack开发环境配置
│ │
│ ├──webpack.prod.js * webpack生产环境配置
│ │
│ ├──webpack.test.js * webpack测试环境配置
│ │
│ └──html-elements-plugin/ * html elements plugin
│
├──src/ * 源文件最终编译为javascript
│ |
│ ├──custom-typings.d.ts * 第三方模块的自定义类型
│ │
│ ├──index.html * html入口文件
│ │
│ ├──main.browser.ts * app入口文件
│ │
│ ├──polyfills.browser.ts * 浏览器降级支持polyfills file
│ │
│ ├──vendor.browser.ts * 需要集中打包的模块(一般为核心/第三方模块)
│ │
│ ├──app/ * application code - our working directory
│ │ │
│ │ ├──app.component.ts * app入口组件
│ │ │
│ │ ├──app.loader.ts * 应用程序加载阶段)、,初始化时用的样式
│ │ │
│ │ ├──app.menu.ts * 页面的菜单/路由
│ │ │
│ │ ├──app.module.ts * app入口模块
│ │ │
│ │ ├──app.routes.ts * app路由
│ │ │
│ │ ├──global.state.ts * 组件之间交换的全局应用状态
│ │ │
│ │ ├──environment.ts * 环境提供
│ │ │
│ │ ├──app.scss * 样式入口文件
│ │ │
│ │ ├──pages/ * application pages components, place where you can create pages and fill them with components
│ │ │
│ │ └──theme/ * 模板/全局通用组件、指令、过滤器、样式
│ │
│ └──assets/ * 静态资源
│
│
├──tslint.json * typescript lint 配置
│
├──typedoc.json * typescript文档生成器
│
├──tsconfig.json * config that webpack uses for typescript
│
│──package.json * what npm uses to manage it's dependencies
│
│──Dockerfile * Docker镜像生成文件
│
│──build.sh * Docker构建命令
│
│──.travis.yml * Travis 持续集成配置
│
│──.gitignore * Git忽略文件配置
│
│──.editorconfig * 编码风格配置
│
└──.bootstraprc * bootstrap-loader文件配置