springboot集成thymeleaf时css js加载不出来的问题

最新推荐文章于 2023-12-21 22:42:35 发布

董十二

最新推荐文章于 2023-12-21 22:42:35 发布

阅读量2.2k

点赞数 1

文章标签： javascript spring boot css

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

版权

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中的文件流对象，读取文件的起始目录是项目目录。

董十二

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
springboot集成thymeleaf时css js加载不出来的问题

springboot项目的css 和js默认位置是在static中，所以如果没有另外的修改的话，直接创建一个static文件夹，把css和js放入即可。这里放一个实例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>儿童随访记录表</title>  <script src="ht.
复制链接

扫一扫