前端技术说明

云业务管理系统（国内版）

前端技术说明

最后更新时间：2021-09-17 15:59:43

#### 总体说明
**所有前端页面均部署在根目录的Template文件夹下**

**OEM整体配套三个大类的页面:**

**管理后台（Admin）**

**网站前台（Home - 含手机版）**

**用户中心（User - 含手机版）**

#### 兼容屏幕范围：

**PC：**
管理后台1280px – 1920px ，前台1000px-1920px，用户中心 1280px-1920px

**手机端：**
兼容所有主流手机屏幕尺寸

兼容浏览器类型或版本：主流系列浏览器（webkit内核）或 IE8及以上版本的IE系列浏览器

#### 前端框架

管理后台和前台页面的PC端，未使用前端框架；使用类库为 jQuery1.11.X
用户中心采用 bootstrap3.0 框架（定制）；使用类库为 jQuery 1.11.X，采用artTemplate模板引擎渲染页面

手机版前台页面采用MUI框架（定制）；使用类库为 zepto.js

样式表：`使用css，未使用less/sass等编译，但不限制二次开发的使用`

#### 前端基础目录结构

```
模板文件 PC/Mobile - Page 用于存放html文件
静态资源 PC/Mobile - Static
静态资源 PC/Mobile - Static - css用于存放css文件
静态资源 PC/Mobile - Static - img用于存放部分img标签的src文件
静态资源 PC/Mobile - Static - js用于存放自主开发的JavaScript文件
静态资源 PC/Mobile - Static - lib用于存放第三方类库，框架，插件等
```

#### 管理后台 – Admin
**管理后台的基本架构：**
管理后台整体架构是以table为结构，基本的页面结构如下示意图

```
table:
头部 （<tr><td></td></tr>）
左侧菜单
（<tr><td>）页面主体(<td></tr>)
在每一个页面中，都有
<include file="Global:header"/> （对应html文件位于/Page/Global下）
<include file="Global:left"/> （对应html文件位于/Page/Global下）
这两个标签用于引入头部栏，和左侧菜单的html 
每一个分页面，都需要以 td id=”right” 作为页面主体部分的容器
```

**管理后台的主要资源文件**

**1.主要CSS**

主要css位于 `/Static/css/common.css` 与 `frame.css`

`common.css` 主要是一些原子样式类，公共样式类

`frame.css` 主要是一些组件样式类

**2.主要JS**

主要脚本位于 `/Static/js/` 下

ny.js是汇总一些通用方法类的类库

frame.js是全局功能方法的脚本

其余各页面js写在页面底部

**3.第三方类库**

第三方类库位于 `/Static/lib/` 下，主要部署了js库和第三方插件

#### 官网前台PC版
**1.前台页面的主要架构**

前台页面的所有文件都位于Home文件夹下方，AllNew为主题名称；PC为电脑版本的文件，Mobile为手机版本的文件；其他目录结构不再赘述。

官网前台PC版使用jQuery作为基础类库，并以jQuery为基础进行自有类库的扩展，组件封装等。

每个页面都是独立的，其中的公共代码段由 ``<include>`` 标签引入
每个页面包含有如下`公共标签`
```
<include file="./__headInclude__"/>  公共资源引入
<include file="./__headScriptCode__"/>  公共统计代码
<include file="./__header__"/>  公共头部
<include file="./__footer__"/>  公共脚部
```
除了以上的公共标签，还有不同模块的页面对应的`模块公共标签`

```
<include file="./__aboutMenu__"/>  关于我们公共菜单
<include file="./__signFooter__"/>  注册/找回密码 公共脚部
<include file="./__productHotHelp__"/>  产品介绍页底部常见问题公共部分
```

#### 前台页面的主要资源文件

**1.css**

公共css:

位于 /Static/css/common/common/
common.css主要是一些原子样式类，公共样式类
component.css 主要是一些组件样式类
其他各模块对应的公共样式位于 /Static/css/common/module/ 下

模块css:

其他各模块对应的公共样式位于 /Static/css/module / 下
在对应的各页面由link标签引入，如有对应样式的调整，可找到对应的css

**2.JS**

公共JS位于 `/Static/js/common`

`public.js`包含了前台页面运行的各种公用脚本方法

`NY-home.min.js` 包含了部分封装方法，主要用于功能较为复杂的页面，用于支持异步提交方法，登录验证方法，部分组件方法

其他各模块对应的公共脚本位于 `/Static/js/module/` 下
在各页面由script标签引入，如有功能的修改，可以在对应页面找到对应的脚本

自主开发的插件位于 `/Static/js/plugin/` 下，在所需页面引入

**第三方类库**

第三方类库位于 `/Static/lib/` 下，主要部署了js库和第三方插件
如二次开发有需要引入的第三方库，可部署在此文件夹下方。

#### 官网前台手机版
**1.手机版前台页面的主要架构**

手机版前台页面使用MUI定制化开发作为框架，该框架的优势是UI完善，开源，与BAT无关；手机版类库采用zepto.js；基本布局采用rem适配布局

**2.手机版前台页面的主要资源文件**

手机版前台页面的主要资源文件与PC版部署结构基本一致；
JS文件：
全部位于 `/Static/js/module/mobile/`

其中 `public.js为公共功能脚本`

同文件夹下其他脚本为 `模块功能脚本`

其中`/Static/js/module/mobile/buy/buy.js` 为购买页公共脚本，定义了若干购买页专用的组件方法，所以在购买页中，需要引入buy.js 与本页对应的 server.js/ idc.js/ host.js 等；如果OEM合作商有自己的技术人员，在二次开发的时候，可以考虑使用gulp等工具合并和压缩购买页的多个js，达到优化的目的。

#### 用户中心
**1.用户中心的主要架构**
OEM用户中心采用bootstrap作为框架进行定制开发，手机版采用MUI定制开发；类库为jQuery1.11.1，手机版类库为zepto.js；采用artTemplate模板引擎进行页面同步数据渲染

**2.用户中心的主要资源文件**

**PC版下**

```
#css
/Static/css/common下为公共css
/Static/css/common/ucCommon.css 为公共样式，包含原子类和基本的构造样式
/Static/css/common/ucComponent.css 为公共组件样式
/Static/css/common/bootstrap-theme-ny.css为定制bootstrap样式

/Static/css/common/ucModule 为模块公共样式
/Static/css/common/ucModule/server/server.css 为服务器类页面公共样式
/Static/css/common/ucModule/server/detail.css 为工单类页面公共样式

/Static/css/ucModule 为各模块私有样式
```

```
#js
/Static/js/common 下为公共脚本
其中 NY-1.30.6.min.js 为自主开发类库，目录中的NY.js为未压缩版
ucCommon.js 为公共方法脚本，是整个用户中心的引擎，包含模板引擎的自动渲染方法，模板引擎的扩展方法，全局的操作保护方法等。
/Static/js/ucModule 为模块脚本
```

```
#类库
/Static/lib 为类库文件夹，不再赘述。
```

**手机版下**

```
#css
所有css均部署在/Static/css/ucMobile/
其中 /Static/css/ucMobile/common/ 下的为公共css，其名称与功能和PC版一致，但内容是不同的。
其余为各模块样式
```
```
#js
/Static/js/common/NY-1.33.1.min.js 为公共类库脚本，与1.30.6 不同的是，增加了手机版的功能
/Static/js/ucMobile/ 下均为对应模块的脚本
```

```
#类库
/Static/lib 为类库文件夹，不再赘述。
```

阿帕云引擎

云引擎受控端

云引擎控制器

云引擎开放API

文档首页

云业务管理系统（国内版）

18+

1000+

30+

5+