0.4.8 • Published 6 years ago
jd-decorator v0.4.8
Installation(安装)
使用 npm or yarn
建议使用npm或yarn来安装,它不仅使开发更容易,而且还允许您利用丰富的Javascript包和工具生态系统。
使用
- 第一步 --- 安装
$ npm install @jd/decorator --save
$ yarn add @jd/decorator
- 第二步 --- 导入装饰器模块 (AppModule.ts)
import {JdDecoratorModule} from '@jd/decorator';
import {NgModuler} from '@angular/core';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
JdMessageModule,
HttpClientModule,
JdDecoratorModule.forRoot({
message: HttpMessageService, // 全局信息提示
defaultConfigForHttp: {
SERVICE_URL: '后台根地址',
API_VERSION: 'api版本 可选',
apiPrefix: 'api前缀 可选'
},
httpRegistered: HttpRegistered // 全局 api 映射
})
],
bootstrap: [AppComponent],
})
export class AppModule {
}
// 全局 api 映射
import {GetAndAutoSubscribe, HttpDefaultConfig} from '@jd/decorator';
export class HttpRegistered {
@GetAndAutoSubscribe({api: '/orders', successMsg: '测试成功', isShowMsg: true})
addOrder: HttpDefaultConfig;
constructor() {
}
}
// 全局信息提示
import {JdHttpMessage} from '@jd/decorator';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class HttpMessageService extends JdHttpMessage<JdMessageDataFilled> {
constructor(private _msg: JdMessageService) {
super();
}
error(content: string): JdMessageDataFilled {
// this._msg.error(content);
return this._msg.error(content);
}
info(content: string): JdMessageDataFilled {
return undefined;
}
loading(content: string): JdMessageDataFilled {
return undefined;
}
remove(content: JdMessageDataFilled): void {
}
success(content: string): JdMessageDataFilled {
return this._msg.success(content);
}
warning(content: string): JdMessageDataFilled {
return this._msg.warning(content);
}
}
- 第三步 --- 正式使用
import {
Delete,
GetAndAutoSubscribe,
getGlobalUrl,
HttpClientOptions,
PostAndAutoSubscribe,
PutAndAutoSubscribe,
ResponseResult,
HttpSuccessResult
} from '@jd/decorator';
/* --------------------------------------------- API 公司代码 --------------------------------------------------------------- */
// Get请求 并自动订阅 与之对应的装饰器是Get(需要手动订阅 手动释放资源)
// 建议使用 GetAndAutoSubscribe 除非非这样不可
// successMsg是成功后的提示 如果转换为布尔时为false 则使用服务端返回的message
// executeMsg 是执行时的提示
@GetAndAutoSubscribe({api: '/customers/getCustomerCodeName'})
getCustomerNo(options?: HttpClientOptions, @HttpResult() res?: ResponseResult) {
if (res.success) {
this.dyForm.updateSelectContentByKey('customer_no', res.data);
}
}
/* --------------------------------------------- API 修改产品 --------------------------------------------------------------- */
// Put请求 并自动订阅 与之对应的装饰器是Put(需要手动订阅 手动释放资源)
// 建议使用 PutAndAutoSubscribe 除非非这样不可
// successMsg是成功后的提示 如果转换为布尔时为false 则使用服务端返回的message
// executeMsg 是执行时的提示
// @HttpSuccessResult() 如果该请求失败 则该方法则不会执行 也就不用手动判断该方法是否成功了
// 与之对应的装饰器 @HttpResult() 无论该请求是否成功 该方法都会在成功或失败时被调用
// 也就是说需要手动判断是否成功 再处理之后的逻辑
// api 为接口名称
@PutAndAutoSubscribe({api: '/products', successMsg: '', executeMsg: '更新产品...'})
updateProductH(@HttpOptions() options?: HttpClientOptions, @HttpSuccessResult() res?: ResponseResult) {
this.updateResult = res.data;
if (Object.keys(this.declarationel).length > 5 && !this.isSave) {
this.addDeclaration({body: Object.assign({}, this.declarationel, {action_flg: 1})});
}
}
/* --------------------------------------------- API 新增历史申报要素 ----------------------------------------------------------- */
// Post请求 并自动订阅 与之对应的装饰器是Post(需要手动订阅 手动释放资源)
// 建议使用 PostAndAutoSubscribe 除非非这样不可
// successMsg是成功后的提示 如果转换为布尔时为false 则使用服务端返回的message
// executeMsg 是执行时的提示
@PostAndAutoSubscribe({api: '/HD', isShowMsg: true, successMsg: '', executeMsg: '新增历史要素...'})
addDeclaration(@HttpOptions() options?: HttpClientOptions, @HttpSuccessResult() res?: ResponseResult) {
if (res.success) {
// this.updateResult = res.data;
}
}
/* ----------------------------------------------- API 删除图片 ------------------------------------------------------------- */
@Delete({api: '/imgs', isShowMsg: true, successMsg: '', executeMsg: '删除图片...', isAutoSubscribe: true})
deleteImg(@HttpOptions() options?: HttpClientOptions, @HttpResult() res?: ResponseResult) {
if (res.success) {
this.updateImgs = this.updateImgs.filter(value => +value.id !== +res.data.id);
this.uploadImgs.ids = this.uploadImgs.ids.filter(value => +value !== +res.data.id);
}
}
@HttpApi('test')
addOrder(options?: HttpClientOptions, @HttpSuccessResult() res?: ResponseResult) {
// this.OnCompleted.emit();
console.log(res);
}
0.4.8
6 years ago