---
# System prepended metadata

title: Web 開發 SOP <新增一頁要處理事項>
tags: [Coding Rule]

---

# 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: '' },