VEITOOL 框架开发文档(TP版)官方文档官网

单页模式

## 入口主页

入口主页模板文件位于后台应用视图文件夹下，具体位置：`app/admin/view/index/index.html`。文件的加载是经过后台主控制器模板解析过后再传递给浏览器端，并非纯静态形式的请求获得模板。这样设计有两个目的：1. 为了服务端能灵活处理模板；2. 为了防止静态模板可直接被下载。

## 前端流程
1. 加载入口模板文件：`app/admin/view/index/index.html`
2. 加载layui样式文件：`/static/layui/css/layui.css`
3. 加载admin框架样式文件：`/static/admin/admin.css`
4. 加载layui.js文件：`/static/layui/layui.js`
5. 暴露 `layui` 中的 `jQuery` 到全局
6. `layui.config` 初始配置相关参数
7. 注册相关扩展：Cropper(图片裁剪)、fileLibrary(资源库弹窗)、buildItems(表单项构建器) 等
8. 引入`index.js`、`admin.js` 扩展文件
9. 获取用户对应权限的左栏菜单数据以及角色数据(请求地址为：`admin或映射名/index/json` Json数据)
10. 拿到菜单数据后构建左栏菜单 和 角色选项，以及回显管理员相关信息
11. 加载默认主面板模板页：(请求地址为：`admin或映射名/index/main`)，此时拿到的模板数据会经过admin.js扩展中的一系列析构处理(如：`admin.vDict`、`admin.vForm`等方法) 后再挂载到主面板区域。
12. 其他点击左栏菜单链接(如：href='#/abc/def' 这种形式)，监测到路由变化后，index.js中路由扩展会发起异步请求：http://yourdomain/admin或映射名/abc/def 拿到服务端解析过的视图数据后，再进行`第11步`的处理。

## 主页结构

**单页模式**：入口主页第一次请求后，左栏菜单项里的链接（外链除外）点击后并不会再次刷新整体主页，而是会异步请求后通过 `index.js`、`admin.js` 两个主框组件中的路由、模板解析等一系列处理，再将处理结果呈现在`layui-body`容器中，这样一来所有主页引入的（也包括后面异步引入的）静态资源 `css`、`js` 文件以及定义的全局变量等，在后面异步加载的内容中也是可用的。

``` html
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="{STATIC__PATH}layui/css/layui.css"/>
<link rel="stylesheet" href="{STATIC__PATH}admin/admin.css"/>
...
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
    	<div class="layui-header"> 面板页头部 </div>
		<div class="layui-side"> 面板左栏主菜单【异步动态加载】</div>
		<div class="layui-body"> 主体内容 【异步动态加载】</div>
		<div class="layui-footer layui-text"></div>
	</div>
<script type="text/javascript" src="{STATIC__PATH}layui/layui.js"></script>
<script>
	// layui 相关配置，并引入 index.js、admin.js 主框组件
</script>
</body>
</html>
```

::: info 温馨提示
由于单页模式的这类特性，启用多标签时，一定要注意各异步加载模板页内 id 的命名问题，不要重名。
:::

## 内页结构

内页的引入是可以分为三种：
1.  **内部框架页引入** 这种模式是采用iframe框架引入，需要重新全部加载所需静态资源的，页面也是需要整体独有布局的，一般是在某些，如不希望受到主框单页中的js、css影响的特殊页面。

2.  **外部链接页引入** 这种模式也是采用iframe框架引入的。

3. **普通页异步引入【常用】** 系统大部分页面采用和推荐的模式，不需要再重新加载框架的资源文件，只需加载本页需要的静态资源文件：如js\css\图片资源等。一般的布局规范如下：

``` html
<style>

</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
			//头部
		</div>
		<div class="layui-card-body">
            //主体
        </div>
		//v-show 中的权限路径用来控制该标签是否显示，当拥有该项权限路径时才显示【v2.0.0版新增】
		<div v-show="system.log/index"> 带权限的内容控制 </div>
    </div>
</div>

<script type="text/javascript">
//这种方式是视图和js业务逻辑集成在一个页面，方便维护开发
layui.use(['modelName'],function(){
	//这里是js的业务逻辑（$ 符在这里是直接可用的）
});
</script>
```