# Web 開發 SOP <新增一頁要處理事項>
:::info
========= 大綱 ===============
前端:
* 前端頁面新增 (module , router ,component , 設定 menu , 設定router x3 , )
* 前端注意事項 : 確認欄位是否必填 , 確認欄位是否需驗證格式 (電話,EMail, 身份證字號)

後端 :
* 建立 DB Table
* 生成 Model , Repository
* 建立後端controler , Service
* 寫 API : Request , Response , 串DB
:::

======= 待處理事項 ===============
* 後端加 swagger
* Request , Response
*
* 前端 格式驗證
* 重設密碼 , 跳小視窗
* OK : UI 調整 : 底色
* OK : confirm dialog => 刪除功能
* 新增 file service
* OK : 建立團隊(公司) 同時加入本人進團隊(團隊owner id 待加入)
* 登入 : 若已有團隊同時傳出
* 基本 error code 定義 401 未登入 , excetion : 9007
* 定義 StatusCode 99: 完成

========================
Angular 指令

--- 新增一個目錄及一頁 ---
1: 建 module / routing / service / compoment

cd page
ng g m member --routing 
cd member
ng g c member
ng g s service/member <非必要>

2: 設定 主Routes

於 src/app/app-routing.module.ts 加入
{ path: 'member', data: { breadcrumb: 'Member' }, loadChildren: () => import('./page/member/member.module').then(m => m.MemberModule) },

3: 設定 CONTENT_ROUTES (full page 不用)

於 src/app/shared/routes/contents-layout.routes.ts 加入
{
        path: 'member',
        canActivate: [ContentRoutesAuthGuard],
        loadChildren: () =>
            import('src/app/page/member/member.module').then(
                (m) => m.MemberModule
            )
    },

4: 設定 member-routing

於 src/app/page/member/member-routing.module.ts 加入
  imports: [RouterModule.forChild([
      { path: '', component: MemberComponent },
  ])],

------- Menu 設定 ----------
Menu 設定 app.menu.component.ts

========= 後端開發事項 =============
* API http 僅使用 GET , POST , DELETE
* API 回傳要套 BaseModel
* Service 不用寫 Interface

========= 前端開發事項 =============
* 頁面call api 不寫進 service, 如有共用需求,寫進share 的service
* PIPE 的使用
* 前端 格式驗證
* Table
* confirm dialog
* 麵包屑設定在各頁面的 -routing.module.ts , 加入, data: { breadcrumb: '' },