登陆/注册对接服务端接口

angular.json

@@ -33,7 +33,8 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.js",
               "node_modules/popper.js/dist/umd/popper.js",
-              "node_modules/bootstrap/dist/js/bootstrap.js"
+              "node_modules/bootstrap/dist/js/bootstrap.js",
+              "node_modules"
             ]
           },
           "configurations": {

package.json

@@ -23,6 +23,7 @@
     "@ng-bootstrap/ng-bootstrap": "^6.0.0-rc.0",
     "@ngx-translate/core": "^12.1.1",
     "@ngx-translate/http-loader": "^4.0.0",
+    "angular2-cookie": "^1.2.6",
     "bootstrap": "^4.4.1",
     "jquery": "^3.4.1",
     "popper.js": "^1.16.1",

src/app/account/login/login.component.html

@@ -7,7 +7,7 @@
       <div class="input-group-prepend">
         <span class="input-group-text">{{ 'login.manager_name' | translate }}</span>
       </div>
-      <input type="text" class="form-control text-center" [placeholder]="('tip.input' | translate)+('login.manager_name' | translate)" formControlName="managerName">
+      <input autocomplete="managerName" type="text" class="form-control text-center" [placeholder]="('tip.input' | translate)+('login.manager_name' | translate)" formControlName="managerName">
     </div>
 
 <!--    管理员密码-->
@@ -15,7 +15,7 @@
       <div class="input-group-prepend">
         <span class="input-group-text">{{ 'login.password' | translate }}</span>
       </div>
-      <input type="password" class="form-control text-center" [placeholder]="('tip.input' | translate)+('login.password' | translate)" formControlName="password">
+      <input autocomplete="new-password" type="password" class="form-control text-center" [placeholder]="('tip.input' | translate)+('login.password' | translate)" formControlName="password">
       <div class="input-group-append">
         <button class="btn btn-outline-secondary" type="button" [routerLink]="['/reset_pwd']">{{ 'button.forget_pwd' | translate }}</button>
       </div>
@@ -23,11 +23,18 @@
 
 
 
-    <div class="col-5 mx-auto text-center">
+    <div class="col-5 mx-auto text-center mb-3">
 <!--    登陆按钮-->
       <button type="button" (click)="login()" class="btn btn-primary btn-lg">{{ 'button.login' | translate }}</button>
 <!--    注册按钮-->
-    <button type="button" class="btn btn-primary btn-lg ml-3" [routerLink]="['/register']">{{ 'button.register' | translate }}</button>
+    <button type="button" class="btn btn-info btn-lg ml-3" [routerLink]="['/register']">{{ 'button.register' | translate }}</button>
+    </div>
+
+    <div *ngIf="message!==null" [class]="'alert alert-'+messageStyle+' alert-dismissible fade show'" role="alert">
+      <div class="text-center">{{message}}</div>
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="clearError()" >
+        <span aria-hidden="true" >&times;</span>
+      </button>
     </div>
   </form>
 </div>

src/app/account/login/login.component.ts

@@ -1,21 +1,23 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder} from '@angular/forms';
-import {Height} from '../../height';
-
+import {Commons} from '../../commons';
+import {Router} from '@angular/router';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
 // 登陆模块
-export class LoginComponent extends Height implements OnInit {
+export class LoginComponent extends Commons implements OnInit {
   // 登陆表单
   loginForm = this.fb.group({
     managerName: [''],
     password: ['']
   });
 
-  constructor(private fb: FormBuilder) {
+
+
+  constructor(private fb: FormBuilder,private router: Router) {
     super();
   }
 
@@ -25,8 +27,17 @@ export class LoginComponent extends Height implements OnInit {
   // 登陆方法
   login() {
     console.debug(this.loginForm.value);
-    alert('执行登陆操作');
-  }
 
+    this.request('http://localhost:8080/api/manager/login', JSON.stringify(this.loginForm.value),
+        res => {
+          this.message = res.message;
+          if (res.result === 'OK') {
+            this.messageStyle = 'info';
+            this.router.navigateByUrl('/forum');
+          } else {
+            this.messageStyle = 'warning';
+          }
+        });
+  }
 
 }

src/app/account/register/register.component.html

@@ -15,7 +15,7 @@
       <div class="input-group-prepend">
         <span class="input-group-text">{{ 'login.password' | translate }}</span>
       </div>
-      <input type="password" class="form-control text-center" [placeholder]="('tip.input' | translate)+('login.password' | translate)" formControlName="password">
+      <input autocomplete="password" type="password" class="form-control text-center" [placeholder]="('tip.input' | translate)+('login.password' | translate)" formControlName="password">
     </div>
 
 
@@ -24,7 +24,7 @@
       <div class="input-group-prepend">
         <span class="input-group-text">{{ 'register.confirm_pwd' | translate }}</span>
       </div>
-      <input type="password" class="form-control text-center" [placeholder]="('tip.input' | translate)+('register.confirm_pwd' | translate)" formControlName="confirmPassword">
+      <input autocomplete="confirmPassword" type="password" class="form-control text-center" [placeholder]="('tip.input' | translate)+('register.confirm_pwd' | translate)" formControlName="confirmPassword">
     </div>
 
 <!--    手机号-->
@@ -43,12 +43,19 @@
       <input type="text" class="form-control text-center" [placeholder]="('tip.input' | translate)+('register.email' | translate)" formControlName="email">
     </div>
 
-    <div class="col-7 mx-auto text-center">
+    <div class="col-7 mx-auto text-center mb-3">
       <!--    注册按钮-->
       <button type="button" (click)="register()" class="btn btn-primary btn-lg">{{ 'button.register' | translate }}</button>
       <!--    返回登陆按钮-->
       <button type="button"  [routerLink]="['/login']"
-              class="btn btn-primary btn-lg ml-3">{{ 'button.backLogin' | translate }}</button>
+              class="btn btn-info btn-lg ml-3">{{ 'button.backLogin' | translate }}</button>
+    </div>
+
+    <div *ngIf="message!==null" [class]="'alert alert-'+messageStyle+' alert-dismissible fade show'" role="alert">
+      <div class="text-center">{{message}}</div>
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="clearError()" >
+        <span aria-hidden="true" >&times;</span>
+      </button>
     </div>
 
   </form>

src/app/account/register/register.component.ts

@@ -1,13 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import {FormBuilder} from '@angular/forms';
-import {Height} from '../../height';
+import {Commons} from '../../commons';
 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
   styleUrls: ['./register.component.scss']
 })
 // 注册模块
-export class RegisterComponent extends Height implements OnInit {
+export class RegisterComponent extends Commons implements OnInit {
   // 注册表单
   registerForm = this.fb.group({
       managerName: [],
@@ -25,6 +25,10 @@ export class RegisterComponent extends Height implements OnInit {
   }
 
   register() {
-    alert('确认注册');
+    this.request('http://localhost:8080/api/manager/register', JSON.stringify(this.registerForm.value),
+      res => {
+        this.message = res.message;
+        this.messageStyle = (res.result === 'OK' ? 'info' : 'warning');
+      });
   }
 }

src/app/account/resetpwd/resetpwd.component.html

@@ -33,7 +33,7 @@
       <button type="button" (click)="resetPwd()" class="btn btn-primary btn-lg">{{ 'button.reset_pwd' | translate }}</button>
       <!--    返回登陆按钮-->
       <button type="button"  [routerLink]="['/login']"
-              class="btn btn-primary btn-lg ml-3">{{ 'button.backLogin' | translate }}</button>
+              class="btn btn-info btn-lg ml-3">{{ 'button.backLogin' | translate }}</button>
     </div>
   </form>
 </div>

src/app/account/resetpwd/resetpwd.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
-import {Height} from '../../height';
+import {Commons} from '../../commons';
 
 @Component({
   selector: 'app-resetpwd',
@@ -8,7 +8,7 @@ import {Height} from '../../height';
   styleUrls: ['./resetpwd.component.scss']
 })
 // 重置密码模块
-export class ResetpwdComponent extends Height implements OnInit {
+export class ResetpwdComponent extends Commons implements OnInit {
 
   // 重置密码表单
   resetForm = this.fb.group({

src/app/app.component.ts

@@ -1,8 +1,7 @@
 import {Component} from '@angular/core';
-import {Router, ActivatedRoute, NavigationStart} from '@angular/router';
+import {Router, ActivatedRoute} from '@angular/router';
 import {TranslateService} from '@ngx-translate/core';
-import { filter } from 'rxjs/operators';
-import { Observable } from 'rxjs-compat';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -13,13 +12,8 @@ export class AppComponent {
   // 登陆状态
   isLogin;
 
-  navStart: Observable<NavigationStart>;
   constructor(public route: ActivatedRoute, public translate: TranslateService, private router: Router) {
 
-    // 导航开始事件
-    this.navStart = this.router.events.pipe(
-      filter(evt => evt instanceof NavigationStart)
-    ) as Observable<NavigationStart>;
   }
 
   public async ngOnInit() {
@@ -30,27 +24,6 @@ export class AppComponent {
     this.translate.use(currentLanguage);
     // 记录当前设置的语言
     localStorage.setItem('currentLanguage', currentLanguage);
-
-    // const that = this;
-    // this.navStart.subscribe(evt => {
-    //   if ( evt.url !== '/login') {
-    //     // 检查登陆状态
-    //     this.checkLogin(that);
-    //   }
-    // });
-
-    this.checkLogin();
   }
 
-  /**
-   * 检查登陆状态
-   */
-  checkLogin() {
-    this.isLogin = true;
-    if (this.isLogin) {
-      this.router.navigateByUrl('/forum');
-    } else {
-      this.router.navigateByUrl('/login');
-    }
-  }
 }

src/app/app.module.ts

@@ -6,7 +6,7 @@ import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 // 登陆
 import {LoginComponent} from './account/login/login.component';
-
+import { CookieService } from 'ngx-cookie-service';
 // 响应式表单
 import {ReactiveFormsModule} from '@angular/forms';
 // 国际化支持
@@ -41,7 +41,7 @@ export function HttpLoaderFactory(http: HttpClient) {
       }
     })
   ],
-  providers: [],
+  providers: [CookieService],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/commons.ts

@@ -0,0 +1,21 @@
+export class Commons {
+  // 页面高度=屏幕的高度/2
+  height = 'height:' + screen.height / 2 + 'px';
+
+  message = null;
+  messageStyle = 'warning';
+
+  // 清空警告信息
+  clearError() {
+    this.message = null;
+  }
+
+  // post请求
+  request(url, b, res) {
+    const header = new Headers();
+    header.append('Content-Type', 'application/json');
+    const req = new Request(url,
+      {method: 'POST', body: b, headers: header});
+    fetch(req).then(r => r.json()).then(res);
+  }
+}

src/app/height.ts

@@ -1,4 +0,0 @@
-export class Height {
-  // 页面高度=屏幕的高度/2
-  height = 'height:' + screen.height / 2 + 'px';
-}