关于angular:angular-增删改查流程

47次阅读

共计 1346 个字符,预计需要花费 4 分钟才能阅读完成。

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。

② 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

正文完
 0