• jquery.js和jquery.min.js的区别和springboot整合echarts.min.js


    1.区别:
    jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js
    文件名不一定完全相同,但通常情况下:
    jquery.js是完整的未压缩的jQuery库,文件比较大,一般用于阅读学习源码或修改源码,一般不用于线上项目。
    jquery.min.js是由完整版的jQuery库经过压缩得来,压缩后功能与未压缩的完全一样,只是将其中的空白字符、注释、空行等与逻辑无关的内容删除,并进行一些优化。这个版本一般用于网站引用使用,减小文件体积,降低网站流量,提升访问速度等。

    2.介绍:
    JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

    jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。
    jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页

    下载echarts.min.js
    注意:下载方法


    仅仅为示例
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>e-charts xAxis demo</title>
        <!-- 引入 ECharts 文件 -->
        <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    </head>
    <body>
    <div id="main" style="
                     600px;
                    height:400px;
                    position:absolute;
                    top:50%;
                    left: 50%;
                    margin-top: -200px;
                    margin-left: -300px;">
        <h4>来了echarts</h4>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style=" 600px;height:400px;"></div>的id
    
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
    </html>

    问题:引入echarts.min.js文件时net::ERR_ABORTED 404

    解决办法:

    在springboot自身带有的那个(项目名+Application)类中继承WebMvcConfigurationSupport重写里面的addResourceHandlers方法
    在这里可以理解为配置在项目启动时扫描static下面的所有文件,也就是告诉springboot在启动的时候带上他们全部一起跑。

    @EnableSwagger2
    @SpringBootApplication
    @EnableJpaRepositories(basePackages = { "com.bling.dab.dao" }, entityManagerFactoryRef = "entityManagerFactoryPrimary", transactionManagerRef = "transactionManagerPrimary")
    @EnableTransactionManagement
    @MapperScan("com.bling.dab.mapper")
    public class DabApplication extends WebMvcConfigurationSupport {
    
        public static void main(String[] args) {
            SpringApplication.run(DabApplication.class, args);
            System.out.println("dab启动完成--------OK!");
        }
    
        //这里配置静态资源文件的路径导包都是默认的直接导入就可以
        @Override
        protected void addResourceHandlers(ResourceHandlerRegistry registry) {
            System.out.println("addResourceHandlers");
            registry.addResourceHandler("/static/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/");
            registry.addResourceHandler("/swagger-ui.html")
                    .addResourceLocations("classpath:/META-INF/resources/");
            registry.addResourceHandler("/webjars/**")
                    .addResourceLocations("classpath:/META-INF/resources/webjars/");
            super.addResourceHandlers(registry);
        }
    
    
    }
  • 相关阅读:
    Diocp截图
    [DIOCP视频]-DIOCPFileServer视频
    DIOCP 运作核心探密
    DIOCP-DIOCPv5的处理能力
    【被C折腾系列】用C调DIOCP编码客户端通信
    DIOCP-V5发布
    MyBean通用报表插件介绍
    Amazon
    输出所有大小写字符的组合
    删除最少字符生成Palindrome
  • 原文地址:https://www.cnblogs.com/h-c-g/p/11093219.html
Copyright © 2020-2023  润新知