## 前言

### 1. 简介

R7动态模板是iBiz平台提供的一套全新的前端解决方案(以下简称前端动态模板),基于消费iBiz模型进行开发扩展。从某种意义上来讲,我们可以把它理解成解释器,根据所获取的iBiz模型数据(以下简称模型数据)和前端技术融合进行解释,绘制界面。需要注意的是,在这一过程中,它不关注模型数据的来源,只专注于自己解释模型数据,这样就提供了获取模型数据的灵活性,为实现业务提供了更多的可能,目前支持远端和本地2种方式来获取模型数据。本文档主要介绍该前端动态模板的整体架构、主要体系及二次开发做一阐述,旨在能够为开发人员提供一定开发指导支持。而今框架开源,希望能有更多志同道合的伙伴参与迭代 ^_^

### 2.开发语言:

`TypeScript`、`less`、`html`

### 3.技术选型:

- 前端MVVM框架:vue.js
- 路由:vue-router
- 状态管理:vuex
- 国际化:vue-i18n
- 数据交互:axios
- UI框架:element-ui , view-design
- 工具库:qs, path-to-regexp, rxjs,moment
- 图标库:font-awesome
- 图表集成:echarts
- 日历集成:fullcalendar
- 引入组件: tinymce,ibiz-vue-lib,interactjs
- 模型接口:@ibiz/dynamic-model-api 
- 代码风格检测:eslint

### 4.特点

前端动态模板除了继承R7标准版的标准Restful设计、业务逻辑与界面表现分离、快速介入的代码能力的3大特点,另外还具备分层设计、引擎化2大特点。

1.分层设计

分层设计这一特点体现在代码管理方式和应用内部2个方面。前端动态模板整个项目结构采用monorepo的方式来管理代码,packages目录下的ibiz-core、ibiz-plugin、ibiz-vue各包专注解释自己的职责。在应用内部,又可划分UI体系和数据交互体系2个方面,在UI方面,从视图、部件、部件项逐层传递;在数据交互体系方面,从UI、UI服务、数据服务逐层传递。使用分层设计,层次清楚,低耦合,高内聚。

2.引擎化

引擎化这一特点是动态的必然结果。如需要实现某一个场景,我们会提前预置该场景的逻辑,该逻辑是通过接收模型数据进行不同的处理。相比于R7标准模板,前端动态模板始终只有一份代码,而R7标准模板,如果模型数据不一致,在成果物中所获得的代码会有所不同,在前端动态模板UI部分体现尤为明显。

## 快速上手

<blockquote style="border-color: blue;"><p>克隆项目</p></blockquote>

```javascript
git clone https://xxxxxx/vue-example.git
```

<blockquote style="border-color: blue;"><p>打开前端项目,进入工作空间下,执行安装依赖命令</p></blockquote>

```javascript
cd vue-example // 进入项目根目录
yarn install // 安装依赖
```

<blockquote style="border-color: blue;"><p>本地启动前,需执行 yarn link-model命令、修改远程代理地址</p></blockquote>

```javascript
yarn link-model // 把模型数据合入到前端assets目录下,走本地模式需用到
proxy: "http://172.16.190.141:30228/" // 修改远程代理文件 vue.config.js 代理地址
```

<blockquote style="border-color: blue;"><p>在工作空间下,执行启动命令</p></blockquote>

```
yarn serve
```

<blockquote style="border-color: blue;"><p>在工作空间下,执行打包命令,生成最终交付产物</p></blockquote>

```javascript
yarn build
```

## 目录结构

前端动态模板已经为你生成了一个完整的开发框架,提供了涵盖前端开发的各类功能和坑位,下面是整个项目的目录结构。

```javascript
|─ ─ app_Web
	|─ ─ packages												本地依赖包
		|─ ─ ibiz-core											ibiz-core核心依赖包
			|─ ─ src											工程文件夹
				|─ ─ engine										视图引擎
				|─ ─ entities									实体基类
				|─ ─ interface									接口
				|─ ─ logic										逻辑模型
				|─ ─ model										运行模型
					|─ ─ chart-detail							图表类模型
					|─ ─ error-detail							错误类模型
					|─ ─ form-detail							表单成员模型
					|─ ─ panel-detail							面板成员模型
				|─ ─ modules									模块
				|─ ─ service									服务基类
				|─ ─ types										声明文件
				|─ ─ utils										工具类
		|─ ─ ibiz-plugin										ibiz-plugin插件依赖包
		|─ ─ ibiz-vue											ibiz-vue Vue组件依赖包
			|─ ─ src											工程文件夹
				|─ ─ app-logic									应用逻辑
					|─ ─ app-backend-action.ts					后台界面行为
					|─ ─ app-front-ation.ts						前台界面行为
					|─ ─ app-lofic-factory.ts					界面行为工厂
				|─ ─ app-service								应用服务
					|─ ─ common-service							通用服务
						|─ ─ app-center-service.ts				应用中心服务
						|─ ─ app-component-sercice.ts			应用组件服务
						|─ ─ app-contet-store.ts				全局上下文仓库基类
						|─ ─ app-layout-service.ts				视图布局服务
						|─ ─ app-nav-history.ts					导航历史记录项
						|─ ─ app-navdata-service.ts				导航数据服务
						|─ ─ app-thrid-service.ts				第三方登录服务
						|─ ─ codelist-translator.ts				代码表翻译服务
						|─ ─ footer-items-service.ts			底部项绘制服务
						|─ ─ top-items-servicet.ts				顶部项绘制服务
						|─ ─ plugin-service.ts					插件服务
						|─ ─ ui-state-service.ts				应用UI状态管理服务
					|─ ─ loading-service						加载服务
						|─ ─ app-loading-service.ts				应用加载服务
						|─ ─ ctrl-loading-service.ts			部件加载服务
						|─ ─ view-loading-service.ts			视图加载服务
					|─ ─ logic-service							逻辑服务
						|─ ─ app-func-service.ts				应用功能服务
						|─ ─ app-global-action-service.ts		全局界面行为服务
						|─ ─ app-viewlogic-service.ts			视图逻辑服务
				|─ ─ components									组件
					|─ ─ common									通用Vue组件
					|─ ─ control								部件组件
					|─ ─ editor									编辑器组件
					|─ ─ layout									视图布局组件
					|─ ─ view									视图组件
				|─ ─ ctrl-model									部件模型类
				|─ ─ ctrl-service								部件服务
				|─ ─ decorators									装饰器
				|─ ─ directives									指令
				|─ ─ events										事件集
				|─ ─ types										声明文件
				|─ ─ utils										工具类
				|─ ─ view										视图组件基类
				|─ ─ view-container								视图容器
					|─ ─ app-indexview-shell.tsx				首页视图容器
					|─ ─ app-view-shell.tsx						视图容器
					|─ ─ view-container-base.tsx				视图容器基类
				|─ ─ widgets									部件组件基类
	|─ ─ public													public文件夹
		|─ ─ assets												静态文件夹
		|─ ─ environments										环境文件
	|─ ─ src													项目工程文件夹
		|─ ─ assets												静态文件夹
		|─ ─ components											项目组件
		|─ ─ config												应用配置
		|─ ─ environments										环境文件
		|─ ─ locale												多语言文件
		|─ ─ pages												视图文件
			|─ ─ main.ts										应用主函数入口
			|─ ─ router.ts										应用路由管理
		|─ ─ plugin												插件文件夹
		|─ ─ router												自定义路由配置
		|─ ─ store												全局状态管理
		|─ ─ styles												应用样式文件夹
			|─ ─ default.less									默认样式
			|─ ─ style2.less									style2样式
			|─ ─ app-style.less									样式表样式
			|─ ─ user.less										用户自定义样式
			|─ ─ var.css										css变量定义文件
		|─ ─ theme												主题文件夹
		|─ ─ utils												工具类文件
        |─ ─ app-register.ts									公共组件全局注册
        |─ ─ App.vue											入口文件
        |─ ─ user-register.ts									自定义组件全局注册
	|─ ─ package.json											依赖管理文件
	|─ ─ vue.config.js											vue cli配置
```

## 更新日志

每个版本的详细更改都记录在[发行说明](CHANGELOG.md)中。

## 如何贡献

如果你希望参与贡献,欢迎 [Pull Request](<http://demo.ibizlab.cn/ibiz_r7/vue_r7/issues/new>),或通过自助服务群给我们报告 Bug。

强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)(本指南不提供此项目的实际支持服务!)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](https://www.chiark.greenend.org.uk/~sgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393),更好的问题更容易获得帮助。