小说阅读网免费小说,已完结小说排行榜,懒人听书

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

前端技術(shù)說(shuō)明

最后更新時(shí)間：2023-01-17 14:10:43

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

**OEM整體配套三個(gè)大類的頁(yè)面:**

**管理后臺(tái)（Admin）**

**網(wǎng)站前臺(tái)（Home - 含手機(jī)版）**

**用戶中心（User - 含手機(jī)版）**

#### 兼容屏幕范圍：

**PC：**
管理后臺(tái)1280px – 1920px ，前臺(tái)1000px-1920px，用戶中心 1280px-1920px

**手機(jī)端：**
兼容所有主流手機(jī)屏幕尺寸

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

#### 前端框架

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

手機(jī)版前臺(tái)頁(yè)面采用MUI框架（定制）；使用類庫(kù)為 zepto.js

樣式表：`使用css，未使用less/sass等編譯，但不限制二次開(kāi)發(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標(biāo)簽的src文件
靜態(tài)資源 PC/Mobile - Static - js用于存放自主開(kāi)發(fā)的JavaScript文件
靜態(tài)資源 PC/Mobile - Static - lib用于存放第三方類庫(kù)，框架，插件等
```

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

```
table:
頭部 （<tr><td></td></tr>）
左側(cè)菜單
（<tr><td>）頁(yè)面主體(<td></tr>)
在每一個(gè)頁(yè)面中，都有
<include file="Global:header"/> （對(duì)應(yīng)html文件位于/Page/Global下）
<include file="Global:left"/> （對(duì)應(yīng)html文件位于/Page/Global下）
這兩個(gè)標(biāo)簽用于引入頭部欄，和左側(cè)菜單的html 
每一個(gè)分頁(yè)面，都需要以 td id=”right” 作為頁(yè)面主體部分的容器
```

**管理后臺(tái)的主要資源文件**

**1.主要CSS**

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

`common.css` 主要是一些原子樣式類，公共樣式類

`frame.css` 主要是一些組件樣式類

**2.主要JS**

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

ny.js是匯總一些通用方法類的類庫(kù)

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

其余各頁(yè)面js寫(xiě)在頁(yè)面底部

**3.第三方類庫(kù)**

第三方類庫(kù)位于 `/Static/lib/` 下，主要部署了js庫(kù)和第三方插件

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

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

官網(wǎng)前臺(tái)PC版使用jQuery作為基礎(chǔ)類庫(kù)，并以jQuery為基礎(chǔ)進(jìn)行自有類庫(kù)的擴(kuò)展，組件封裝等。

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

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

#### 前臺(tái)頁(yè)面的主要資源文件

**1.css**

公共css:

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

模塊css:

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

**2.JS**

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

`public.js`包含了前臺(tái)頁(yè)面運(yùn)行的各種公用腳本方法

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

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

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

**第三方類庫(kù)**

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

#### 官網(wǎng)前臺(tái)手機(jī)版
**1.手機(jī)版前臺(tái)頁(yè)面的主要架構(gòu)**

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

**2.手機(jī)版前臺(tái)頁(yè)面的主要資源文件**

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

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

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

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

#### 用戶中心
**1.用戶中心的主要架構(gòu)**
OEM用戶中心采用bootstrap作為框架進(jìn)行定制開(kāi)發(fā)，手機(jī)版采用MUI定制開(kāi)發(fā)；類庫(kù)為jQuery1.11.1，手機(jī)版類庫(kù)為zepto.js；采用artTemplate模板引擎進(jìn)行頁(yè)面同步數(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ù)器類頁(yè)面公共樣式
/Static/css/common/ucModule/server/detail.css 為工單類頁(yè)面公共樣式

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

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

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

**手機(jī)版下**

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

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

阿帕云引擎

云引擎受控端

云引擎控制器

云引擎開(kāi)放API

文檔首頁(yè)

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

前端技術(shù)說(shuō)明

18+

1000+

30+

5+