Asp.net+Vue+EmelentUI的實現(三)JS和CSS的自動載入

在前面的文章中實現了框架的簡單搭建、身份的驗證，但每個頁面都要引入vue和element等相關的js、css，這樣相當繁瑣，那有沒有什麼方式能夠自動實現的呢？有的。這就要用到asp.net的機制。因爲aspx的每一個頁面都是通過後臺請求來推送到前端的，所以可以在收到請求後，作出一定的處理，把需要加載的js、css直接賦進去。爲此，我們增加了一個PageBase類，代碼如下。

/// <summary>
    /// 基本頁
    /// </summary>
    public class PageBase : System.Web.UI.Page
    {
        #region 內部常量
        private static readonly string SCRIPT_INCLUDE_TEMPLATE = "<script src=\"{0}\" type=\"text/javascript\"></script>\r\n";
        private static readonly string STYLE_INCLUDE_TEMPLATE = "\r\n<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\"/>\r\n";
        private static readonly string SCRIPT_CONTENT_TEMPLATE = "<script type=\"text/javascript\">{0}</script>\r\n";
        #endregion

        protected void Page_InitComplete(object sender, EventArgs e)
        {
            AddMeta();
            AddDefaultCss();
            AddDefaultJs();
            AddCurrentPageJsCss();
        }

        /// <summary>
        /// 添加meta
        /// </summary>
        private void AddMeta()
        {
            LiteralControl viewportControl = new LiteralControl();
            viewportControl.ID = "viewport";
            viewportControl.Text = "\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />";
            this.Header.Controls.AddAt(GetNextControlIndex(this), viewportControl);
        }

        /// <summary>
        /// 添加默認的CSS
        /// </summary>
        private void AddDefaultCss()
        {
            //加載element-ui.css
            AddCss("element-ui.css", "/Content/ElementUI/element-ui.css", "/Content/ElementUI/element-ui.css");
        }

        /// <summary>
        /// 添加css
        /// </summary>
        /// <param name="cssId">css的id</param>
        /// <param name="cssFullPathOfDebug">調試的CSS完整路徑</param>
        /// <param name="cssFullPathOfRelease">發佈的CSS完整路徑</param>
        private void AddCss(string cssId, string cssFullPathOfDebug, string cssFullPathOfRelease)
        {
            LiteralControl cssControl = new LiteralControl();
            cssControl.ID = cssId;
#if DEBUG
            cssControl.Text = String.Format(STYLE_INCLUDE_TEMPLATE, cssFullPathOfDebug);
#else
               elementUICssControl.Text = String.Format(STYLE_INCLUDE_TEMPLATE, cssFullPathOfRelease);
#endif

            this.Header.Controls.AddAt(GetNextControlIndex(this), cssControl);
        }

        /// <summary>
        /// 添加默認的js
        /// </summary>
        private void AddDefaultJs()
        {           

            //vue-js
            AddJs("vue.js", "/Scripts/vue.js", "/Scripts/vue.min.js");

            //vue-resource.js
            AddJs("vue-resource.js", "/Scripts/vue-resource.js", "/Scripts/vue-resource.min.js");

            //element-ui.js
            AddJs("element-ui.js", "/Scripts/ElementUI/element-ui.js", "/Scripts/ElementUI/element-ui.js");

            //kit.js
            AddJs("kit.js", "/Scripts/kit.js", "/Scripts/kit.js");

            //global.js
            AddJs("/Scripts/global.js", "/Scripts/global.js", "/Scripts/global.js
        }


        /// <summary>
        /// 添加JS
        /// </summary>
        /// <param name="jsId">js的id</param>
        /// <param name="jsFullPathOfDebug">調試的JS完整路徑</param>
        /// <param name="jsFullPathOfRelease">發佈的JS完整路徑</param>
        private void AddJs(string jsId, string jsFullPathOfDebug, string jsFullPathOfRelease)
        {
            LiteralControl jsControl = new LiteralControl();
            jsControl.ID = jsId;
#if DEBUG
            jsControl.Text = String.Format(SCRIPT_INCLUDE_TEMPLATE, jsFullPathOfDebug);
#else
            jqueryControl.Text = String.Format(SCRIPT_INCLUDE_TEMPLATE, releaseFullPath);
#endif
            this.Header.Controls.AddAt(GetNextControlIndex(this), jsControl);
        }


        #region GetNextControlIndex
        /// <summary>
        /// 取得下一個控件的位置
        /// </summary>
        /// <returns></returns>
        private static int GetNextControlIndex(Page page)
        {
            int index = 0;

            // 如果存在自定義（以CONTROL_ID_PREFIX開頭）的控件，則返回最後一個自定義控件的下一個位置
            // 如果不存在自定義的控件，則返回<title>的下一個位置
            bool startControlBlock = false;
            int titleIndex = 0;
            String CONTROL_ID_PREFIX = "";
            foreach (Control c in page.Header.Controls)
            {
                if (c is HtmlTitle)
                {
                    titleIndex = index;
                }

                if (c.ID != null && c.ID.StartsWith(CONTROL_ID_PREFIX))
                {
                    startControlBlock = true;
                }
                else
                {
                    if (startControlBlock)
                    {
                        break;
                    }
                }

                index++;
            }

            int retIndex = startControlBlock ? index : titleIndex + 1;
            if (retIndex < 0)
            {
                retIndex = 0;
            }
            else if (retIndex >= page.Header.Controls.Count)
            {
                retIndex = page.Header.Controls.Count - 1;
            }

            return retIndex;
        }
        #endregion


        #region AddCurrentPageJsCss
        /// <summary>
        /// 添加當前頁的JS和CSS
        /// </summary>
        private void AddCurrentPageJsCss()
        {
            var cssPath = AppRelativeVirtualPath.Replace(".aspx", ".css");
            var jsPath = AppRelativeVirtualPath.Replace(".aspx", ".js");
            if (File.Exists(Server.MapPath(cssPath)))
            {
                cssPath = cssPath.Replace("~", "");
                AddCss(cssPath, cssPath, cssPath);
            }
            if (File.Exists(Server.MapPath(jsPath)))
            {
                jsPath = jsPath.Replace("~", "");
                AddJs(jsPath, jsPath, jsPath);
            }
        }
        #endregion

        protected virtual void Page_Load(object sender, EventArgs e)
        {

        }
    }

AddMeta是添加頁面設置相關的元數據

AddDefaultCss添加默認的css，比如element ui要用到的element-ui.css

AddDefaultJs添加默認的js，比如vue.js、vue-resource.js、element-ui.js、kit.js、global.js等。

AddCurrentPageJsCss是添加當前頁面對應的js和css，這樣做的目的是爲了將aspx、js、css變成獨立的文件，而這三個文件同時歸到同一個文件下，有點像微信小程序的page概念，一來可以用代碼統一加載js和css，二來便於維護。

其中ProductQuery.aspx的後臺代碼類是繼承自PageBase，代碼如下

 public partial class ProductQuery :PageBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }

ProductQuery.aspx的代碼如下(沒有添加任何的JS和CSS)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductQuery.aspx.cs" Inherits="AspNetVueElementUI.Pages.ProductManage.ProductQuery.ProductQuery" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

ProductQuery.js

window.onload = function () {
    var v = new Vue({
        el: "#app",
        data: {
            loading: false,
            productList:[]
        },
        methods: {
            getProductList: function () {
                var url = "/API/Product/List"
                this.$http.get(
                    url
                ).then(function (res) {
                    var result = res.body;
                    this.loading = false;
                    if (result.Status == 0) {
                        this.productList = result.Data;
                    }
                    else {
                        this.$message({
                            message: result.Message,
                            type: 'error'
                        })
                    }
                }, function (e) {
                    this.$message({
                        message: '異常',
                        type: 'error'
                    })
                    console.log(JSON.stringify(e));
                    this.loading = false;
                });
            }
        }
    });
    v.getProductList();
}

登錄成功後，直接訪問ProductQuery.aspx頁面，結果如下圖

從圖中可以看到，相關的js和css都已經自動載入，同時讀取了相應的數據顯示到界面上。

源碼下載