springboot集成thymeleaf时css js加载不出来的问题_springboot thymeleaf 不显示css js-程序员宅基地

springboot项目的css 和js默认位置是在static中，所以如果没有另外的修改的话，直接创建一个static文件夹，把css和js放入即可。

这里放一个实例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>儿童随访记录表</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <script src="js/macarons.js"></script>
  <script src="http://localhost:8083/ssxj"></script>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/highcharts-more.js"></script>


</head>


<body>
<h2>儿童随访记录表数据比例统计</h2>
<!-- 为ECharts准备一个具备大小（宽高）的Domo -->
<div id="main" style="width:100%;height:5200px;overflow-y:auto;/*overflow-x: scroll*/"></div>


<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  //const myChart = echarts.init(dom, 'macarons')
  // var myChart = echarts.init(document.getElementById('main'),'macarons');
  $(document).ready(function(){
    var myChart = echarts.init(document.getElementById('main'),e_macarons);

    // 指定图表的配置项和数据
    myChart.showLoading({
      //height:100%,
      //width:100%,
      text: 'loading',//加载时候的文本
      //x:left,
      y:-10,

      color: '#4cbbff',//加载时候小圆圈的颜色
      textColor: '#4cbbff',//加载时候文本颜色
      // maskColor: 'white',//加载时候的背景颜色

    });
    myChart.setOption({
      grid: {
        left: '20%',
        right: '10px',
        //bottom: '10px',
        //containLabel:true,
      },
      title: {
        text: '各字段数据量统计'
      },
      tooltip: {},
      legend: {
        data: ['数据比例（%）']
      },
      yAxis: {
        type: 'category',
        data: [],
        inverse: true,

        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          interval: 0,
          rotate: 0//角度顺时针计算的
        }
      },
      xAxis: {},
      series: [{
        name: '数据比例（%）',
        type: 'bar',
        barWidth : 20,//柱图宽度
        barGap:20,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        data: []
      }]
    });
    //使用jQuery中的$.get()获取data.json文件，使用done函数;
    //done(function(data))中data表示调用的函数返回的数据
    $.get('http://localhost:8083/etsfjl').done(function(data){
      myChart.hideLoading();
      myChart.setOption({
        yAxis:{
          data:data.names
        },
        series:{
          name:'数据比例（%）',
          data:data.values,
        }
      });
    });
  });


</script>
</body>
</html>

这里是因为没有放template文件夹，thymeleaf检测路径也直接定位到static，直接写在一起了。

同时在java中的文件流对象，读取文件的起始目录是项目目录。

本文链接：https://blog.csdn.net/m0_46556534/article/details/122581824

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【C/C++】JAVA与C/C++ AES加密算法同步_botan c++ aes java 互通-程序员宅基地

文章浏览阅读4.6k次。此处我们使用的是AES的基础加密模式，即：电码本模式 ECBJAVA代码如下： //创建AES加密实例 SecretKeySpec skeySpec = new SecretKeySpec(keyBytes, "AES"); Cipher cip = Cipher.getInstance("AES/ECB/NoPadding");//算法/模式/补码方式 cip.init(C_botan c++ aes java 互通

民工哥折腾了2年多的《Linux系统运维指南》终于和大家见面了_linux系统运维指南:从入门到企业实战 pdf-程序员宅基地

文章浏览阅读2.5k次，点赞5次，收藏17次。2018年3月，我与张老师就这么在微信上聊了起来，起初我并没有写书的打算，我们之间只是通过讨论、交流的形式聊聊关于出书的方方面面。最终，敌不过张老师超强的专业能力、细致的解说与盛情相邀，我答应张老师写一本Linux系统运维的图书并由人邮出版。由此，我踏上了漫漫2年多的写书之路。为什么写这本书写书一方面是我对自己所学知识的查漏补缺过程，另一方面也可以向即将进入或已经入行的Linux系统运维同..._linux系统运维指南:从入门到企业实战 pdf

tf.reduce_sum()方法深度解析-程序员宅基地

文章浏览阅读2k次，点赞6次，收藏5次。tf.reduce_sum()函数深度解析从矩阵，数组，数据存储的角度解析axis参数的意义_tf.reduce_sum

adb获取app包名的方法_adb获取包名-程序员宅基地

文章浏览阅读9.8k次，点赞4次，收藏29次。adb获取app包名的方法_adb获取包名

虾皮、lazada店铺运营攻略，如何搭建高效、稳定的自养号测评系统-程序员宅基地

文章浏览阅读913次，点赞16次，收藏10次。总之，要做好虾皮店铺，不仅需要明确的定位和优质的产品，还需要精心的运营和持续的改进。通过不断优化店铺形象、制定有效的营销策略、提供优质的客户服务以及加强供应链管理等手段，您将能够在激烈的竞争中脱颖而出，实现店铺的长足发展。1.稳定的网络环境是基石，它需要经过技术手段的洗礼，将电脑或手机的底层硬件参数伪装成国外数据，以躲避平台通过IP进行的深度检测。这种真实性高的评价能够帮助商家获得更多的信任和认可，从而提升产品的排名和流量的分配。您可以关注行业动态，学习先进的经营理念和技术，以提高店铺的运营水平。

统计检验问题:Friedman Test,Nemenyi test检验和Bonferroni-Dunn test检验_统计测试 cd diagrams-程序员宅基地

文章浏览阅读5k次，点赞11次，收藏43次。统计检验_统计测试 cd diagrams

随便推点

hadoop大数据-HDFS分布式文件系统及高可用_hdfs实现高可用文件存储-程序员宅基地

文章浏览阅读2k次，点赞2次，收藏9次。系列文章目录hadoop大数据-HDFS分布式文件系统hadoop大数据-HDFS分布式文件系统系列文章目录一、hadoop简介二、Hadoop的搭建2.1本地独立模式2.1伪分布式模式的搭建完成分布式的搭建完全分布式的环境搭建完全分布式的配置hadoop结点扩容四、HDFS工作原理一、hadoop简介大数据主要两个点：分布式存储以及分布式计算，基本上计算的调度跟着存储走，因为迁移存储的成本高于计算大数据是个生态，本次学习Hadoop的HDFS分布式文件系统MapReduce离线计算GF_hdfs实现高可用文件存储

【合集】常见中间件漏洞_hrs中间件-程序员宅基地

文章浏览阅读2.9k次，点赞3次，收藏37次。1. IIS1. PUT漏洞用户配置不当，exp:https://github.com/hackping/HTTPMLScan.git2. 短文件名猜解IIS的短文件名机制，可以暴力猜解短文件名，访问构造的某个存在的短文件名，会返回404，访问构造的某个不存在的短文件名，返回400。exp:https://github.com/WebBreacher/tilde_enum3.远程代码执行(CVE-2017-7269))**exp**:https://github.com/zcgonv_hrs中间件

db2基本概念-程序员宅基地

文章浏览阅读368次。DB2支持以下两种类型的表空间： 1、系统管理存储器表空间（SMS-SYSTEM MANAGED STORAGE） 2、数据库管理存储器表空间（DMS-DATABASE MANAGED STORAGE） SMS、DMS用户表空间的特性对照特性 ..._db2

模拟window桌面实现-程序员宅基地

文章浏览阅读84次。正在开发中的游戏有个全屏功能--可以在window桌面背景上运行，就像一些视频播放器在桌面背景上播放一样的，花了个上午整了个Demo放出来留个纪念。实现功能：显示图标，双击图标执行相应的程序，右击图标弹出该图标对应得菜单，点击非图标区则弹出桌面菜单。需要完整工程可以点此下载：DesktopWindow.rar。程序效果图如下：在这个程序里，定义了一个XShellItem..._模拟实现windows桌面效果

https://www.byhy.net/tut/webdev/django/01/-程序员宅基地

文章浏览阅读944次。https://www.byhy.net/tut/webdev/django/01/_byhy.net

vue玩转移动端H5微信支付和支付宝支付_移动端支付宝微信支付vue项目怎么写-程序员宅基地

文章浏览阅读5.8k次，点赞13次，收藏57次。业务场景介绍：H5移动端支持微信支付 [ 微信支付分为微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付宝支付 [手机网站支付转 APP 支付官方API ]订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接）一、移动端微信支付，vue中如何玩？在移动端微信支付分为微信内支付和微信外支付。1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内：//判断是否微信 is__移动端支付宝微信支付vue项目怎么写