angular 增删改查流程 angular

1、项目开发过程
Eg：系统设置 -> 居民关系管理（system -> relationship）
（1）初始化居民关系管理模块
创建模块
使用shell来到src\app\system文件夹，执行ng g module relationship命令。
效果：
relationship
└──relationship.module.ts
【angular 增删改查流程】（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。
② edit.component.html文件
编写页面
（4）表单检验
add、edit表单检验
① web/src/app/system/relationship/edit/edit.component.html

文章图片

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

文章图片

③ 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：编辑功能的数据流

文章图片

提交前：
（1）web/src/app/system/relationship/edit/edit.component.ts

文章图片

（2）web/src/service/relationship.service.ts

文章图片

（3）web/src/api/relationship.api.ts

文章图片

点击保存按钮后：
（1）web/src/app/system/relationship/edit/edit.component.ts

文章图片

（2）web/src/service/relationship.service.ts

文章图片

（3）web/src/api/relationship.api.ts

文章图片

angular 增删改查流程

推荐阅读

原神前期材料怎么刷原神前期材料使用指南

原神古时孤影第三阶段有什么技巧原神古时孤影第三阶段心得

x7|2000元档颜值最高的机型？曲面屏+65W闪充，还有256G大内存

姐弟恋超过6岁都不长久姐弟恋英语

是什么让男人失去了娶你的勇气

缓解节后综合征七药膳帮你快速恢复健康身体

吃活珠子的禁忌

vr飞行游戏配置，vr飞行模拟游戏

决明子荷叶茶怎样喝才减肥

go语言常量变量教学视频 go语言%c

男式毛衣有哪些花样 7步教你男士毛衣马甲花样编制

新手应该从哪些方面来学习理财？

原神元素反应是什么原神元素反应简介

2021车险三者险价格明细 2021车损险费率

【剽悍牛人进化营求学模块】一个奔五的人在求学模块的反思

cad如何做图纸表格

韩涵一事后续来临,虎牙官方做法引无数网友不满,纷纷表示要卸载虎牙,如何点评？

今麦郎“凉白开”采用UHT125℃超高温烧开杀菌,可标压下水的沸点是99.974℃,是如何做到125℃的？

2023独生子女父母补贴最新发放标准,养老金3600和7200领取金额差多少？

熟的冻螃蟹怎么二次加热