一種生成Web前端交互頁面的方法技術

本發明專利技術涉及一種生成Web前端交互頁面的方法，包括：1、采用前端AJAX技術選擇頁面框架，并存入Cookie模塊；2，構建標準化界面組件，將其排列界面設計器上方，并選擇相應組件布置到界面設計器下方的界面設計區；3，對選中的組件進行參數配置，得到需要的交互組件；4，采用CSS技術為頁面框架和交互組件設計若干皮膚文件；5，從Cookie模塊中獲取頁面框架，并采用JavaScript技術獲取交互組件源代碼和當前皮膚文件；6，將頁面框架、交互組件源代碼和當前皮膚文件上傳送至服務器端，生成Web前端交互頁面。本發明專利技術將用戶與界面源代碼隔離開，可高效地實現前端交互頁面的生成，出錯率低，且配置時間短。

【技術實現步驟摘要】
一種生成Web前端交互頁面的方法
本專利技術涉及計算機應用
，特別是涉及一種生成Web前端交互頁面的方法。
技術介紹
Web前端交互頁面的制作不同于普通前端頁面，不僅需要HTML文件，還需要相關控件的JS與CSS（CascadingStyleSheet，級聯樣式表）文件，只有將這三種文件結合使用才能生成完整的前端交互頁面。現有技術下通常通過人工組合三種文件來生成Web前端交互頁面，其生成效率較低，且人工組合頁面時的出錯率較高，配置時候也相對比較長。
技術實現思路
本專利技術所要解決的技術問題是提供一種生成Web前面交互頁面的方法，用于解決現有技術中人工組合生成Web前端交互頁面時存在的效率低、出錯率高、配置時間長等問題。本專利技術解決上述技術問題的技術方案如下：一種生成Web前端交互頁面的方法，包括：步驟1，采用前端AJAX（AsynchronousJavaScriptandXML，異步JavaScript和XML）技術選擇頁面框架，并將頁面框架存入Cookie模塊；步驟2，構建一套標準化界面組件，將其排列在基于瀏覽器的界面設計器上方，并從標準化界面組件中選擇相應組件布置到界面設計器下方的界面設計區；步驟3，對界面設計區的組件進行參數配置，得到需要的交互組件；步驟4，采用CSS技術為頁面框架和交互組件設計若干皮膚文件；步驟5，從Cookie模塊中獲取頁面框架，并采用JavaScript技術從界面設計區得到交互組件源代碼和當前皮膚文件；步驟6，將頁面框架、交互組件源代碼和當前皮膚文件上傳送至服務器端，在服務器端生成Web前端交互頁面。在上述技術方案的基礎上，本專利技術還可以做如下改進。進一步，所述步驟1中的頁面框架是預定義的一整套頁面布局的集合。進一步，所述步驟1中的頁面框架采用HTML、CSS和JavaScript技術進行封裝。根據權利要求1所述的方法，其特征在于，所述步驟2中采用HTML、CSS和JavaScript技術構建標準化界面組件。進一步，所述步驟2中的標準化界面組件包括導航、按鈕、列表、彈出層、選項卡、折疊菜單、滑動框、表單元素和／或日期選擇器。進一步，所述步驟2中還為構建的標準化界面組件提供了組件效果圖。進一步，所述步驟3中對選中的組件進行參數配置時，其配置的參數包括大小、鏈接地址、是否圓角和/或是否自動打開。進一步，所述步驟4中的每套皮膚文件對應的結構和選擇器相同。進一步，所述步驟4中還包括：為每套皮膚文件提供一個相應的效果圖。進一步，所述步驟5中還包括：使用自定義過濾函數將源代碼過濾為符合規則的可用代碼。本專利技術的有益效果是：本專利技術將用戶與界面源代碼隔離開，可高效地實現前端交互頁面的生成，出錯率低，且配置時間短；通過界面設計器及組件效果圖，能實現所見即所得的設計效果；根據對組件的參數配置，可實現組件的個性化需求；通過多套皮膚設計，易于實現為界面換膚，且為每套皮膚設計了相應的效果圖，易于辨識。附圖說明圖1為本專利技術所述生成Web前端交互頁面的方法的流程示意圖。具體實施方式以下結合附圖對本專利技術的原理和特征進行描述，所舉實例只用于解釋本專利技術，并非用于限定本專利技術的范圍。實施例一是一種生成Web前端交互頁面的方法，主要包括：步驟1，采用前端AJAX技術選擇頁面框架，并將頁面框架存入Cookie模塊。具體地，頁面框架是預定義的一整套頁面布局的集合，采用HTML、CSS和JavaScript技術封裝常用的頁面框架，并通過前端AJAX技術讓用戶選擇頁面框架，用戶可以根據自身需求選擇適合的頁面框架，并將用戶的選擇存入Cookie模塊中。步驟2，構建一套標準化界面組件，將其排列在基于瀏覽器的界面設計器上方，并從標準化界面組件中選擇相應組件布置到界面設計器下方的界面設計區。在實質上是用戶選擇交互控件的過程，具體包括：使用HTML、CSS和JavaScript構建一套標準化界面組件并提供組件效果圖，組件包括導航、按鈕、列表、彈出層、選項卡、折疊菜單、滑動框、表單元素、日期選擇器等等；為用戶提供一個基于瀏覽器的界面設計器，設計器上方排列標準化組件，下方為界面設計區，用戶可以通過拖拽，插入組件效果等動作將所選交互組件布置到設計區中，由此實現所見即所得的設計效果，將用戶與界面源代碼隔離開，提高效率且避免出錯。步驟3，對界面設計區的組件進行參數配置，得到需要的交互組件。具體地，根據不同組件的特性，為每個組件提供特性參數配置，如大小、鏈接地址、是否圓角、自動打開等等，參數因組件不同而不同。用戶在選中界面設計區的某個組件后，可對選中組件進行參數配置（配置方式為選擇預定值或輸入），從而實現組件的個性化需求。步驟4，采用CSS技術為頁面框架和交互組件設計若干皮膚文件。具體地，為頁面框架和標準組件，提供至少3套（或更多）皮膚，皮膚文件使用CSS文件，每套皮膚文件中的結構和選擇器均相同，但具體規則不同。每套皮膚提供一個效果圖供用戶辨識，然后點擊某個效果圖后，即調用對應的皮膚文件，從而實現換膚。步驟5，從Cookie模塊中獲取頁面框架，并采用JavaScript技術從界面設計區得到交互組件源代碼和當前皮膚文件。步驟6，將頁面框架、交互組件源代碼和當前皮膚文件上傳送至服務器端，在服務器端生成Web前端交互頁面。具體地，從Cookie中獲取用戶選擇的頁面框架；使用JavaScript獲取界面設計區的源代碼，使用自定義過濾函數將源代碼過濾為符合規則的可用代碼；使用JavaScript判斷用戶當前使用的皮膚文件。將頁面框架、源代碼和皮膚文件傳送至服務器端，服務器端使用程序語言（如PHP，Java等）在服務器上生成這些文件，并按照標準目錄整合打包，生成Web前端交互頁面。以上所述僅為本專利技術的較佳實施例，并不用以限制本專利技術，凡在本專利技術的精神和原則之內，所作的任何修改、等同替換、改進等，均應包含在本專利技術的保護范圍之內。本文檔來自技高網...

【技術保護點】
一種生成Web前端交互頁面的方法，其特征在于，包括：步驟1，采用前端AJAX技術選擇頁面框架，并將頁面框架存入Cookie模塊；步驟2，構建一套標準化界面組件，將其排列在基于瀏覽器的界面設計器上方，并從標準化界面組件中選擇相應組件布置到界面設計器下方的界面設計區；步驟3，對界面設計區的組件進行參數配置，得到需要的交互組件；步驟4，采用CSS級聯樣式表技術為頁面框架和交互組件設計若干皮膚文件；步驟5，從Cookie模塊中獲取頁面框架，并采用JavaScript技術從界面設計區得到交互組件源代碼和當前皮膚文件；步驟6，將頁面框架、交互組件源代碼和當前皮膚文件上傳送至服務器端，在服務器端生成Web前端交互頁面。

【技術特征摘要】
1.一種生成Web前端交互頁面的方法，其特征在于，包括：步驟1，采用前端AJAX技術選擇頁面框架，并將頁面框架存入Cookie模塊；步驟2，構建一套標準化界面組件，將其排列在基于瀏覽器的界面設計器上方，并從標準化界面組件中選擇相應組件布置到界面設計器下方的界面設計區；步驟3，對界面設計區的組件進行參數配置，得到需要的交互組件；步驟4，采用CSS級聯樣式表技術為頁面框架和交互組件設計若干皮膚文件；每套皮膚文件對應的結構和選擇器相同，并為每套皮膚文件提供一個相應的效果圖；步驟5，從Cookie模塊中獲取頁面框架，并采用JavaScript技術從界面設計區得到交互組件源代碼和當前皮膚文件；步驟6，將頁面框架、交互組件源代碼和當前皮膚文件上傳送至服務器端，在服務器端生成Web前端交互頁面。2.根據權利要求1所述的方法，其特征在于，所述步驟1中的頁面框架是預定義的一整套頁面布局...

【專利技術屬性】
技術研發人員：王永強，
申請(專利權)人：北京思特奇信息技術股份有限公司，
類型：發明
國別省市：