在前一篇博客《BIMFACE二次开发系列50 Web网页中使用jQuery加载模型与图纸》中详细介绍了在网页中使用jQuery加载模型与图纸

本篇博客主要介绍Web网页中使用Vue.js加载模型与图纸以及其他的应用开发。开发步骤与使用jQuery基本相同，更确切地将就是将jQuery语法翻译成Vue.js来表达。先看效果

步骤1：下载并引用 Vue.js

Vue.js 官方目前发布的版本已经到3.X。之前广泛使用的是2.X，两个版本功能相差很大。本文以2.x版本为例进行讲解演示。

Vue.js 是我们中国人创造发明的，作者叫尤雨溪。

尤雨溪在谷歌工作，工作过程中受到Angular的启发，从中提取自己所喜欢的部分，开发出了一款轻量框架。

2014年1月，正式对外发布了Vue.Js第一个版本。具有以下特点：

它是一套构建用户界面的渐进式框架。只关注视图层，采用自底向上增量开发的设计。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 入门学习非常简单，目前国内很多大厂都在使用它。

GitHub下载地址：

下载后直接在网页中引用

步骤2：下载并引用 BIMFace JSSDK

下载地址：

下载的文件是一个压缩包，解压后目录结构如下：

另外2个目录是用于离线数据包功能，这里只需要把BimfaceSDKLoader@latest-release.js文件拷贝到项目中即可，建议增加文件版本号，修改为BimfaceSDKLoader@latest-release-3.6.159.js。有如下两种引用方式，选择任一种都可以。

方式1：引用本地文件

方式2：引用BIMFACE官方在线文件。优点：一直保持最新版本。

步骤3：根据 FileId 获取 ViewToken

查看BIMFACE需要使用ViewToken，ViewToken 代表对单个模型/集成模型/模型对比的访问权限。首先根据 FileId 调用接口获取AccessToken，通过AccessToken调用接口获取ViewToken。

Web.aspx、Web.html、Web.cshtml 中使用Ajax调用一般处理程序或者MVC控制器是最常用的方法。jQuery中针对Ajax封装了几个常用的方法，简单、实用、易用，示例如下：

// 加载模型或图纸function loadBIMFile(bimFaceFileId) {    $("#bimContainer").empty();//清空容器内容。解决切换不同图纸时会保留上一次图纸内容的问题。    $.ajax({        url: "../Handlers/GetViewTokenHandler.ashx",        data: { fileId: bimFaceFileId },        dataType: "json",        type: "GET",        async: false, //同步（此处设置为同步或者异步都可以）        success: function (data) {            if (data.code == true) {                showBIMModel(data.viewToken);// 加载BIMFACE模型            } else {                alert("【警告】\r\n" + data.message);            }        },        error: function (e) {            console.log('GetViewTokenHandler.ashx请求发生异常：' + e);            alert("【异常】\r\n" + '获取ViewToken发生异常');        },        complete: function (XMLHttpRequest, status) {        }    });}

但是Vue.js中并没有直接提供Ajax的相关方法。在Vue.js 1.x 版本中使用到 vue-resource 库，在2.x版本推荐使用 Axios 来完成 Ajax 请求。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。GitHub下载地址：

下载完成后在项目中引用

使用axiox请求一般处理程序的代码如下：

loadBIMFile(bimFaceFileId) { // 加载模型或图纸    document.getElementById("bimContainer").innerHTML = "";//清空容器内容。解决切换不同图纸时会保留上一次图纸内容的问题。    // 根据FileId，查询ViewToken    axios.get('../Handlers/GetViewTokenHandler.ashx', {        params: {            fileId: bimFaceFileId        }    })        // .then(function (response) {  /* 匿名函数的指针，指向函数操作的本身。所以then 函数中无法调用 Vue 对象中定义的函数 */        //    if (response.data.code == true) {        //        alert('response.data.viewToken：' + response.data.viewToken);        //        this.showBIMModel(response.data.viewToken);// 加载BIMFACE模型        //    } else {        //        alert("【警告】\r\n" + data.message);        //    }        //})        .then((response) => {  /* 箭头函数的指针，指向 Vue 组件的本身 */            if (response.data.code == true) {                this.showBIMModel(response.data.viewToken);// 加载BIMFACE模型            } else {                alert("【警告】\r\n" + data.message);            }        }).catch((error) => {            console.log('GetViewTokenHandler.ashx请求发生异常：' + error);            alert("【异常】\r\n" + '获取ViewToken发生异常 ' + error);        });},

特别说明

Vue.js 使用 axios 的回调函数中 this 指向问题。then() 回调函数

回调函数写成箭头函数（上述代码第18行），则回调函数的指针指向 Vue 组件本身，可以通过 this 关键字调用 Vue 组件其内部定义的属性、方法等。回调函数写成匿名函数（上述代码第10行），则回调函数的指针指向函数操作的本身，此时如果用this去调用Vue组件中定义的属性、方法会报错。

所以此处写成箭头函数形式，然后调用其他方法。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

本质上也是对原生XHR的封装，只不过它是 Promise 的实现版本，符合最新的ES规范，有以下特点：

从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF

具体请参考Axios中文文档

一般处理程序

using System;using System.Configuration;using System.Text;using System.Web;using BIMFace.SDK.CSharp.API;using BIMFace.SDK.CSharp.Common.Extensions;using BIMFace.SDK.CSharp.Common.Log;namespace BIMFace.SDK.CSharp.Sample.Handlers{    /// <summary>    /// GetViewTokenHandler 的摘要说明    /// </summary>    public class GetViewTokenHandler : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentEncoding = Encoding.UTF8;            string bimfaceAppKey = ConfigurationManager.AppSettings["BIMFACE_AppKey"];            string bimfaceAppSecret = ConfigurationManager.AppSettings["BIMFACE_AppSecret"];            if (bimfaceAppKey.IsNullOrWhiteSpace())            {                LogUtility.Error("web.config 中未配置 BIMFACE_AppKey。");            }            if (bimfaceAppSecret.IsNullOrWhiteSpace())            {                LogUtility.Error("web.config 中未配置 BIMFACE_AppSecret。");            }            string fileId = context.Request["fileId"];            IBasicApi basicApi = new BasicApi();            try            {                string accessToken = basicApi.GetAccessToken(bimfaceAppKey, bimfaceAppSecret).Data.Token;                string viewToken = basicApi.GetViewTokenByFileId(accessToken, fileId.ToLong()).Data;                var response = new                {                    code = true,                    message = "",                    viewToken = viewToken                };                context.Response.Write(response.SerializeToJson());            }            catch (Exception ex)            {                var response = new                {                    code = false,                    message = "获取模型ViewToken失败。",                    viewToken = ""                };                context.Response.Write(response.SerializeToJson());                LogUtility.Error("GetViewTokenHandler 产生异常：" + ex);            }            context.Response.End();        }        public bool IsReusable        {            get            {                return false;            }        }    }}

步骤4：根据ViewToken加载模型或者图纸

主要使用了JSSDK中的BimfaceSDKLoaderConfig类与BimfaceSDKLoader对象，示例完整的代码如下：

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>网页中使用Vue.js加载模型/图纸</title>    <style>        * {            margin: 0;            padding: 0;        }        html, body {            height: 100%;            overflow: hidden;        }        .viewer-wrap {            width: 100%;            height: 100%;            background: rgb(50, 50, 55) none repeat scroll 0% 0%;        }    </style>    <script src="../Content/js/Vue-2.6.14.min.js"></script>    <script src="../Content/js/axios-0.23.0.min.js"></script>    <script src=";></script></head><body>    <div id="bimContainer" class="viewer-wrap">    </div>    <script type="text/javascript">        window.onload = function () {            //var vm =            new Vue({                el: '#bimContainer',                data: {                    /* bimFaceFileId 调用上传接口把文件发送到BIMFACE服务器后返回fileID，开发者记录下来。                     * fileId:10000709359577 模型                     * fileId:10000709090473 图纸                     * */                    fileId: 10000709359577,                    app: null,                    viewer2D: null,                    viewer3D: null,                    modelViewer: {                        toolbar: undefined,  // 工具条                        annotationmanager: undefined,  // annotation的绘制管理器                        annotationToolbar: undefined,                        annotationControl: undefined   // 重写annotation的保存、取消                    }                },                beforeCreate: function () {                    /* 在实例初始化之后，数据观测（data observer） 和 event/watcher 事件配置之前被调用 */                    console.log('beforCreate');                },                created: function () {                    /* 在实例创建完成后被立即调用。                     * 在这一步，实例已完成以下配置：数据观测（data observer）、属性和方法的运算、watch/event 事件回调。                     * 然后，挂在阶段还未开始，$el 属性目前不可见。                     */                    console.log('created');                },                beforeMount: function () {                    /* 在挂载开始之前被调用：相关的渲染函数首次被调用*/                    console.log('beforMount');                },                mounted() {                    /* el被新创建的 vm.$el 替换，挂载成功 */                    console.log('mounted');                    this.loadBIMFile(this.fileId);                },                beforeUpdate: function () {                    /* 数据更新时调用 */                    console.log('beforeUpdate');                },                updated: function () {                    /* 组件 DOM 已经更新，组件更新完毕 */                    console.log('updated');                },                methods: {                    loadBIMFile(bimFaceFileId) { // 加载模型或图纸                        document.getElementById("bimContainer").innerHTML = "";//清空容器内容。解决切换不同图纸时会保留上一次图纸内容的问题。                        // 根据FileId，查询ViewToken                        axios.get('../Handlers/GetViewTokenHandler.ashx', {                            params: {                                fileId: bimFaceFileId                            }                        })                            // .then(function (response) {  /* 匿名函数的指针，指向函数操作的本身。所以then 函数中无法调用 Vue 对象中定义的函数 */                            //    if (response.data.code == true) {                            //        alert('response.data.viewToken：' + response.data.viewToken);                            //        this.showBIMModel(response.data.viewToken);// 加载BIMFACE模型                            //    } else {                            //        alert("【警告】\r\n" + data.message);                            //    }                            //})                            .then((response) => {  /* 箭头函数的指针，指向 Vue 组件的本身 */                                if (response.data.code == true) {                                    this.showBIMModel(response.data.viewToken);// 加载BIMFACE模型                                } else {                                    alert("【警告】\r\n" + data.message);                                }                            }).catch((error) => {                                console.log('GetViewTokenHandler.ashx请求发生异常：' + error);                                alert("【异常】\r\n" + '获取ViewToken发生异常 ' + error);                            });                    },                    showBIMModel(viewToken) {// 显示BIMFACE模型                        var loaderConfig = new BimfaceSDKLoaderConfig(); // 设置BIMFACE JSSDK加载器的配置信息                        loaderConfig.viewToken = viewToken;                        BimfaceSDKLoader.load(loaderConfig, this.successCallback, this.failureCallback);  // 加载BIMFACE JSSDK加载器                    },                    successCallback(viewMetaData) { // 加载成功回调函数                        /* modelViewer 是全局对象，它与具体的图纸或者模型一一对应。如果切换了图纸/模型，则需要将其重置，然后在后续操作中再创建。*/                        modelViewer = {                            toolbar: undefined,  // 工具条                            annotationmanager: undefined,  // annotation的绘制管理器                            annotationToolbar: undefined,                            annotationControl: undefined   // 重写annotation的保存、取消                        };                        var dom4Show = document.getElementById('bimContainer'); // 获取DOM元素                        if (viewMetaData.viewType == "3DView") {                            var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();                            webAppConfig.domElement = dom4Show;                            app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig); // 创建WebApplication                            app.addView(viewMetaData.viewToken);//temp_ViewToken   // 添加待显示的模型                            viewer3D = app.getViewer();  // 从WebApplication获取viewer3D对象                            // 监听添加view完成的事件                            viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {                                // 调用viewer3D对象的Method，可以继续扩展功能                                modelViewer.toolbar = dom4Show.getElementsByClassName("bf-toolbar-bottom");                                //自适应屏幕大小                                window.onresize = function () {                                    viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40);                                }                            });                        }                        else if (viewMetaData.viewType == "drawingView") {                            var webAppConfig = new Glodon.Bimface.Application.WebApplicationDrawingConfig();                            webAppConfig.domElement = dom4Show;                            webAppConfig.viewToken = viewMetaData.viewToken;                            app = new Glodon.Bimface.Application.WebApplicationDrawing(webAppConfig); // 创建WebApplication                            app.load(viewMetaData.viewToken);//viewToken  // 添加待显示的模型                            viewer2D = app.getViewer();// 从WebApplication获取viewerDrawing对象                            this.drawingViewExtend(viewer2D);    // 监听添加view完成的事件                        }                    },                    failureCallback(error) {// 加载失败回调函数                        console.log(error);                    },                    drawingViewExtend(viewer2D) {// 矢量dwg扩展功能                        var viewerEvents = Glodon.Bimface.Viewer.ViewerDrawingEvent;                        // 注册 ComponentsSelectionChanged ViewerDrawing图元点击选中事件                        viewer2D.addEventListener(viewerEvents.ComponentsSelectionChanged, function () {                            //ToTo 通过图元ID找到图框ID                        });                        // 注册 Loaded ViewerDrawing加载完毕事件                        viewer2D.addEventListener(viewerEvents.Loaded, function () {                            var dom4Show = document.getElementById('bimContainer'); // 获取DOM元素                            modelViewer.toolbar = dom4Show.getElementsByClassName('.bf-toolbar-bottom');                            //自适应屏幕大小                            window.onresize = function () {                                viewer2D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40);                            }                        });                    }                }            });        }    </script></body></html>

下一篇《BIMFACE二次开发系列52 CS客户端集成BIMFACE应用的技术方案》

《BIMFace.SDK.CSharp》开源SDK。欢迎大家下载使用：

欢迎交流、评论、点赞、转发，关注作者，每天分享优质IT内容。

#浓眉与霍华德发生冲突#

#印度一架幻影2000战机训练时坠毁#

#今年冬季将形成拉尼娜事件#

#北京一对夫妻发热后打牌致多人确诊#

#保罗成为NBA首位2万分+1万助攻球员#