zoukankan      html  css  js  c++  java
  • 2、配置静态文件,并添加客户端库

    一、添加中间件

    配置静态文件中间件app.UseStaticFiles(),注意添加位置,在app.UseRouting();之前

    app.UseStaticFiles(); //使用默认文件夹wwwroot 

    二、添加静态文件夹

    1、根目录下添加wwwroot文件夹,文件夹图标自动变成地球形状

    2、在wwwroot文件夹下添加三个文件夹,css、js、lib

     三、添加客户端库

    1、在lib文件夹下添加客户端库

    扩展

     LibMan功能类似于Nuget,Nuget是包管理器(.NET),LibMan是库管理器(CSS/JS)

    库管理器(LibMan) 是一个轻量型客户端库获取工具。 LibMan可从文件系统或从内容分发网络(CDN)下载库和框架。 支持的CDN包括 CDNJS、jsDelivr和unpkg。 将提取所选库文件,并将其置于ASP.NET Core项目中的相应位置。

    从“提供程序”下拉列表中选择库提供程序。 CDNJS是默认提供程序。选unpkg的话实际上就是npm。

    例如要安装bootstrap,输入bootstrap时,会提供以所提供文本开头的库的列表,选择后会显示bootstrap的最新版本。库名称后缀带有 @ 符号和所选提供程序的已知最新稳定版本。

     以下下分别安装bootstrap、jquery、jquery-validation、jquery-easyui

    2、安装bootstrap,可以根据需要进行勾选安装

    安装完成后,自动添加libman.json文件,显示相应信息

     3、其他客户端库添加相同,添加jquery-easyui时候,选@hirohe这项,这个包含相应版本的jquery文件,目前是v1.12

    四、在home的index.cshtml中配置easyui框架

    1、修改index.cshtml的内容,替换如下

    @{
        Layout = null;
    }
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>石榴木工作室</title>
        <link href="~/lib/hirohe/jquery-easyui/themes/color.css" rel="stylesheet" />
        <link href="~/lib/hirohe/jquery-easyui/themes/icon.css" rel="stylesheet" />
        <link href="~/lib/hirohe/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
        <script src="~/lib/hirohe/jquery-easyui/jquery.min.js"></script>
        <script src="~/lib/hirohe/jquery-easyui/jquery.easyui.min.js"></script>
        <script src="~/lib/hirohe/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
        <script src="~/lib/hirohe/jquery-easyui/jquery.easyui-plus.js"></script>
    </head>
    
    <body class="easyui-layout">
        <div data-options="region:'north',border:false" style="height: 40px; background-color: #F5F5F5; padding: 10px;">
            石榴木工作室
        </div>
        <div data-options="region:'west',title:'功能导航',split:true" style=" 180px; padding-top: 2px; overflow:auto">
            <div class="easyui-panel" style="padding:5px" data-options="border:false">
                <ul class="easyui-tree" id="tree" data-options="border:false">
                    <li>
                        <span>目录</span>
                        <ul>
                            <li>菜单一</li>
                            <li>菜单二</li>
                            <li>菜单三</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div data-options="region:'center'">
            <div id="mainTab" class="easyui-tabs" data-options="fit:true,
                 tools:[
                 {iconCls:'icon-reload',text:'刷新', handler:refreshTab },
                 {iconCls:'icon-cancel',text:'关闭全部', handler:closeTab}
                 ]">
                <div id="home" title="我的主页" data-options="closable:false,fit:true" style="padding:3px">
                    <iframe scrolling="auto" frameborder="0" src="" style=" 100%; height: 100%;"></iframe>
                </div>
            </div>
        </div>
    </body>
    <script>
        //菜单树
        $('#tree').tree({
            onClick: function (node) {         //节点的点击事件
                if (node.text == '菜单一') { var url = '/SysSampleMVC'; };
                if (node.text == '菜单二') { var url = '/SysSampleEasyUI'; };
                if (node.text == '菜单三') { var url = '/SysSample'; };
    
                if ($('#tree').tree('isLeaf', node.target)) {    //判断是否是叶子节点
                    addTab(node.text, url);
                } else {    //如果是父节点,单击文本切换展开/折叠节点的状态
                    $(this).tree('toggle', node.target);
                }
            }
        });
    
    
        //增加选项卡
        function addTab(subtitle, url) {
            if (!$("#mainTab").tabs('exists', subtitle)) {  //若选项卡不存在,生成新的选项卡
                var con = '<iframe frameborder="0" scrolling="auto" style="99.5%; height:99%"  src="' + url + '"></iframe>';
                $("#mainTab").tabs('add', {
                    title: subtitle,
                    content: con,
                    closable: true,
                    loadingMessage: '加载中......'
                });
            } else {     //若选项卡已存在,选择该选项卡
                $("#mainTab").tabs('select', subtitle);
                $("#tab_menu-tabrefresh").trigger("click");
            }
        }
    
        //刷新选项卡
        function refreshTab() {
            var index = $('#mainTab').tabs('getTabIndex', $('#mainTab').tabs('getSelected'));
            if (index != -1) {
                var tab = $('#mainTab').tabs('getTab', index);
                $('#mainTab').tabs('update', {
                    tab: tab,
                    options: {
                        selected: true
                    }
                });
            }
        }
    
        //关闭选项卡
        function closeTab() {
            $('.tabs-inner span').each(function (i, n) {
                var t = $(n).text();
                if (t != '') {
                    if (t != "我的主页") {
                        $('#mainTab').tabs('close', t);
                    }
                }
            });
        }
    </script>
    View Code

     2、F5运行,运行结果如下

  • 相关阅读:
    思考:缓存的使用?灵活运用?
    线程和并发--基础
    java基础--方法
    java基础--数组
    数据结构复习笔记
    asp搭建网站
    转换磁盘格式
    cypress 与其他测试框架的区别
    cypress启动时报错file already exists,文件已经存在解决办法
    cypress的安装
  • 原文地址:https://www.cnblogs.com/shiliumu/p/15385914.html
Copyright © 2011-2022 走看看