---
# System prepended metadata

title: web 開發流程
tags: [Coding Rule]

---

# web 開發流程  Ray 編輯中

=========  大綱   ===============
**新增一頁要處理事項**
前端:
* 前端頁面新增 (module , router  ,component , 設定 menu , 設定router x3  ,   ) 
   
* 前端注意事項 : 確認欄位是否必填 , 確認欄位是否需驗證格式 (電話,EMail, 身份證字號)
  
後端 :  
* 建立 DB Table 
* 生成 Model  , Repository
* 建立後端controler  , Service
* 寫 API : Request , Response ,  串DB
 
 
======= 待處理事項 ===============



========================
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 },
  ])],
```


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


=========  前端開發事項  =============
* 頁面call api 不寫進 service, 如有共用需求,寫進share 的service
* PIPE 的使用
*  前端 格式驗證
*  Table
*  confirm dialog