国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin(六)

bingo / 446人閱讀

摘要:注意在配置完成后,需要重新啟動(dòng)項(xiàng)目使配置生效。每一行的內(nèi)容,由數(shù)據(jù)內(nèi)容決定,例如有三條數(shù)據(jù),應(yīng)顯示三行數(shù)據(jù),數(shù)據(jù)由組件自身請(qǐng)求獲取,所以應(yīng)該有一個(gè)自身的屬性用于承載數(shù)據(jù)。注意這里將換成了,所以組件的也需要替換,否則會(huì)報(bào)錯(cuò)。

使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin(六) 完善動(dòng)態(tài)表單組件

先來張本章節(jié)最終效果圖

抽離公共項(xiàng),優(yōu)化引入方式

添加樣式,使我們的項(xiàng)目更加美觀

創(chuàng)建動(dòng)態(tài)表格組件

配置頁(yè)面生成文件,自動(dòng)化生成

抽離公共項(xiàng),優(yōu)化引入方式
重復(fù)的代碼就是失敗的代碼,所以寫代碼也是一個(gè)持續(xù)優(yōu)化的過程。

我們需要用到增刪改查,上一章利用 dynamic-form.service.ts 完成了“增”的操作,現(xiàn)在利用同樣的文件,完成我們的查詢工作,既然用到同一個(gè)服務(wù),所以我們需要把文件抽離,讓它更像一個(gè)公共文件。

dynamic-form/dyanmic-form.service.ts -> api/http/dynamic.service.ts

import { Observable } from "rxjs/Observable";
import "rxjs/Rx";
import { Injectable } from "@angular/core";
import { HttpClient, HttpEvent, HttpHeaders } from "@angular/common/http";
import { HttpComponentUtil } from "../../../pages/api/http/http.service";
import { HandleService } from "../../../pages/api/http/handle.service";

@Injectable()
export class DynamicService {
  constructor(
    private http: HttpClient,
    private https: HttpComponentUtil,
    private handleService: HandleService
  ) {}

  public getList(url: string, params: {} = {}): Observable {
    let api_url: string = this.https.getUrl(url);
    return this.http.get(api_url, params)
    .map((res: any) => (this.handleService.handleStatus(res)).value || undefined)
    .catch(err => this.handleService.handleError(err));
  }

  /**
   *
   *
   * @param {string} url
   * @param {{}} [params={}] 請(qǐng)求入?yún)⒌?body,參數(shù)
   * @returns {Observable}  返回一個(gè)可供訂閱的觀察者對(duì)象
   * @memberof DynamicService
   *
   *
   */
  public saveQuery(url: string, params: {} = {}): Observable {
    let api_url: string = this.https.getUrl(url); // 利用公用的 http 服務(wù),拼接獲取url
    return this.http.post(api_url, params, {
      headers: this.https.headers
    })
    .map((res: any) => (this.handleService.handleStatus(res)).value || undefined) // 捕獲錯(cuò)誤碼
    .catch(err => this.handleService.handleError(err)); // 捕獲系統(tǒng)錯(cuò)誤
  }
}

如上述代碼,同時(shí)添加一個(gè) getList 方法,讓它有了查詢的功能,現(xiàn)在還需要做兩件事情,先思考一下

api/index.ts 導(dǎo)出這個(gè)服務(wù),使其自動(dòng)注入到 PagesModule

刪除原有文件 dynamic-form.service.ts 及相關(guān)信息

把時(shí)間都用在 如何找尋相對(duì)路徑 這個(gè)問題上,是非常浪費(fèi)時(shí)間的一件事情

在此之前,項(xiàng)目的引入方式都是相對(duì)路徑,我們現(xiàn)在來修改配置,然后使路徑引入變成相對(duì)路徑,這里需要修改
tsconfig.json

...
"paths": {
  "@angular/*": ["../node_modules/@angular/*"],
  "@components/*": ["../src/app/theme/components/*"],
  "@api/*": ["../src/app/pages/api/*"]
}
...

其中有一個(gè)選項(xiàng),在之前升級(jí)的過程中已經(jīng)添加,根據(jù)第一項(xiàng),可以推斷出新增的兩個(gè)選項(xiàng)的用途,在下面的教程中會(huì)統(tǒng)一使用該方式引入,在后面配置問題將不再重復(fù),需要讀者自行添加。
注意:在配置完成后,需要重新啟動(dòng)項(xiàng)目使配置生效。

添加樣式,使我們的項(xiàng)目更加美觀
好看的網(wǎng)頁(yè)離不開優(yōu)秀的設(shè)計(jì),我們需要盡我們所能,優(yōu)化頁(yè)面的樣式。

在此之前,項(xiàng)目還沒有重置過樣式,所以我們需要去優(yōu)化一下我們的樣式

npm i reset.css -D

pages.component.ts

...
import "style-loader!reset.css";
import "style-loader!sweetalert2/dist/sweetalert2.min.css";
import "style-loader!@api/universal/style.scss";
...

@api/universal/style.scss

.default-style {
  h1 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 25px;
  }
}

注意:使用 import 引入的樣式將會(huì)無差別影響到所有的樣式,所以除了公用樣式,其他都使用 styleUrls 的方式引入

創(chuàng)建動(dòng)態(tài)表格組件
在修改代碼的時(shí)候,大概 60%-70% 的時(shí)間都在讀之前的代碼。

我們需要?jiǎng)?chuàng)建一個(gè)動(dòng)態(tài)表格組件,對(duì)應(yīng)的我們應(yīng)該先創(chuàng)建一些聲明文件,作為起步,同時(shí)也可以讓自己知道自己在創(chuàng)造什么,項(xiàng)目結(jié)構(gòu)如下圖。

和動(dòng)態(tài)表單類似,我們先創(chuàng)建
dynamic-table-base/tableItem-base.ts

export class TableBase {
  controlType: string; // 類型
  title: string; // 值,類型可選
  key: string; // 字段名
  order: number; // 排序
  constructor(
    options: {
      controlType?: string;
      title?: string;
      key?: string;
      order?: number;
    } = {}
  ) {
    // 設(shè)置各個(gè)值的默認(rèn)值
    this.controlType = options.controlType || "";
    this.title = options.title || "";
    this.key = options.key || "";
    this.order = options.order || 0;
  }
}

dynamic-table-base/tableItem-text.ts

import { TableBase } from "./tableItem-base";

export class TextTable extends TableBase {
    controlType = "text";

    constructor(options: {} = {}) {
        super(options);
    }
}

dynamic-table/table-base.ts

export interface TableConfig {
  url: string;
  params?: TableParams;
}

// 請(qǐng)求接口的一些參數(shù)
interface TableParams {
  pageSize?: number;
  pageNumber?: number;
}

準(zhǔn)備工作到此結(jié)束,現(xiàn)在準(zhǔn)備來創(chuàng)建我們的動(dòng)態(tài)表格組件

開發(fā)組件時(shí),需要考慮可擴(kuò)展性

我們的表格組件應(yīng)該有展示功能,規(guī)定顯示幾列,每一列的內(nèi)容應(yīng)該由頁(yè)面?zhèn)魅耄瑪?shù)據(jù)來源的 url 應(yīng)該也由頁(yè)面配置傳入,所以我們會(huì)有兩個(gè) Input 屬性。
每一行的內(nèi)容,由數(shù)據(jù)內(nèi)容決定,例如有三條數(shù)據(jù),應(yīng)顯示三行數(shù)據(jù),數(shù)據(jù)由組件自身請(qǐng)求獲取,所以應(yīng)該有一個(gè)自身的屬性用于承載數(shù)據(jù)。

export class DynamicTableComponent implements OnInit{
  @Input() config: TableConfig;
  @Input() tableControls: TableBase[];
  public tableDatas: any[];
}

在加載組件時(shí),應(yīng)該自動(dòng)請(qǐng)求數(shù)據(jù),組件的最終效果如下
dynamic-table.component.ts

import { Component, Input, OnInit } from "@angular/core";

import { TableConfig } from "./table-base";
import { TableBase } from "./dynamic-table-base/tableItem-base";
import { DynamicService } from "@api/http/dynamic.service";

@Component({
  selector: "dynamic-table",
  templateUrl: "./dynamic-table.component.html",
  styleUrls: ["./dynamic-table.component.scss"]
})
export class DynamicTableComponent implements OnInit{
  @Input() config: TableConfig;
  @Input() tableControls: TableBase[];
  public tableDatas: any[];

  constructor(private service: DynamicService) {}

  private getTableDatas(): void {
    this.service.getList(this.config.url, this.config.params)
      .subscribe((res: any[]) => {
        console.log(res);
        if (res.length > 0) {
          this.tableDatas = res;
        }
      })
  }

  ngOnInit(): void {
    this.getTableDatas();
  }
}

dynamic-table.component.html

{{tableControl.title}}
  • {{tableData[tableControl["key"]]}}
  • {{tableData | json}}

dynamic-table.component.scss

.table thead tr th {
  background: rgba(0,0,0,.3);
  color: #fff;
  font-size: 16px;
  border-top: none;
}

.table tbody > :first-child td {
  border-top: none;
}

這樣動(dòng)態(tài)表格組件的基本樣式就完成,最后別忘了在 nga.module.ts 中注冊(cè)該組件。

注意:這里將 service 換成了 DynamicService, 所以 form 組件的 service也需要替換,否則會(huì)報(bào)錯(cuò)。

配置頁(yè)面生成文件,自動(dòng)化生成

組件已經(jīng)構(gòu)建完成,頁(yè)面的配置和 form 組件的使用方法類似,這里直接貼代碼

user-list.component.ts

import { Component } from "@angular/core";

import { UserListService } from "./user-list.service";
import { TableBase } from "@components/dynamic-table/dynamic-table-base";
import { TableConfig } from "@components/dynamic-table/table-base";

@Component({
    selector: "ngt-user-list",
    templateUrl: "./user-list.component.html",
    providers: [ UserListService ]
})

export class UserListComponent {
  public userTableControls: TableBase[];
  public userTableConfig: TableConfig = {
    url: "user"
  };

  constructor(private service: UserListService) {
    this.userTableControls = this.service.getTableControls();
  }
}

user-list.component.html

用戶列表組件

user-list/user-list.service.ts

import { Injectable } from "@angular/core";

import {
  TableBase,
  TextTable
} from "@components/dynamic-table/dynamic-table-base";

@Injectable()
export class UserListService {
  getTableControls() {
    let tableControls: TableBase[] = [
      new TextTable({
        key: "id",
        title: "ID",
        order: 0
      }),

      new TextTable({
        key: "firstName",
        title: "名稱",
        order: 1
      }),

      new TextTable({
        key: "emailAddress",
        title: "Email",
        order: 2
      }),

      new TextTable({
        key: "brave",
        title: "Brave",
        order: 3
      })
    ];

    return tableControls.sort((a, b) => a.order - b.order);
  }
}

大功告成,現(xiàn)在可以打開瀏覽器,嘗試先進(jìn)入新增頁(yè)面,新增一個(gè)用戶,在成功返回后,會(huì)在表格頁(yè)面查詢到自己新增的數(shù)據(jù),這樣就完成了簡(jiǎn)單的數(shù)據(jù)展示。

現(xiàn)在表格還有幾個(gè)優(yōu)化的點(diǎn)

數(shù)據(jù)過多時(shí),需要分頁(yè)

缺少搜索功能

缺少刪除功能

在后續(xù)文章,會(huì)陸續(xù)添加這些功能!

(此章代碼在ng2-admin 的 dynamic-table 分支上,可以pull 下來,方便讀者練習(xí))

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/90667.html

相關(guān)文章

  • 使用ng2-admin搭建成熟可靠后臺(tái)系統(tǒng) -- ng2-admin(三)

    摘要:使用搭建成熟可靠的后臺(tái)系統(tǒng)三完善動(dòng)態(tài)表單添加樣式。下一章會(huì)講解,一個(gè)集成的服務(wù),來完成我們的提交,在將來的篇章里會(huì)在我們的組件中加入使其變得更加靈活。 使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin(三) 完善動(dòng)態(tài)表單 添加樣式。 抽離組件。 添加組件樣式 上一篇文章創(chuàng)建了兩個(gè),組件,現(xiàn)在使用bootstrap來給他們添加一些樣式 首先需要一個(gè)公用的 s...

    張憲坤 評(píng)論0 收藏0
  • 使用ng2-admin搭建成熟可靠后臺(tái)系統(tǒng) -- ng2-admin(四)

    摘要:使用搭建成熟可靠的后臺(tái)系統(tǒng)四完善動(dòng)態(tài)表單組件添加正則驗(yàn)證添加錯(cuò)誤提示添加正則驗(yàn)證先來設(shè)置一些錯(cuò)誤提示,以及添加正則驗(yàn)證上一章可能遺留了部分路徑錯(cuò)誤,可以自行調(diào)整郵箱格式不正確請(qǐng)選擇這里是提供的一些正則 使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin(四) 完善動(dòng)態(tài)表單組件 添加正則驗(yàn)證 添加錯(cuò)誤提示 添加正則驗(yàn)證 先來設(shè)置一些錯(cuò)誤提示,以及添加正則驗(yàn)證(...

    HtmlCssJs 評(píng)論0 收藏0
  • 使用ng2-admin搭建成熟可靠后臺(tái)系統(tǒng) -- ng2-admin(二)

    摘要:使用搭建成熟可靠的后臺(tái)系統(tǒng)二構(gòu)建動(dòng)態(tài)表單構(gòu)建一個(gè)動(dòng)態(tài)表單,動(dòng)態(tài)生成控件,驗(yàn)證規(guī)則。現(xiàn)在來創(chuàng)建它的子組件從上面的組件可以看出,未來需要添加組件時(shí),只需要添加一種類型,可以用決定顯示哪種類型的問題。 使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin(二) 1.構(gòu)建動(dòng)態(tài)表單 構(gòu)建一個(gè)動(dòng)態(tài)表單,動(dòng)態(tài)生成控件,驗(yàn)證規(guī)則。 創(chuàng)建一個(gè)input組件,一個(gè)select組件 將...

    FleyX 評(píng)論0 收藏0
  • 使用ng2-admin搭建成熟可靠后臺(tái)系統(tǒng) -- ng2-admin(五)

    摘要:創(chuàng)建一個(gè)工具類,負(fù)責(zé)提供以及完成拼接參數(shù)的工作。根據(jù)我們的配置,來創(chuàng)建這個(gè)文件。因?yàn)槭潜韱翁峤唬晕覀冃陆ㄒ粋€(gè)服務(wù),由它來完成表單提交的最后一步。 使用ng2-admin搭建成熟可靠的后臺(tái)系統(tǒng) -- ng2-admin(五) 完善動(dòng)態(tài)表單組件 升級(jí)Angular 4.1 -> 4.3 添加 json-server 模擬數(shù)據(jù) 創(chuàng)建自己的 http 完成一次表單提交 升級(jí)Angu...

    MiracleWong 評(píng)論0 收藏0
  • 手游開發(fā)如何選擇后端服務(wù)

    摘要:云函數(shù)是萬金油為實(shí)現(xiàn)用戶游戲數(shù)據(jù)存儲(chǔ)和每日任務(wù)分發(fā),我們最先用了存儲(chǔ)服務(wù)和云引擎。不過我們并沒有用提供的來直接調(diào)用存儲(chǔ)服務(wù),而是選擇用調(diào)用云引擎里面的云函數(shù),然后通過云函數(shù)調(diào)用存儲(chǔ)服務(wù)來實(shí)現(xiàn)相應(yīng)的邏輯。 【 玩轉(zhuǎn) LeanCloud 】開發(fā)者投稿分享: 作者:趙天澤 作為一個(gè)通過 LeanCloud 入門后端開發(fā)的小白,一年多的開發(fā)歷程讓我收獲滿滿。多個(gè)項(xiàng)目也在 LeanCloud 可...

    codecook 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<