sprignboot(1)-生成模板创建项目、引入自己的前端模板(以ECharts为例)

又是一年金秋时,桂花香,才子笑,甚好!
最近又要开始拿起Springboot做项目了,上次接触Springboot项目是大二暑假刚进入网络中心实验室的时候,当时真的什么也不会,对这个框架也只是略知皮毛,不理解地做开发。现在有一些经验了,自己理解的也更多了,希望能顺利完成这个项目,得到更多的提升。
今天,来叙述一下自己刚开始遇到的一些小问题,希望能给大家一些建议,嘿嘿~:)
1、生成模板,创建项目
前面的引入教程,网上很多,我主要分享一下后面的处理代码吧。首先从git上下载好admin-master的代码,放在本地合适的运行环境和配置环境下,访问对应配置的项目地址即可访问。
sprignboot(1)-生成模板创建项目、引入自己的前端模板(以ECharts为例)
如上图,代码生成可以很方便帮我们生成对应的功能代码,并且包含了基本的架构信息,明天重新截图给大家好好讲一下运行代码的流程。
sprignboot(1)-生成模板创建项目、引入自己的前端模板(以ECharts为例)
在我们生成的代码中,即可看到很清晰的项目功能架构,其中MainApplication是启动文件,运行这个代码即可。
2、引入自己的前端模板(以ECharts为例)
springboot后台框架里resources下的templates是放对应的html页面,也就是视图文件。而上面的static是放对应的js的资源文件。
主要是引入路径的问题,如下图:
sprignboot(1)-生成模板创建项目、引入自己的前端模板(以ECharts为例)
sprignboot(1)-生成模板创建项目、引入自己的前端模板(以ECharts为例)
以引入ECharts模板为例,先从官网上下载对应的js文件,代码中必须引入spring boot的thymeleaf依赖,是一种现代的Java模板引擎。然后对应的html文件放在templates下面,因为生成的代码的命名不同,注意这里是:templates.angel1.users。将对应下载的echarts.min.js放在static目录下面,注意这里是:static.js.angel.users。这里的写法其实是分目录。
查看文件地址,可知,
result.html地址是:
F:***\sample\src\main\resources\templates\angel1\users\result.html
echarts.min.js地址是:
F:*\sample\src\main\resources\static\js\angel1\users\echarts.min.js
所以当在html中引入js文件的时候,需要上溯到同一级的目录下,
这里引入的是’…/…/js/angel1/echarts.min.js’
如果static没有分目录的话,直接包的名字就是static,引入改js的写法应该是’js/angel1/echarts.min.js’