Commit 6fb42efa by 郭旭

Merge remote-tracking branch 'origin/master'

parents 0c8e9bb6 11c05a6d
# 公共面 # 公共面
...@@ -115,7 +115,9 @@ ...@@ -115,7 +115,9 @@
仅列举部分,其余可查看vue-gjjs/src/views/Public内的公共模板 仅列举部分,其余可查看vue-gjjs/src/views/Public内的公共模板
### 1、例如detopn/ovwp中的受益人引用了ptap模板 ### 1、ptap模板
例如detopn/ovwp中的受益人引用了ptap模板
![](../assets/frontEndImg/detopnCommonPtap.png) ![](../assets/frontEndImg/detopnCommonPtap.png)
...@@ -141,3 +143,14 @@ ...@@ -141,3 +143,14 @@
请参照*[表格公共模板](../../../../../../assets/images/03-新国结产品开发/pdf/表格公共模板.pdf) 请参照*[表格公共模板](../../../../../../assets/images/03-新国结产品开发/pdf/表格公共模板.pdf)
![](../assets/frontEndImg/docpre.jpg) ![](../assets/frontEndImg/docpre.jpg)
## 3、复核面板引用
\#复核 交易完成后添加 "复核" 操作
#### 1、在 "Review/Business" 建立相应的vue页面
#### ![img](../assets/frontEndImg/trnrelNewPanel.png)2、在 "Review/ReviewRouter.js" 配置相应路由
#### ![img](../assets/frontEndImg/trnrelRouter.png) 3、在对应交易的 "index.vuw" 页面初始化后加入读取快照操作 ![img](../assets/frontEndImg/trnrelDisplay.png)
## 前端开发调试文档
## 前端开发调试文档
#### 前端调试
***视频教程***
http://114.115.138.98:9497/gjjs-book/assets/videos/fore-end-debug.mp4
##### 1.观察XHR(异步请求)(TODO)
F12打开开发者工具,选中Network,可看到当前页面的所有资源请求。我们只需关注XHR请求,故在过滤条件中选中Fetch/XHR选项,剩下的就是XHR请求了。
![查看请求](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_1.png)
单击其中的某一个请求,可以看到该请求的详细信息,如下所示
![查看请求](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_2.png)
##### 2.观察响应数据
请求响应的结果在Preview和Response栏里,二者展示的形式不一样。
Preview模式
![响应结果预览](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_3.png)
Response模式
![响应结果1](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_4.1.png)
![响应结果2](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_4.2.png)
响应数据的属性:
![响应结果属性](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_5.png)
观察Response请求
##### 3.如何打前端断点
前端项目是通过Webpack进行加载的,我们编写的源文件在 webpack:// 目录下。其中 .vue 文件都在 webpack:///src下,.js文件都在 webpack:///./src 目录下
![源文件](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_6.png)
在需要调试的代码位置点一下,断点就标记完成,后面程序在执行到这一步时会停下来。
![标记断点](../../gjjs-lessons/assets/images/03-新国结产品开发/image/front_debug_7.png)
调试的常用按钮
![断点调试](../../../../../assets/images/03-新国结产品开发/image/front_debug_8.png)
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment