前端教案提交

前端项目开发/静态交易开发.md

-### 静态交易开发
+### 静态交易开发
@@ -112,3 +112,128 @@
 ###### 3.生成json.js
 
 ![router](../assets/frontEndImg/jsonJS.png)
+
+
+
+###### 4.生成html表单项
+
+用开发软件打开存放json的文件夹，在终端运行：
+
+```shell
+node index.js
+```
+
+![image-20230223092455001](../assets/frontEndImg/htmlForm.png)
+
+会生成对应的html表单项。
+
+*注：生成的表单项都为input，我们需要对照td上表数据的描述，将其改为对应的checkbox , select , date, currency ,amount,input，numeric。*
+
+
+
+###### 4.修改json文件存放位置中的ddl.js文件
+
+***（其中ddl.js是entity表的ddl语句，可从数据库工具中导出各自对应的表）***
+
+![image-20230223094934152](../assets/frontEndImg/ddlJS.png)
+
+
+
+###### 6.生成表单校验的pattern
+
+在终端运行：
+
+```shell
+node pattern.js
+```
+
+![image-20230223094439745](../assets/frontEndImg/patternJS.png)
+
+生成对应的表单校验对象。
+
+
+
+##### 开始开发
+
+###### 1.接口的定义
+
+参考src/service/test/zmqxrt.js
+
+![image-20230223105754348](../assets/frontEndImg/interface.png)
+
+
+
+###### 2.Infxxx(Ddlxxx)开发------查询页面
+
+*infxxx与dblxxx均是静态交易查询，仅仅知识命名方式不同，其他一致。*
+
+查询条件参考TD。Infsea.vue可直接复制过去修改。
+
+页面参考src/views/Statics/Dblzmq/index.vue、src/views/Statics/Dblzmq/Infsea.vue
+
+![image-20230223110018862](../assets/frontEndImg/infxxx.png)
+
+
+
+
+
+###### 3.Dbixxx开发------详情页面
+
+参考src/views/Statics/Dbizmqxrt/index.vue，可直接复制过去修改。
+
+表单form的model，来自于前面生成的json，校验rules来自前面生成的xx.pattern.js。
+
+注：
+
+1、 表单model的某些字段无需显示，像inr之类的，我们要去掉对应的标签代码；
+
+2、有些表单有多个entity构成，我们需要将对应的xx.pattern.js合到一起，注意
+
+<el-form-item label="xxx " prop="xxx">，prop要与rules中的属性对应；
+
+
+
+
+
+###### 4.Dbexxx开发------编辑页面
+
+页面复用Dbixxx，使用方式参考src/views/Statics/Dbezmq/index.vue。
+
+传入title、type两个props。
+
+![image-20230223134158695](../assets/frontEndImg/zmqEdit.png)
+
+
+
+
+
+
+
+###### 5.Dbaxxx开发------新增页面
+
+页面复用Dbixxx，使用方式参考src/views/Statics/Dbazmq/index.vue。
+
+传入title、type两个props。
+
+![image-20230223134353397](../assets/frontEndImg/zmqAdd.png)
+
+
+
+
+
+###### 6.Dbdxxx开发------删除页面
+
+页面复用Dbixxx，使用方式参考src/views/Statics/Dbdzmq/index.vue。
+
+传入title、type两个props。
+
+![image-20230223134605951](../assets/frontEndImg/zmqDel.png)
+
+
+
+#### 3.路由设置
+
+每一项的name值与对应vue组件的name属性相同。dbixxx、dbexxx、dbdxxx为动态路由。
+
+![image-20230223141147693](../assets/frontEndImg/routerSetting.png)
+