PrimeNg

PrimeNG 是一個基於 Angular 的開源 UI 庫，提供了許多現代化且易於使用的 UI 元件和功能。它具有豐富的視覺效果和動畫，可以幫助開發人員快速構建出色的前端資料顯示界面。PrimeNG 還提供了豐富的主題選擇和自定義選項，以滿足各種專案的需求。

使用 PrimeNG 中的許多元件和指令來建立數據表格、表單、對話框、下拉選單等常見的前端資料顯示元素。這些元件具有豐富的功能和配置選項，可以輕鬆實現數據的展示、編輯、篩選等操作。

PrimeNG 還提供了許多有用的工具和服務，例如表格排序、篩選和分頁、表單驗證、通知訊息、圖表等。這些工具可以大大提高開發效率和用戶體驗。

參考：https://primeng.org/

簡易前端顯示

div style="text-align:center">
<h4>test works!</h4>
  <h2>
    {{ userData }}
  </h2>
  <div class="card flex justify-content-center">
    id:<input pInputText pKeyFilter="int" placeholder="Integers" #userId/>
    name:<input type="text" pInputText #name/>
    description:<input type="text" pInputText #description/>
  </div>
  <div class="card flex justify-content-center">
    <h3><p>sqlite</p></h3>
    <p-button label="使用者讀取" styleClass="p-button-success" icon="pi pi-book" (click)="getUser(parseInt(userId.value));"></p-button>
    <p-button label="使用者儲存" styleClass="p-button-success" icon="pi pi-book" (click)="saveUser(parseInt(userId.value),name.value,description.value);"></p-button>
    <p-button label="使用者刪除" styleClass="p-button-success" icon="pi pi-book" (click)="deleteUser(name.value)"></p-button>
  </div>
  <div class="card flex justify-content-center">
    <h3><p>JsonDB</p></h3>
    <p-button label="使用者讀取" styleClass="p-button-success" icon="pi pi-book" (click)="getJsonDB(name.value);"></p-button>
    <p-button label="使用者儲存" styleClass="p-button-success" icon="pi pi-book" (click)="saveJsonDB(name.value,description.value)"></p-button>
    <p-button label="使用者刪除" styleClass="p-button-success" icon="pi pi-book" (click)="deleteJsonDB(name.value)"></p-button>
  </div>
</div>

資料讀取

export class TestComponent {
  userData: any;
  constructor(private userService: UserService,private neDBService: neDBService) {
  }

  getUser(id:number) {
    this.userService.getUser(id).subscribe((data: any) => {
      const result = JSON.stringify(data);
      console.log(result);
      this.userData = result;
    });
  }

  saveUser(id: number, name: string, description: string) {
    const user = new User();
    user.id = id;
    user.name = name;
    user.description = description;

    this.userService.saveUser(user).subscribe((data: any) => {
      const result = JSON.stringify(data);
      console.log(result);
    });
  }

  deleteUser(name: string) {
    this.userService.deleteUser(name).subscribe((data: any) => {
      const result = JSON.stringify(data);
      console.log(result);
    });
  }

  getJsonDB(name:string) {
    this.neDBService.getJsonDB(name).subscribe((data: any) => {
      const result = JSON.stringify(data);
      console.log(result);
      this.userData = result;
    });
  }

  saveJsonDB(name:string,description:string) {
    this.neDBService.saveJsonDB(name,description).subscribe((data: any) => {
      const result = JSON.stringify(data);
      console.log(result);
    });
  }

  deleteJsonDB(name:string) {
    this.neDBService.deleteJsonDB(name).subscribe((data: any) => {
    });
  }

}

顯示結果

小結

本日完成基本軟體架構ＵＩ顯示功能，基本流程上已建立，之後預計開始定義和規劃專案功能，並梳理軟體分層，期許最後完成最後打包輸出．