最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Angular 網站實例 – 會員報告摘要篇

XAMPP下载 admin 1069浏览 0评论
 Angular 網站實例 – 會員報告摘要篇
今天開始 今天完成

先做一個報告的介面 (interface),用來指定報告的內容

報告介面
第一步: 到模型目錄 src/app/models,建立一個 report.ts 檔

ng generate interface report
第二步:修改 report.ts 如下

export interface Report {
id: number;
master: string;
image: string;
title: string;
report: string;
}
第三步: 修改 src/app/models/index.ts,加入 report

export * from ‘./user’;
export * from ‘./response’;
export * from ‘./report’;
再來做一個服務(service) 用來連結後端的資料

投顧報告服務 (report service)
第一步:到會員模組下 src/app/member, 建立一個目錄 services

mkdir services
第二步:利用 angular-cli 建立一個服務,順便註冊到模組

ng generate service reports –module member
第三步:修改 reports.service.ts

import { Injectable } from ‘@angular/core’;
import { HttpClient, HttpErrorResponse } from ‘@angular/common/http’;

import { AppConfig } from ‘../../share’;
import { Report, Response } from ‘../../models’;

import { BehaviorSubject } from ‘rxjs/BehaviorSubject’;
import { Observable } from ‘rxjs/Observable’;
import { of } from ‘rxjs/observable/of’;

@Injectable()
export class ReportsService {
reports$: BehaviorSubject<Report[]>;
constructor(
private appConfig: AppConfig,
private http: HttpClient
) {
this.reports$ = new BehaviorSubject([]);
this._getReports();
}
// get report from server
getReportsFromServer(): Observable<Response> {
return this.http.get<Response>(this.appConfig.apiUrl + ‘/reports’);
}
_getReports() {
this.getReportsFromServer()
.subscribe(res => {
if (res.success) {
this.reports$.next(res.payload);
} else {
console.log(‘server side error’);
}
}, (err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log(‘client-side error’);
} else {
console.log(‘server-side error’);
}
})
}
getReports(): Observable<Report[]> {
return this.reports$;
}
}
跟使用者服務類似,我們建立一個 BehaviorSubject,
當服務初始時,利用 HttpClient 連結後端,因為使用@auth0/angular-jwt,連結時會自動加入 token 在 http header。
回傳的資料放進 next() push 給 subscriber。
使用 BehaviorSubject,會保留最後一筆資料,所以當有新的 Subscriber 連接時,我們都有資料可以給。
建立會員報告元件
我們會用到兩個元件 (Component),一個是顯示所有報告的摘要(report-list),一個顯示一個報告的內容(report)
第一步:在 src/app/memeber 模組下建立兩個元件,它們會預設註冊到模組中

ng generate component report-list
ng generate component
第二步:修改 member-routing.module.ts 路由。

import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;

import { ReportListComponent } from ‘./report-list/report-list.component’;
import { ReportComponent } from ‘./report/report.component’;
const routes: Routes = [
{
path: ”,
children: [
{ path: ‘report-list’, component: ReportListComponent },
{ path: ‘report/:rptId’, component: ReportComponent },
{ path: ”, redirectTo: ‘report-list’, pathMatch: ‘full’ }
]
}
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MemberRoutingModule { }
我們預計使用延遲加載 (lazy loadding) 的方式載入這個模組,所以根目錄會是 ”,延遲加載會讓我們在進入網站的時間縮短,當有需要這個模組時,才會從伺服器下載這塊模組,詳情請參考官方文件

第三步:修改 src/app/app-routing.module.ts

// … 省略
const routes: Routes = [{
path: ”,
children: [
{ path: ‘home’, component: HomeComponent },
{ path: ‘user’, redirectTo: ‘/user’, pathMatch: ‘full’ },
{ path: ‘member’, loadChildren: ‘./member/member.module#MemberModule’ },
{ path: ”, redirectTo: ‘/home’, pathMatch: ‘full’ },
]
}];
//… 省略
使用 loadChildren 並指到 member 模組目錄,提供 export 的目標 #MemberModule,這樣就可以達到延遲加載的目的,一切順利的話,當您打入 http://localhost:4200/member 時,會出現下面截圖

QQ截图20181011154613
 因為使用延遲加載,當 Angular 編譯時,會多產生一個塊(Chunk),member.module.chunk.js,這個塊就會在使用者需要的時候加載
QQ截图20181011154627
 雖然現在這個塊很小,但是當模組添加功能,會越長越大。

會員報告摘要元件
第一步:修改 report-list.component.ts

import { Component, OnInit } from ‘@angular/core’;
import { Router } from ‘@angular/router’;

import { ReportsService } from ‘../services/reports.service’;
import { Report } from ‘../../models’;
import { Observable } from ‘rxjs/Observable’;
@Component({
selector: ‘app-report-list’,
templateUrl: ‘./report-list.component.html’,
styleUrls: [‘./report-list.component.css’]
})
export class ReportListComponent implements OnInit {
reports$: Observable<Report[]>;
constructor(
private reportService: ReportsService,
private router: Router
) { }

ngOnInit() {
this.reports$ = this.reportService.getReports();
}

onClick(report: Report) {
this.router.navigate([‘/member/report’, report.id

]);
}
}
使用上面的報告服務ReportService
將資料放在reports$: Observable<Report[]>中
點擊其中一個報告,路由會導進 member/report/rptId 的頁面。
第二步:我們預計使用 Angular Material 跟 @angular/flex-layout,需要修改 src/app/share/share.module.ts 如下:

import { MatToolbarModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatCheckboxModule } from ‘@angular/material’;
import { MatInputModule, MatIconModule, MatMenuModule, MatSnackBarModule} from ‘@angular/material’;
import { FlexLayoutModule } from ‘@angular/flex-layout’;
// … 省略
@NgModule({
imports: [
// … 省略
MatSnackBarModule,
FlexLayoutModule,
ReactiveFormsModule
],
exports: [
//… 省略
MatSnackBarModule,
FlexLayoutModule,
ReactiveFormsModule
],

第三步:將 share 模組加入 member模組中

//… 省略
import { ShareModule } from ‘../share’;
@NgModule({
imports: [
CommonModule,
MemberRoutingModule,
ShareModule
],
declarations: [ReportListComponent, ReportComponent],
providers: [ReportsService]
})
export class MemberModule { }
第四步:修改 report-list.component.html

<div class=”container”>
<div fxLayout=”row” fxLayout.lt

-sm=”column” fxLayoutGap=”20px” fxLayoutWrap>
<mat-card fxFlex [ngStyle.gt

-sm]=”{‘max-width’: ‘calc(25% – 20px)’}”  *ngFor=”let report of (reports$ | async)” class=”card” (click)=”onClick(report)”>
<mat-card-header fxLayout = “row” fxLayoutAlign=”start” class=”card-header” fxLayoutGap=”10px”>
<div class=”avatar-text”>
{{report.master.charAt(0)}}
</div>
<div fxFlex= “70%”>{{report.title}}</div>
</mat-card-header>
<img mat-card-image alt=”report image” src=”{{report.image}}”/>
<mat-card-content fxLayout=”column”>
{{ report.report.slice(0, 50) + ‘…’}}
</mat-card-content>
<mat-card-footer>
{{report.master}}
</mat-card-footer>
</mat-card>
</div>
</div>
說明一下:

用 Flex-Layout 來達成自適應網頁設計(Responsive Web Design),當頁面小於 .lt-sm時( mediaQuery: ‘(max-width: 599px)’),用欄顯示,也就是一張卡接著一張卡 (mat-card),請參考 Flex-Layout 官方文件,當大於 .gt-sm 時,最大寬度不超過 25% – 20px
用 mat-car 來顯示一份報告,mar-card-header 包含了投顧老師的大頭貼,這裡用第一個字代表,跟報告的標題, mat-content 包含了報告摘錄 (前 50 個字),mat-card-footer 則是投顧老師名稱
第五步:加入 report-list.component.css
稍加美化一下
.center {
display:blcok;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.card {
margin-top: 15px;
min-width: 300px;
}
.card:hover {
cursor: pointer;
}
.card-header {
min-height: 50px;
margin-bottom: 10px;
font-size: 16px;
font-weight: 800;
}
.avatar-text {
height: 50px;
width: 50px;
border-radius: 50%;
background: #eee;

text-align: center;
line-height: 50px;
font-size: 20px;
font-weight: bold;
}
好了,這時登入後,瀏覽器打入 http://localhost:4200/member 就可以見到以下截圖

QQ截图20181011154642

 

 

下次我們再來將剩下的部分做完 (report.component,前端鎖定這個路由,更新 routerLink)

 

转载请注明:XAMPP中文组官网 » Angular 網站實例 – 會員報告摘要篇

您必须 登录 才能发表评论!