注册模块

重置密码模块
论坛管理模块

package.json

@@ -27,6 +27,7 @@
     "jquery": "^3.4.1",
     "popper.js": "^1.16.1",
     "rxjs": "~6.5.4",
+    "rxjs-compat": "^6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },
@@ -49,6 +50,6 @@
     "protractor": "~5.4.3",
     "ts-node": "~8.3.0",
     "tslint": "~5.18.0",
-    "typescript": "~3.7.5"
+    "typescript": "~3.6.4"
   }
 }

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

@@ -3,29 +3,31 @@
   <form [formGroup]="loginForm" class="col-6">
 
 <!--    管理员名-->
-    <div class="input-group mb-3 mx-auto col-5">
+    <div class="input-group mb-3 mx-auto col-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]="'login.manager_name' | translate" formControlName="managerName">
+      <input type="text" class="form-control text-center" [placeholder]="('tip.input' | translate)+('login.manager_name' | translate)" formControlName="managerName">
     </div>
 
 <!--    管理员密码-->
-    <div class="input-group mb-3 mx-auto col-5">
+    <div class="input-group mb-3 mx-auto col-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]="'login.password' | translate" formControlName="password">
+      <input 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" >{{ 'button.forget_pwd' | translate }}</button>
+        <button class="btn btn-outline-secondary" type="button" [routerLink]="['/reset_pwd']">{{ 'button.forget_pwd' | translate }}</button>
       </div>
     </div>
 
+
+
     <div class="col-5 mx-auto text-center">
 <!--    登陆按钮-->
       <button type="button" (click)="login()" class="btn btn-primary btn-lg">{{ 'button.login' | translate }}</button>
 <!--    注册按钮-->
-    <button type="button" (click)="register()" class="btn btn-primary btn-lg ml-3">{{ 'button.register' | translate }}</button>
+    <button type="button" class="btn btn-primary btn-lg ml-3" [routerLink]="['/register']">{{ 'button.register' | translate }}</button>
     </div>
   </form>
 </div>

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

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder} from '@angular/forms';
+import {Height} from '../../height';
 
 @Component({
   selector: 'app-login',
@@ -7,16 +8,15 @@ import {FormBuilder} from '@angular/forms';
   styleUrls: ['./login.component.scss']
 })
 // 登陆模块
-export class LoginComponent implements OnInit {
+export class LoginComponent extends Height implements OnInit {
-  // 表单组
+  // 登陆表单
   loginForm = this.fb.group({
     managerName: [''],
     password: ['']
   });
-  // 页面高度
-  height = 'height:' + screen.height / 2 + 'px';
 
   constructor(private fb: FormBuilder) {
+    super();
   }
 
   ngOnInit(): void {
@@ -28,9 +28,5 @@ export class LoginComponent implements OnInit {
     alert('执行登陆操作');
   }
 
-  // 注册方法
-  register() {
-    alert('执行注册方法');
-  }
 
 }

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

@@ -0,0 +1,55 @@
+<!--设置高度，添加bootstrap样式类d-flex align-items-center 使表单垂直居中，justify-content-center水平居中-->
+<div [style]="height" class="d-flex align-items-center justify-content-center">
+  <form [formGroup]="registerForm" class="col-6">
+
+    <!--    管理员名-->
+    <div class="input-group mb-3 mx-auto col-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">
+    </div>
+
+    <!--    管理员密码-->
+    <div class="input-group mb-3 mx-auto col-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">
+    </div>
+
+
+<!--    管理员确认密码-->
+    <div class="input-group mb-3 mx-auto col-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">
+    </div>
+
+<!--    手机号-->
+    <div class="input-group mb-3 mx-auto col-7">
+      <div class="input-group-prepend">
+        <span class="input-group-text">{{ 'register.mobie' | translate }}</span>
+      </div>
+      <input type="number" class="form-control text-center" [placeholder]="('tip.input' | translate)+('register.mobie' | translate)" formControlName="mobie">
+    </div>
+
+<!--    邮箱-->
+    <div class="input-group mb-3 mx-auto col-7">
+      <div class="input-group-prepend">
+        <span class="input-group-text">{{ 'register.email' | translate }}</span>
+      </div>
+      <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">
+      <!--    注册按钮-->
+      <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>
+    </div>
+
+  </form>
+</div>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RegisterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import {FormBuilder} from '@angular/forms';
+import {Height} from '../../height';
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss']
+})
+// 注册模块
+export class RegisterComponent extends Height implements OnInit {
+  // 注册表单
+  registerForm = this.fb.group({
+      managerName: [],
+      password: [],
+      confirmPassword: [],
+      mobie:  [],
+      email:  []
+  });
+
+  constructor(private fb: FormBuilder) {
+    super();
+  }
+
+  ngOnInit(): void {
+  }
+
+  register() {
+    alert('确认注册');
+  }
+}

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

@@ -0,0 +1,39 @@
+<!--设置高度，添加bootstrap样式类d-flex align-items-center 使表单垂直居中，justify-content-center水平居中-->
+<div [style]="height" class="d-flex align-items-center justify-content-center">
+  <form [formGroup]="resetForm" class="col-6">
+<!--    管理员名-->
+    <div class="input-group mb-3 mx-auto col-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">
+    </div>
+
+<!--    邮箱-->
+    <div class="input-group mb-3 mx-auto col-7">
+      <div class="input-group-prepend">
+        <span class="input-group-text">{{ 'register.email' | translate }}</span>
+      </div>
+      <input type="text" class="form-control text-center" [placeholder]="('tip.input' | translate)+('register.email' | translate)" formControlName="email">
+      <div class="input-group-append">
+        <button class="btn btn-outline-secondary" type="button" (click)="sendCode()">{{ 'button.send_code' | translate }}</button>
+      </div>
+    </div>
+
+<!--    验证码-->
+    <div class="input-group mb-3 mx-auto col-7">
+      <div class="input-group-prepend">
+        <span class="input-group-text">{{ 'reset_pwd.code' | translate }}</span>
+      </div>
+      <input type="text" class="form-control text-center" [placeholder]="('tip.input' | translate)+('reset_pwd.code' | translate)" formControlName="verificationCode">
+    </div>
+
+    <div class="col-7 mx-auto text-center">
+      <!--   重置密码按钮 -->
+      <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>
+    </div>
+  </form>
+</div>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResetpwdComponent } from './resetpwd.component';
+
+describe('ResetpwdComponent', () => {
+  let component: ResetpwdComponent;
+  let fixture: ComponentFixture<ResetpwdComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResetpwdComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResetpwdComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import {Height} from '../../height';
+
+@Component({
+  selector: 'app-resetpwd',
+  templateUrl: './resetpwd.component.html',
+  styleUrls: ['./resetpwd.component.scss']
+})
+// 重置密码模块
+export class ResetpwdComponent extends Height implements OnInit {
+
+  // 重置密码表单
+  resetForm = this.fb.group({
+    managerName: [],
+    email: [],
+    verificationCode: []
+  });
+
+  constructor(private fb: FormBuilder) {
+    super();
+  }
+
+  ngOnInit(): void {
+  }
+
+  sendCode(){
+    alert('发送验证码');
+  }
+
+  resetPwd(){
+    alert('重置密码');
+  }
+
+}

src/app/app-routing.module.ts

@@ -1,10 +1,20 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import {LoginComponent} from './login/login.component';
+import {LoginComponent} from './account/login/login.component';
-
+import {RegisterComponent} from './account/register/register.component';
+import {ResetpwdComponent} from './account/resetpwd/resetpwd.component';
+import {ForumComponent} from './forum/forum.component';
 
+// 路由配置
 export const routes: Routes = [
-  {path: 'login', component: LoginComponent}
+  // 登陆
+  {path: 'login', component: LoginComponent},
+  // 注册
+  {path: 'register', component: RegisterComponent},
+  // 重置密码
+  {path: 'reset_pwd', component: ResetpwdComponent},
+  // 论坛管理'
+  {path: 'forum', component: ForumComponent}
 ];
 
 @NgModule({

src/app/app.component.html

@@ -3,6 +3,8 @@
     {{ 'APP_TITLE' | translate }}
   </span>
 
+  <a [routerLink]="['/forum']" *ngIf="isLogin">{{ 'forum.name' | translate }}</a>
+
   <div class="dropdown">
     <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       {{ 'language' | translate }}
@@ -14,4 +16,11 @@
     </div>
   </div>
 </nav>
+
+<nav class="navbar navbar-light bg-light justify-content-end">
+  <span class="navbar-text">
+    {{ 'tip.HELLO' | translate:param }}
+  </span>
+</nav>
+
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,17 +1,27 @@
 import {Component} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import {Router, ActivatedRoute, NavigationStart} 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',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'PocketCommunityWeb';
 
-  constructor(public route: ActivatedRoute, public translate: TranslateService) {
+  // 登陆状态
+  isLogin;
+
+  // 当前登陆管理员
+  param = {value: 'admin'};
+  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() {
@@ -22,5 +32,27 @@ 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

@@ -5,7 +5,7 @@ import {AppRoutingModule} from './app-routing.module';
 // 主框架
 import {AppComponent} from './app.component';
 // 登陆
-import {LoginComponent} from './login/login.component';
+import {LoginComponent} from './account/login/login.component';
 
 // 响应式表单
 import {ReactiveFormsModule} from '@angular/forms';
@@ -13,7 +13,9 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {HttpClient, HttpClientModule} from '@angular/common/http';
 import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
-
+import { RegisterComponent } from './account/register/register.component';
+import { ResetpwdComponent } from './account/resetpwd/resetpwd.component';
+import { ForumComponent } from './forum/forum.component';
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
 }
@@ -21,7 +23,10 @@ export function HttpLoaderFactory(http: HttpClient) {
 @NgModule({
   declarations: [
     AppComponent,
-    LoginComponent
+    LoginComponent,
+    RegisterComponent,
+    ResetpwdComponent,
+    ForumComponent
   ],
   imports: [
     BrowserModule,

src/app/forum/forum.component.html

@@ -0,0 +1,12 @@
+<div class="notice bg-light col-5 mx-auto">
+<h1 class="text-center mb-3 mt-3">{{ 'forum.notice' | translate }}</h1>
+<div class="notice-content border-success mt-3 mb-3 position-relative">
+  <h2 class="text-center mb-3 mt-3">公告标题</h2>
+  <div class="notice-body overflow-auto">
+     公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容
+  </div>
+  <div class="notice-footer border border-info text-right align-text-bottom">
+    <span>编辑管理员</span><span>编辑时间：2020-01-01</span>
+  </div>
+</div>
+</div>

src/app/forum/forum.component.scss

@@ -0,0 +1,19 @@
+.notice{
+  height: 300px;
+}
+.notice-content{
+  height: 200px;
+  border-style: solid;
+  border-width: 3px;
+}
+.notice-body{
+  max-height: 100px;
+}
+
+.notice-footer{
+  position:absolute;
+  top: 145px;
+  bottom: 0;
+  width: 100%;
+
+}

src/app/forum/forum.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForumComponent } from './forum.component';
+
+describe('ForumComponent', () => {
+  let component: ForumComponent;
+  let fixture: ComponentFixture<ForumComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ForumComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ForumComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/forum/forum.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-forum',
+  templateUrl: './forum.component.html',
+  styleUrls: ['./forum.component.scss']
+})
+export class ForumComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/height.ts

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

src/assets/i18n/en-US.json

@@ -7,9 +7,28 @@
     "manager_name": "manager name",
     "password": "password"
   },
+  "register": {
+    "confirm_pwd": "confrim password",
+    "mobie": "mobie",
+    "email": "email"
+  },
+  "reset_pwd": {
+    "code": "verification code"
+  },
+  "forum": {
+    "name": "forum",
+    "notice": "公告栏"
+  },
+  "tip":{
+    "input": "please input ",
+    "HELLO": "Hello {{value}} welcome to you"
+  },
   "button": {
     "login": "login",
     "register": "register",
-    "forget_pwd": "forget password?"
+    "forget_pwd": "forget password?",
+    "backLogin": "back",
+    "send_code": "send verification code",
+    "reset_pwd": "reset password"
   }
 }

src/assets/i18n/zh-CN.json

@@ -7,9 +7,28 @@
     "manager_name": "管理员",
     "password": "密码"
   },
+  "register": {
+    "confirm_pwd": "确认密码",
+    "mobie": "手机",
+    "email": "邮箱"
+  },
+  "reset_pwd": {
+    "code": "验证码"
+  },
+  "forum": {
+    "name": "论坛管理",
+    "notice": "公告栏"
+  },
+  "tip":{
+    "input": "请输入",
+    "HELLO": "欢迎管理员{{value}}登陆"
+  },
   "button": {
     "login": "登陆",
     "register": "注册",
-    "forget_pwd": "忘记密码？"
+    "forget_pwd": "忘记密码？",
+    "backLogin": "返回登陆",
+    "send_code": "发送验证码",
+    "reset_pwd": "重置密码"
   }
 }