在BIMFACE二次系列部落格中詳細介紹了伺服器端API的呼叫方式，如下列表

從本篇部落格開始，主要介紹BIMFACE與不同型別的業務系統進行整合開發應用的技術方案。主要包含

• Web網頁整合BIMFACE應用的技術方案
• CS客戶端整合BIMFACE應用的技術方案
• 移動App/小程式/公眾號整合BIMFACE應用的技術方案

本篇主要介紹Web網頁整合BIMFACE應用的技術方案。

由於BIMFACE前端使用了 HTML5、CSS3、WebGL等較新的網頁技術，所以下面也就是圍繞 HTML、CSS、JS 等技術做擴充套件介紹。

1、樣式框架（控制元件庫）

前端樣式框架有幾十上百種，這裡列出幾個主流、大家比較常見常用的樣式框架。

• Bootstrap

Bootstrap是全球最受歡迎的前端開源工具庫， 它支援 Sass 變數和 mixin、響應式柵格系統、自帶大量元件和眾多強大的 JavaScript 外掛。 基於 Bootstrap 提供的強大功能，能夠讓你快速設計並自定義你的響應式網站、手機APP等。 Bootstrap框架中的指令碼庫是基於jQuery構建的。

• Layui

LayUI是一款採用自身模組規範編寫的前端 UI 框架， 遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。 其外在極簡，內在飽滿，體積輕盈，元件豐盈，從核心程式碼到 API 的每一處細節都經過精心雕琢，非常適合介面的快速開發。 layui 首個版本釋出於 2016 年秋天，它區別於那些基於 MVVM 底層的 UI 框架， 它更多是為後端程式設計師量身定做，開發者不需要涉足各種前端工具的複雜配置，只需面對瀏覽器本身， 一切所需要的元素與互動，Layui都完成了封裝。 Layui框架中的指令碼庫是基於jQuery構建的。 Layui 相容目前市場上正在使用的全部瀏覽器（IE6/7除外），可作為 PC 端後臺系統與前臺介面的速成開發方案。 我們公司內部的業務系統也用了Layui框架，大家也可以嘗試著用用。

• Element UI

它是餓了麼團隊出品的優秀元件庫。 Element 是一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端元件庫。

• iView

一套基於 Vue.js 的高質量 UI 元件庫。 包含

（1）iView Pro 以 View UI（iView） 為基礎，擴充套件了 30+ 全新的元件， 除了基礎元件外，還包含了業務元件，比如頁頭元件、城市選擇器元件、登入元件、通知選單元件等。 View UI Pro 最大化地減輕開發者工作量，並極大程度地支援響應式設計，對移動端和平板電腦都有更好的支援。

（2）iView Admin Pro Admin Pro 是一套企業級的通用型中後臺前端解決方案， 它基於 View UI（iView），並內建了 View UI Pro。 支援多種佈局，動態選單，強大的鑑權系統，含有大量典型的業務示例，如使用者管理、選單許可權管理、角色許可權管理等。 Admin Pro 由 iView 作者研發，使用最前沿的前端技術棧，支援各型別產品， 比如典型的中後臺應用（類阿里雲後臺、七牛雲後臺，各類 to B 產品）、 社群型應用（類知乎、論壇、門戶）（需使用社交佈局）、 地圖型應用（需使用地圖佈局）、工作桌面型應用（需使用工作桌面佈局）等。 iView官方還對微信小程式專門封裝了一套高質量的UI元件庫，叫 iView Weapp。 iView 與 iView Weapp 校本庫都是基於Vue.js封裝的。 iView 與 iView 與 iView Weapp 兩款元件實現並適配了PC端、移動端、小程式等常用場景， 這裡我比較推薦它。大家可以嘗試用用。

2、指令碼庫

學習網頁程式設計，最開始接觸的就是JavaScript，它是輕量級，解釋型或即時編譯型的程式語言。

JavaScript通常用來為網頁新增各式各樣的動態功能，為使用者提供更流暢美觀的瀏覽效果。
JavaScript指令碼是通過嵌入在HTML中來實現自身的功能的。

• JavaScript

提供的功能非常強大，但是學習起來很困難，一般都會有雜而亂的感覺。
主要有以下原因：

• • JavaScript本身知識很抽象難懂，比如：閉包、內建物件、DOM。
  • JavaScript本身內容很多，如函式庫、物件庫非常多。
  • JavaScript混合了多種程式設計思想。既有面向過程程式設計思想，又有面向物件程式設計思想。
  • 不通的瀏覽器對JavaScript支援也不同。為了適配不同的瀏覽器需要做非常多的程式碼進行特殊處理。
  • 沒有好的編輯器，編寫程式碼全靠大腦來記憶。
  • JavaScript執行在網頁裡面，如果發生錯誤，不太好除錯。
  • 其他原因。

• jQuery

2006年1月就出現了jQuery，它 是一個 JavaScript 庫，極大地簡化了 JavaScript 程式設計。官方API功能強大，文件齊全、使用示例也很多，適配絕大多數主流瀏覽器，非常受歡迎，因此出現了非常多的基於jQuery封裝的免費外掛，非常好用。到目前為止，jQuery依然有非常多的開發者在使用它。

• Angular

誕生於2009年，由 Misko Hevery（米斯科·赫維） 等人建立，後為Google所收購，由Google維護。
AngularJS嘗試去補足HTML本身在構建應用方面的缺陷。

AngularJS通過使用我們稱為指令(directives)的結構，讓瀏覽器能夠識別新的語法。例如：

• 使用雙大括號{{}}語法進行資料繫結
• 使用DOM控制結構來實現迭代或者隱藏DOM片段
• 支援表單和表單的驗證
• 能將邏輯程式碼關聯到相關的DOM元素上
• 能將HTML分組成可重用的元件

• React

FaceBook 公司於2013年5月開源的 JavaScript MVC 框架。由於 React 的設計思想極其獨特，屬於革命性創新，效能出眾，程式碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用。主要用於構建UI。可以在React裡傳遞多種型別的引數，如宣告程式碼，幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變數、甚至是可互動的應用元件。

• Vue.js

作者尤雨溪，中國人。在谷歌工作，工作過程中受到Angular的啟發，從中提取自己所喜歡的部分，開發出了一款輕量框架。

2014年1月，正式對外發布了Vue.Js第一個版本。

Vue.js是一套構建使用者介面的漸進式框架。只關注檢視層，採用自底向上增量開發的設計。它目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

Vue 學習起來非常簡單，目前國內很多大廠都在使用它。

• TypeScript

微軟公司在2015年12月推出了TypeScript。它是 JavaScript型別的超集，它給 JavaScript 添加了語言特性擴充套件。增加的功能包括：

• • 型別批註和編譯時型別檢查
  • 型別推斷、型別擦除
  • 介面、列舉
  • 泛型程式設計、名稱空間
  • 元組、Await非同步程式設計

TypeScript可以編譯成純JavaScript，可以執行在任何瀏覽器、任何計算機和任何作業系統上，並且是免費開源的。上面的AngularJS、Vue.js 的最新版本中底層都是用 TypeScript 重寫的，足以看出TypeScript是多麼的受歡迎。

AJAX = Asynchronous JavaScript And XML（非同步的 JavaScript 和 XML）

通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。 這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。 使用 AJAX 的應用程式案例：新浪微博、Google 地圖、開心網等等。

1、工作原理

2、建立 XMLHttpRequest 物件

3、向伺服器傳送請求

4、伺服器響應

5、XMLHttpRequest 物件屬性

6、onreadystatechange 事件

jQuery AJAX

原始的Ajax使用較麻煩，jQuery Ajax是目前應用的首選，其內部實現原理是基於XMLHttpRequest物件封裝了一些常用易用的方法。

• 小團隊使用 jQuery
• 大團隊有專業前端開發工程師，使用Vue.js

《BIMFace.SDK.CSharp》開源SDK。歡迎大家下載使用。

成在管理，敗在經驗；嬴在選擇，輸在不學！ 貴在堅持！

歡迎關注作者頭條號 張傳寧IT講堂，獲取更多IT文章、視訊等優質內容。

個人作品

1、BIMFace.Community.SDK.NET

開源地址：https://gitee.com/NAlps/BIMFace.SDK

系列部落格：https://www.cnblogs.com/SavionZhang/p/11424431.html

系列視訊：https://www.cnblogs.com/SavionZhang/p/14258393.html

2、ZCN.NET.Common

開源地址：https://gitee.com/NAlps/zcn.net.common

技術棧

1、Visual Studio、.C#/.NET、.NET Core、MVC、Web API、RESTful API、gRPC、SignalR、Python

2、jQuery、Vue.js、Bootstrap

3、資料庫：SQLServer、MySQL、PostgreSQL、Oracle、SQLite、Redis、MongoDB、ElasticSearch、TiDB、達夢DM、人大金倉、 神通、南大通用 GBase、華為 GaussDB 、騰訊 TDSQL 、阿里 PolarDB、螞蟻金服 OceanBase、東軟 OpenBASE、浪潮云溪資料庫 ZNBase

4、ORM：Dapper、Entity Framework、FreeSql、SqlSugar、分庫分表、讀寫分離

5、架構：領域驅動設計 DDD、ABP

6、環境：跨平臺、Windows、Linux（CentOS、麒麟、統信UOS、深度Linux）、maxOS、IIS、Nginx、Apach

7、移動App：Android、IOS、HarmonyOS、微信、小程式、快應用、Xamarin、uni-app、MUI、Flutter、Framework7、Cordova、Ionic、React Native、Taro、NutUI、Smobiler

雲原生、微服務、Docker、CI/CD、DevOps、K8S；

Dapr、RabbitMQ、Kafka、分散式、大資料、高併發、負載均衡、中介軟體、RPC、ELK；

.NET + Docker + jenkins + Github + Harbor + K8S；

出處：www.cnblogs.com/SavionZhang

作者：張傳寧 微軟MCP、系統架構設計師、系統整合專案管理工程師、科技部創新工程師。

專注於微軟.NET技術(.NET Core、Web、MVC、WinForm、WPF)、通用許可權管理系統、工作流引擎、自動化專案(程式碼)生成器、SOA 、DDD、 雲原生(Docker、微服務、DevOps、CI/CD）；PDF、CAD、BIM 審圖等研究與應用。

多次參與電子政務、圖書教育、生產製造等企業級大型專案研發與管理工作。

熟悉中小企業軟體開發過程：需求分析、架構設計、編碼測試、實施部署、專案管理。通過技術與管理幫助中小企業快速化實現網際網路技術全流程解決方案。

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。

如有問題，可以通過郵件[email protected]聯絡。共同交流、互相學習。

如果您覺得文章對您有幫助，請點選文章右下角【推薦】。您的鼓勵是作者持續創作的最大動力！