Asp.net+Vue+EmelentUI的实现(三)JS和CSS的自动载入

最新推荐文章于 2024-09-13 13:38:18 发布

_学而时习之_

最新推荐文章于 2024-09-13 13:38:18 发布

阅读量2.7k

点赞数

分类专栏： ASP.NET vue ElementUI 文章标签： vue element ui vue-resource asp.net

本文链接：https://blog.csdn.net/xxdddail/article/details/89883171

版权

本文介绍了如何利用ASP.NET的机制，通过创建PageBase类，实现在每次页面请求时自动添加Vue和ElementUI所需的JS及CSS资源。通过AddMeta、AddDefaultCss和AddDefaultJs等方法，确保了框架组件如vue.js、vue-resource.js、element-ui.css等的自动载入。此外，AddCurrentPageJsCss方法用于添加特定页面的JS和CSS，实现了代码的模块化和便于维护。实例展示了ProductQuery.aspx页面在登录成功后，无需手动添加脚本，依然能正确显示数据并加载所需资源。

摘要由CSDN通过智能技术生成

在前面的文章中实现了框架的简单搭建、身份的验证，但每个页面都要引入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");