最近练手一个springboot项目,前端使用thymeleaf框架,在页面导入project过程中遇到问题。目前为止我的开发步骤如下:
第一步,使用webStorm开发静态页面
第二步,使用idea开发后端Project
第三步,将静态页面导入Project
导入project的前提
- webStorm中项目结构如下,注意目录下的红框中内容应该和idea的project中一致
2.idea中项目结构如下,注意红框中内容应和webstorm中一致
导入的步骤
将webstorm项目的上述红框中的内容复制到idea对应目录下
出现的问题
静态页面的效果部分不能正常显示,查看控制台报如下错误
解决办法
1.针对找不到me.css的问题
在引入css的代码中加入如下红框中代码
与此同时,在页面顶部加入如下红框中的语言规范,防止“th:”报错
原理:
① 在webstorm中开发时页面是静态的,因此指定css位置后不报错,但导入到idea的springboot项目中后,使用的是在pom文件中配置的thymeleaf模板,还需要在模板中引入css文件。
② @{}是context路径,即springboot项目的/resources/static,所以引入自己定义的css样式时,可以不加static,例如上述的@{/css/me.css}
③ @{}的大括号中间还可以直接加网络上和本电脑的绝对地址
2.针对找不到图片的问题
在引用图片的地方,加入如下红框中代码