前端教案提交

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

+### 静态交易开发
+### 静态交易开发
+
+#### 1.前端项目
+
+##### 技术框架
+
+- Node
+- Vue2、VueRouter、Vuex
+- Element-UI
+- Webpack
+
+##### 目录详解
+
+> vue-gjjs
+>
+> > public
+> >
+> > src
+> >
+> > > assets 资源文件（图片、公共样式）
+> > >
+> > > components 自定义组件
+> > >
+> > > config 码表
+> > >
+> > > lang 语种资源文件、i18n国际化配置
+> > >
+> > > mixin 混入，每个交易要用到的共同功能
+> > >
+> > > model 交易的数据模型
+> > >
+> > > routers 页面的路由配置
+> > >
+> > > service 对axios的封装，请求工具类、微服务接口
+> > >
+> > > store 状态管理（vuex）
+> > >
+> > > utils 工具类
+> > >
+> > > views
+> > >
+> > > > Business 交易页面
+> > > >
+> > > > > BusRouter.js 交易路由配置
+> > > >
+> > > > Display 用于快照显示
+> > > >
+> > > > Docpan 面函相关的页面
+> > > >
+> > > > Home 首页
+> > > >
+> > > > Layout 页面整体结构布局
+> > > >
+> > > > Login 登陆页面
+> > > >
+> > > > ModelViewer 模型浏览器
+> > > >
+> > > > Public 交易的公共页面
+> > > >
+> > > > Redirect 用于标签页的刷新
+> > > >
+> > > > Review 交易的复核页面
+> > > >
+> > > > TaskList 任务列表页面
+> > >
+> > > widget 小组件
+> > >
+> > > App.vue 项目的根组件
+> > >
+> > > main.js 入口js
+> > >
+> > > permission.js 路由跳转控制
+> > >
+> > > ***前端文件目录描述视频说明***
+> > > http://114.115.138.98:9497/gjjs-book/assets/videos/fore-end-file.mp4
+
+
+
+**系统路由划分**
+
+![router](../assets/frontEndImg/route.png)
+
+**单个交易模块划分**
+
+![router](../assets/frontEndImg/vue-module.png)
+
+**国结交易页面结构组成图**
+![router](../assets/frontEndImg/国结交易页面结构图.png)
+
+#### 2.静态交易
+
+##### 介绍
+
+​		每个静态交易xxx（例：pty），都有5个交易Infxxx（查询）、Dbixxx（详情）、Dbexxx（修改）、Dbdxxx（删除）、Dbaxxx（新增）,其中Infxxx为查询入口，其他四个页面相似。我们将Dbixxx做好后，Dbexxx、Dbdxxx、Dbaxxx复用Dbixxx的页面，用props控制表单的禁用状态。
+
+##### 准备工作
+
+###### 1.json文件存放位置
+
+![router](../assets/frontEndImg/jsonFolder.png)
+
+![router](../assets/frontEndImg/StaticBusiness.png)
+
+
+
+###### 2.获取实体类对应json
+
+![router](../assets/frontEndImg/getJSON.png)
+
+
+
+###### 3.生成json.js
+
+![router](../assets/frontEndImg/jsonJS.png)