SpringBoot项目搭建LayUI框架,以及引入LayUI框架js、css的问题总结

SpringBoot项目搭建LayUI框架,以及引入LayUI框架js、css的问题总结

一、SpringBoot项目搭建LayUI框架:

1、首先在官网下载LayUI前端文件,解压。
2、将解压后的文件夹里找见存放css和js的layui文件夹,将整个文件夹复制粘贴到src/main/resources中的static文件夹下。
具体目录结构如下图:
SpringBoot项目搭建LayUI框架,以及引入LayUI框架js、css的问题总结
3、在src/main/webapp或者src/main/resource/templates下创建index.html,编写index.html文件,内容如下图。
SpringBoot项目搭建LayUI框架,以及引入LayUI框架js、css的问题总结
4、保存完成后点击运行项目,运行结果如下图。
SpringBoot项目搭建LayUI框架,以及引入LayUI框架js、css的问题总结

二、引入css、js所遇到的问题:

1、html 文件放在resources/templates下,或者在src/main/webapp下。
2、js/css 等静态资源放在resources/static下。
项目目录如下图:
SpringBoot项目搭建LayUI框架,以及引入LayUI框架js、css的问题总结
3、我在使用html引入layui的js和css时,遇到了html无法引入css和js。

三、造成引入js和css问题的原因:

在引入js和css时,使用相对路径,路径不能使用官网上现成模版里的../layui/css/layui.css../layui/layui.js,我们自己在使用的时候,需要改为./layui/css/layui.css./layui/layui.js。这样就能正常引入css和js文件。

温馨提示:该文章为本人自己创作,转载请标明出处。感谢各位!!!谢谢大家!!!
QQ:961094233
邮箱:[email protected]