panqihua
4 years ago
parent
2d788991b3
commit
94ad8edfa2
@ -1,37 +1,123 @@ |
||||
import {Component, OnInit} from '@angular/core'; |
||||
import {FormBuilder} from '@angular/forms'; |
||||
import {Commons} from '../../commons'; |
||||
import {Router} from '@angular/router'; |
||||
import {RegisterService} from './register.service'; |
||||
import {TranslateService} from '@ngx-translate/core'; |
||||
import {Observable, of} from 'rxjs'; |
||||
|
||||
@Component({ |
||||
selector: 'app-register', |
||||
templateUrl: './register.component.html', |
||||
styleUrls: ['./register.component.scss'] |
||||
}) |
||||
|
||||
|
||||
// 注册模块
|
||||
export class RegisterComponent extends Commons implements OnInit { |
||||
|
||||
|
||||
// 注册表单
|
||||
registerForm = this.fb.group({ |
||||
// 管理员名
|
||||
managerName: [], |
||||
// 密码
|
||||
password: [], |
||||
// 确认密码
|
||||
confirmPassword: [], |
||||
// 手机号
|
||||
mobile: [], |
||||
email: [] |
||||
// 邮箱
|
||||
email: [], |
||||
// 邮箱类型
|
||||
emailType: this.fb.control('-1') |
||||
}); |
||||
|
||||
/** |
||||
* 邮箱类型 |
||||
*/ |
||||
emailType$ = this.registerService.getEmailType(); |
||||
|
||||
// 表单验证
|
||||
validForm = { |
||||
confirmPassword: { |
||||
flag: false |
||||
}, |
||||
mobile: { |
||||
flag: false |
||||
} |
||||
}; |
||||
|
||||
constructor( |
||||
private fb: FormBuilder, |
||||
private router: Router, |
||||
private registerService: RegisterService |
||||
private registerService: RegisterService, |
||||
private translateService: TranslateService |
||||
) { |
||||
super(); |
||||
} |
||||
|
||||
/** |
||||
* 检查单个表单值 |
||||
* @param name formControlName |
||||
*/ |
||||
checkValue(name): boolean { |
||||
if (!this.validForm.hasOwnProperty(name)) { |
||||
this.validForm[name] = {}; |
||||
} |
||||
this.validForm[name].flag = this.registerForm.value[name]; |
||||
return !this.validForm[name].flag; |
||||
} |
||||
|
||||
/** |
||||
* 检查表单所有值 |
||||
*/ |
||||
checkForm(): boolean { |
||||
for (const key in this.validForm) { |
||||
if (!this.validForm[key].flag) { |
||||
return true; |
||||
} |
||||
} |
||||
return this.registerForm.value.emailType === '-1'; |
||||
} |
||||
|
||||
/** |
||||
* 检查确认密码 |
||||
*/ |
||||
checkPwd(): Observable<string> { |
||||
|
||||
if (!this.registerForm.value.confirmPassword) { |
||||
this.validForm.confirmPassword.flag = false; |
||||
return this.translateService.get('tip.password_null'); |
||||
} else if (this.registerForm.value.password !== this.registerForm.value.confirmPassword) { |
||||
this.validForm.confirmPassword.flag = false; |
||||
return this.translateService.get('tip.password_diff'); |
||||
} else { |
||||
this.validForm.confirmPassword.flag = true; |
||||
return of(''); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* 检查手机 |
||||
*/ |
||||
checkMobile(): Observable<string> { |
||||
if (!this.registerForm.value.mobile) { |
||||
this.validForm.mobile.flag = false; |
||||
return this.translateService.get('tip.mobile_null'); |
||||
} else if (!/^1[3456789]\d{9}$/.test(this.registerForm.value.mobile)) { |
||||
this.validForm.mobile.flag = false; |
||||
return this.translateService.get('tip.mobile_error'); |
||||
} else { |
||||
this.validForm.mobile.flag = true; |
||||
return of(''); |
||||
} |
||||
} |
||||
|
||||
ngOnInit(): void { |
||||
|
||||
} |
||||
|
||||
register() { |
||||
this.registerService.register(JSON.stringify(this.registerForm.value)); |
||||
this.registerService.register(this.registerForm.value); |
||||
} |
||||
} |
||||
|
||||
|
||||
@ -1,22 +1,66 @@ |
||||
import { Injectable } from '@angular/core'; |
||||
import {HttpInterface} from '../../interface/Http'; |
||||
import {Injectable} from '@angular/core'; |
||||
import {JSONRequest} from '../../interface/JSONRequest'; |
||||
import {HttpClient} from '@angular/common/http'; |
||||
import {catchError, tap} from 'rxjs/operators'; |
||||
import {JSONResponse} from '../../interface/JSONResponse'; |
||||
import {HttpInterface} from '../../interface/HttpInterface'; |
||||
import {Observable} from 'rxjs'; |
||||
import {Result} from '../../interface/Result'; |
||||
import {Router} from '@angular/router'; |
||||
import {MessageService} from '../../message/message.service'; |
||||
|
||||
@Injectable({ |
||||
providedIn: 'root' |
||||
}) |
||||
export class RegisterService implements HttpInterface { |
||||
export class RegisterService extends JSONRequest { |
||||
|
||||
constructor() { } |
||||
constructor( |
||||
private http: HttpClient, |
||||
private router: Router, |
||||
private messageService: MessageService |
||||
) { |
||||
super(); |
||||
|
||||
this.httpError.result = Result.FAIL; |
||||
this.httpError.message = '注册失败'; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
* @param body 注册表单 |
||||
*/ |
||||
register(body: string) { |
||||
register(body) { |
||||
this.http.post<JSONResponse<any>>(HttpInterface.register, body, this.httpOptions) |
||||
.pipe( |
||||
catchError(this.handleError<any>('注册', this.httpError)) |
||||
).subscribe(r => { |
||||
if (r.result === Result.OK) { |
||||
this.messageService.info('注册成功'); |
||||
this.router.navigateByUrl('/login'); |
||||
} else { |
||||
this.messageService.danger('注册失败'); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
|
||||
/** |
||||
* 获取邮箱类型 |
||||
*/ |
||||
getEmailType(): Observable<any> { |
||||
return this.http.get<JSONResponse<any>>(HttpInterface.getEmailType) |
||||
.pipe( |
||||
catchError(this.handleError<any>('获取邮箱类型')) |
||||
); |
||||
} |
||||
|
||||
url(): string { |
||||
return '/api/manager/register'; |
||||
/** |
||||
* 发送验证码 |
||||
*/ |
||||
sendEmail(sender): Observable<any> { |
||||
return this.http.post<JSONResponse<any>>(HttpInterface.sendCode, {email: 'sender'}) |
||||
.pipe( |
||||
catchError(this.handleError<any>('发送邮件验证码')) |
||||
); |
||||
} |
||||
} |
||||
|
||||
@ -1,24 +1,5 @@ |
||||
import {environment} from './../environments/environment'; |
||||
|
||||
// 组件通用配置
|
||||
export class Commons { |
||||
// 页面高度=屏幕的高度/2
|
||||
height = 'height:' + screen.height / 2 + 'px'; |
||||
|
||||
// post请求
|
||||
request(url, b, res) { |
||||
const header = new Headers(); |
||||
header.append('Content-Type', 'application/json'); |
||||
const req = new Request(environment.apiServer + url, |
||||
{method: 'POST', body: b, headers: header}); |
||||
fetch(req).then(r => { |
||||
if (r.status === 200) { |
||||
return r.json(); |
||||
} else { |
||||
throw new Error('666'); |
||||
} |
||||
}).then(res).catch(err => { |
||||
console.error(err); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
@ -1,5 +0,0 @@ |
||||
// 请求接口
|
||||
export interface HttpInterface { |
||||
// 接口地址
|
||||
url(): string; |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
// 环境变量
|
||||
import {environment} from '../../environments/environment'; |
||||
// 请求接口
|
||||
const HttpInterface = { |
||||
// 注册接口
|
||||
register: '/api/manager/register', |
||||
// 获取邮箱类型接口
|
||||
getEmailType: '/api/manager/emailType', |
||||
// 登陆接口
|
||||
login: '/api/manager/login', |
||||
// 发送验证码接口
|
||||
sendCode: '/api/manager/sendcode' |
||||
}; |
||||
|
||||
// tslint:disable-next-line:forin
|
||||
for (const key in HttpInterface) { |
||||
HttpInterface[key] = environment.apiServer + HttpInterface[key]; |
||||
} |
||||
console.debug(HttpInterface); |
||||
export {HttpInterface}; |
||||
@ -0,0 +1,30 @@ |
||||
import {HttpInterface} from './HttpInterface'; |
||||
import {Observable, of} from 'rxjs'; |
||||
import {HttpHeaders} from '@angular/common/http'; |
||||
import {JSONResponse} from './JSONResponse'; |
||||
|
||||
export abstract class JSONRequest { |
||||
|
||||
protected httpOptions = { |
||||
headers: new HttpHeaders({ 'Content-Type': 'application/json' }) |
||||
}; |
||||
|
||||
protected httpError = new JSONResponse<any>(); |
||||
|
||||
/** |
||||
* Handle Http operation that failed. |
||||
* Let the app continue. |
||||
* @param operation - name of the operation that failed |
||||
* @param result - optional value to return as the observable result |
||||
*/ |
||||
protected handleError<T>(operation = 'operation', result?: T) { |
||||
return (error: any): Observable<T> => { |
||||
|
||||
// TODO: send the error to remote logging infrastructure
|
||||
console.error(error); // log to console instead
|
||||
|
||||
// Let the app keep running by returning an empty result.
|
||||
return of(result as T); |
||||
}; |
||||
} |
||||
} |
||||
@ -0,0 +1,38 @@ |
||||
import {Result} from './Result'; |
||||
|
||||
|
||||
export class JSONResponse<T> { |
||||
// 响应结果
|
||||
// tslint:disable-next-line:variable-name
|
||||
private _result: Result; |
||||
// 响应详细结果
|
||||
// tslint:disable-next-line:variable-name
|
||||
private _message: string; |
||||
// 自定义其他响应信息
|
||||
// tslint:disable-next-line:variable-name
|
||||
private _body: T; |
||||
|
||||
get result(): Result { |
||||
return this._result; |
||||
} |
||||
|
||||
set result(value: Result) { |
||||
this._result = value; |
||||
} |
||||
|
||||
get message(): string { |
||||
return this._message; |
||||
} |
||||
|
||||
set message(value: string) { |
||||
this._message = value; |
||||
} |
||||
|
||||
get body(): T { |
||||
return this._body; |
||||
} |
||||
|
||||
set body(value: T) { |
||||
this._body = value; |
||||
} |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
export enum Result { |
||||
OK = 'OK', |
||||
FAIL = 'FAIL' |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = { |
||||
production: false, |
||||
// 服务端地址
|
||||
apiServer: 'http://rap2.taobao.org:38080/app/mock/245830', |
||||
// token key
|
||||
tokenKey: 'token' |
||||
|
||||
}; |
||||
|
||||
/* |
||||
* For easier debugging in development mode, you can import the following file |
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. |
||||
* |
||||
* This import should be commented out in production mode because it will have a negative impact |
||||
* on performance if an error is thrown. |
||||
*/ |
||||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
||||
Loading…
Reference in new issue