iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
0
Modern Web

用Angular打造完整後台系列 第 6

day06 json-server 模擬與 Model 建置(二)

簡述

上一篇大概說明模擬數據的認知,
這篇就快速帶過安裝跟執行json-server,
以及相關的model建置。


實作

(一) json-server流程

指令:

npm install -g json-server

在根目錄創db.json:

內容請參照下方#範例網。

啟動json-server

json-server db.json

如果是mac電腦,若出現一直notfound db.json的話,
要記得設定路徑。


(二) Model建置

因使用強型別typescript,
所以建置model時就會設定好變數型別,
有利於開發時在傳接值降低出錯率。

  • 首先建立 model 資料夾
  • 並分別建立與 json-server 對應的模型資料

檔案結構

-src
  |-app
    |-app.component.css
    |-app.component.html
    |-app.component.ts
    |-app.module.ts
    |-model
        |-base.ts
        |-data
            |-admin.ts
            |-customer.ts
            |-product.ts 
            |-order.ts 
            |-user.ts 
            |-index.ts 

--

Admin Model:

export interface IAdmin {
  id?: number;
  name: string;
  account: string;
  password: string;
  status: number;
  holds?: IHold[];//關聯"holds"
  token: string;
  insertBy: number;
  inserted: number;
  updateBy: number;
  updated: number;
}

export interface IPower {
  id: number;
  name: string;
  check?: boolean;
}

export interface IHold {
  id?: number;
  adminId: number;//關聯"admins"
  powerId: number;
  power?: IPower;//關聯"powers"
}

--

Customer Model:

export interface ICustomer {
  id?: number;
  name: string;
  levelId: number;
  account: string;
  password: string;
  status: number;
  updateBy: number;
  updated: number;
  insertBy: number;
  inserted: number;
  level?: ILevel;//關聯"levels"
}

export interface ILevel {
  id?: number;
  name: string;
}

--

Product Model:

export interface IProduct {
  id: number;
  typeId: number;
  name: string;
  price: number;
  status: number;
  file: string;
  type?: IType;//關聯"types"
  updateBy: number;
  updated: number;
  insertBy: number;
  inserted: number;
}

export interface IType {
  id: number;
  name: string;
}

--

Order Model:

import { IProduct } from "./product";
import { ICustomer } from "./customer";

export interface IOrder {
  id: number;
  customerId: number;
  cars?: IOrderCar[];//關聯"cars"
  status: number;
  customer?: ICustomer;//關聯"customers"
  updateBy: number;
  updated: number ;
  insertBy: number;
  inserted: number;
}

export interface IOrderCar {
  id: number;
  orderId: number;
  productId: number;
  amount: number;
  product?: IProduct;//關聯"products"
}

--

User Model:

這個在 json-serverdb.json裡並沒有相對應,
理論上後台登入都是管理者身份,所以user應該是Admin Model

但是實務上會遇到,
很多需要紀錄此登入者的相關行為,
所以多半會另外設定一個User Model

流程會在一開始登入後,
就會把此admin的資料先複製到user去。

import { IHold } from "./admin";

export interface IUser {
  id: number;
  name: string;
  account: string;
  password: string;
  status: number;
  token: string;
  holds: IHold[];//關聯"holds"
}

--

index.ts:

最後為了方便匯入model各個檔案,
會在src/app/model/底下建置index.ts檔。

export * from "./user";
export * from "./admin";
export * from "./customer";
export * from "./product";
export * from "./order";

需匯入時

import { IAdmin,ICustomer,IProduct,IOrder,IUser } from "../model/";

那還有個問題,有的時候會呼叫所有model型別,
總不可能呼叫一個model型別寫一個function,
所以最後用type聯合類型。

import { ICustomer, ILevel } from "./customer";
import { IProduct, IType } from "./product";
import { IUser } from "./user";
import { IAdmin, IPower, IHold } from "./admin";
import { IOrder, IOrderCar } from "./order";

export * from "./user";
export * from "./admin";
export * from "./customer";
export * from "./product";
export * from "./order";

export type IModel =
  | IUser
  | IAdmin
  | IPower
  | IHold
  | ICustomer
  | ILevel
  | IProduct
  | IType
  | IOrder
  | IOrderCar;

範例碼

https://stackblitz.com/edit/ngcms-service


上一篇
day05 json-server 模擬與 Model 建置(一)
下一篇
day07 共用service(一)
系列文
用Angular打造完整後台30

尚未有邦友留言

立即登入留言