angular 增删改查流程

对方正在输入

1、 项目开发过程
Eg:系统设置 -> 居民关系管理 (system -> relationship)
(1) 初始化居民关系管理模块
创建模块
使用shell来到src\app\system文件夹,执行ng g module relationship命令。
效果:
relationship
└──relationship.module.ts

(2) 初始化居民关系管理实体、mockapi、service层
创建实体文件:web/src/entity/relationship.ts
Mockapi文件:web/src/api/relationship.api.ts并更新导入web/src/api/apis.ts文件
Service文件:web/src/service/relationship.service.ts和web/src/service/relationship.service.spec.ts

(3) 功能原型
index原型,新增原型,编辑原型

eg:编辑原型
① 生成组件
使用shell进入src/app/system文件夹,执行创建组件命令:ng g c edit。
效果:
relationship
├── edit
│ ├── edit.component.css
│ ├── edit.component.html
│ ├── edit.component.spec.ts
│ └── edit.component.ts
├── relationship.module.ts

并更新了模块文件relationship.module.ts。

若保存不止一个module,则命令后加上“--module=app”指定module文件:
image.png

② edit.component.html文件
编写页面

(4) 表单检验
add、edit表单检验
① web/src/app/system/relationship/edit/edit.component.html
image.png

② web/src/app/system/relationship/edit/edit.component.ts
image.png

③ web/src/app/system/relationship/edit/edit.component.spec.ts
import {ReactiveFormsModule} from ‘@angular/forms’;

④ web/src/app/system/relationship/relationship.module.ts
import {ReactiveFormsModule} from ‘@angular/forms’;

(5) 实现原型
index使用MockApi完成分页功能、index查询功能
新增功能
编辑功能
删除功能

2、 eg:编辑功能的数据流
image.png
提交前:
(1)web/src/app/system/relationship/edit/edit.component.ts
image.png

(2)web/src/service/relationship.service.ts
image.png

(3)web/src/api/relationship.api.ts
image.png

点击保存按钮后:
(1)web/src/app/system/relationship/edit/edit.component.ts
image.png

(2)web/src/service/relationship.service.ts
image.png

(3)web/src/api/relationship.api.ts
image.png

阅读 110
6 声望
1 粉丝
0 条评论
你知道吗?

6 声望
1 粉丝
宣传栏