有声小说,长生界辰东小说

云業(yè)務(wù)管理系統(tǒng)（國內(nèi)版）

前端技術(shù)說明

最后更新時間：2021-09-17 15:59:43

#### 總體說明
**所有前端頁面均部署在根目錄的Template文件夾下**

**OEM整體配套三個大類的頁面:**

**管理后臺（Admin）**

**網(wǎng)站前臺（Home - 含手機版）**

**用戶中心（User - 含手機版）**

#### 兼容屏幕范圍：

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

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

兼容瀏覽器類型或版本：主流系列瀏覽器（webkit內(nèi)核）或 IE8及以上版本的IE系列瀏覽器

#### 前端框架

管理后臺和前臺頁面的PC端，未使用前端框架；使用類庫為 jQuery1.11.X
用戶中心采用 bootstrap3.0 框架（定制）；使用類庫為 jQuery 1.11.X，采用artTemplate模板引擎渲染頁面

手機版前臺頁面采用MUI框架（定制）；使用類庫為 zepto.js

樣式表：`使用css，未使用less/sass等編譯，但不限制二次開發(fā)的使用`

#### 前端基礎(chǔ)目錄結(jié)構(gòu)

```
模板文件 PC/Mobile - Page 用于存放html文件
靜態(tài)資源 PC/Mobile - Static
靜態(tài)資源 PC/Mobile - Static - css用于存放css文件
靜態(tài)資源 PC/Mobile - Static - img用于存放部分img標簽的src文件
靜態(tài)資源 PC/Mobile - Static - js用于存放自主開發(fā)的JavaScript文件
靜態(tài)資源 PC/Mobile - Static - lib用于存放第三方類庫，框架，插件等
```

#### 管理后臺 – Admin
**管理后臺的基本架構(gòu)：**
管理后臺整體架構(gòu)是以table為結(jié)構(gòu)，基本的頁面結(jié)構(gòu)如下示意圖

```
table:
頭部 （<tr><td></td></tr>）
左側(cè)菜單
（<tr><td>）頁面主體(<td></tr>)
在每一個頁面中，都有
<include file="Global:header"/> （對應(yīng)html文件位于/Page/Global下）
<include file="Global:left"/> （對應(yīng)html文件位于/Page/Global下）
這兩個標簽用于引入頭部欄，和左側(cè)菜單的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庫和第三方插件

#### 官網(wǎng)前臺PC版
**1.前臺頁面的主要架構(gòu)**

前臺頁面的所有文件都位于Home文件夾下方，AllNew為主題名稱；PC為電腦版本的文件，Mobile為手機版本的文件；其他目錄結(jié)構(gòu)不再贅述。

官網(wǎng)前臺PC版使用jQuery作為基礎(chǔ)類庫，并以jQuery為基礎(chǔ)進行自有類庫的擴展，組件封裝等。

每個頁面都是獨立的，其中的公共代碼段由 ``<include>`` 標簽引入
每個頁面包含有如下`公共標簽`
```
<include file="./__headInclude__"/>  公共資源引入
<include file="./__headScriptCode__"/>  公共統(tǒng)計代碼
<include file="./__header__"/>  公共頭部
<include file="./__footer__"/>  公共腳部
```
除了以上的公共標簽，還有不同模塊的頁面對應(yīng)的`模塊公共標簽`

```
<include file="./__aboutMenu__"/>  關(guān)于我們公共菜單
<include file="./__signFooter__"/>  注冊/找回密碼 公共腳部
<include file="./__productHotHelp__"/>  產(chǎn)品介紹頁底部常見問題公共部分
```

#### 前臺頁面的主要資源文件

**1.css**

公共css:

位于 /Static/css/common/common/
common.css主要是一些原子樣式類，公共樣式類
component.css 主要是一些組件樣式類
其他各模塊對應(yīng)的公共樣式位于 /Static/css/common/module/ 下

模塊css:

其他各模塊對應(yīng)的公共樣式位于 /Static/css/module / 下
在對應(yīng)的各頁面由link標簽引入，如有對應(yīng)樣式的調(diào)整，可找到對應(yīng)的css

**2.JS**

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

`public.js`包含了前臺頁面運行的各種公用腳本方法

`NY-home.min.js` 包含了部分封裝方法，主要用于功能較為復(fù)雜的頁面，用于支持異步提交方法，登錄驗證方法，部分組件方法

其他各模塊對應(yīng)的公共腳本位于 `/Static/js/module/` 下
在各頁面由script標簽引入，如有功能的修改，可以在對應(yīng)頁面找到對應(yīng)的腳本

自主開發(fā)的插件位于 `/Static/js/plugin/` 下，在所需頁面引入

**第三方類庫**

第三方類庫位于 `/Static/lib/` 下，主要部署了js庫和第三方插件
如二次開發(fā)有需要引入的第三方庫，可部署在此文件夾下方。

#### 官網(wǎng)前臺手機版
**1.手機版前臺頁面的主要架構(gòu)**

手機版前臺頁面使用MUI定制化開發(fā)作為框架，該框架的優(yōu)勢是UI完善，開源，與BAT無關(guān)；手機版類庫采用zepto.js；基本布局采用rem適配布局

**2.手機版前臺頁面的主要資源文件**

手機版前臺頁面的主要資源文件與PC版部署結(jié)構(gòu)基本一致；
JS文件：
全部位于 `/Static/js/module/mobile/`

其中 `public.js為公共功能腳本`

同文件夾下其他腳本為 `模塊功能腳本`

其中`/Static/js/module/mobile/buy/buy.js` 為購買頁公共腳本，定義了若干購買頁專用的組件方法，所以在購買頁中，需要引入buy.js 與本頁對應(yīng)的 server.js/ idc.js/ host.js 等；如果OEM合作商有自己的技術(shù)人員，在二次開發(fā)的時候，可以考慮使用gulp等工具合并和壓縮購買頁的多個js，達到優(yōu)化的目的。

#### 用戶中心
**1.用戶中心的主要架構(gòu)**
OEM用戶中心采用bootstrap作為框架進行定制開發(fā)，手機版采用MUI定制開發(fā)；類庫為jQuery1.11.1，手機版類庫為zepto.js；采用artTemplate模板引擎進行頁面同步數(shù)據(jù)渲染

**2.用戶中心的主要資源文件**

**PC版下**

```
#css
/Static/css/common下為公共css
/Static/css/common/ucCommon.css 為公共樣式，包含原子類和基本的構(gòu)造樣式
/Static/css/common/ucComponent.css 為公共組件樣式
/Static/css/common/bootstrap-theme-ny.css為定制bootstrap樣式

/Static/css/common/ucModule 為模塊公共樣式
/Static/css/common/ucModule/server/server.css 為服務(wù)器類頁面公共樣式
/Static/css/common/ucModule/server/detail.css 為工單類頁面公共樣式

/Static/css/ucModule 為各模塊私有樣式
```

```
#js
/Static/js/common 下為公共腳本
其中 NY-1.30.6.min.js 為自主開發(fā)類庫，目錄中的NY.js為未壓縮版
ucCommon.js 為公共方法腳本，是整個用戶中心的引擎，包含模板引擎的自動渲染方法，模板引擎的擴展方法，全局的操作保護方法等。
/Static/js/ucModule 為模塊腳本
```

```
#類庫
/Static/lib 為類庫文件夾，不再贅述。
```

**手機版下**

```
#css
所有css均部署在/Static/css/ucMobile/
其中 /Static/css/ucMobile/common/ 下的為公共css，其名稱與功能和PC版一致，但內(nèi)容是不同的。
其余為各模塊樣式
```
```
#js
/Static/js/common/NY-1.33.1.min.js 為公共類庫腳本，與1.30.6 不同的是，增加了手機版的功能
/Static/js/ucMobile/ 下均為對應(yīng)模塊的腳本
```

```
#類庫
/Static/lib 為類庫文件夾，不再贅述。
```

阿帕云引擎

云引擎受控端

云引擎控制器

云引擎開放API

文檔首頁

云業(yè)務(wù)管理系統(tǒng)（國內(nèi)版）

前端技術(shù)說明

18+

1000+

30+

5+