Springboot 实践(5)springboot添加资源访问目录及目录测试

        前文讲解了swagger测试服务控制器,实现了数据库数据访问,这些功能都是运行在后台服务器上,实际用户并不能直接调用接口获取数据,即使用户能够利用接口获取到数据,数据也是结构化数据,不能争取转化成用户使用的数据状态,因此,生动形象的用户界面也是软件开发中不可获取的重要内容。

        此文讲解给项目配置静态资源访问目录、包括css、js、img、html等文件的访问目录。

Springboot 实践(5)springboot添加资源访问目录及目录测试_第1张图片

图1、项目目录

1、创建目录

        如图1所示,项目静态资源目录是放到“src/main/resources”中,springboot默认配置的/**映射到/static(或/public ,/resources,/META-INF/resources),此处利用默认路径”/static”,创建项目目录

(1)创建“static”文件夹

右键点击“src/main/resources”中,弹出菜单中选择“new” à “Folder”,输入文件夹名称 “static”,点击“finish”按钮

(2)在“static”创建文件夹“assets”,后期在介绍spring security时再介绍这个文件夹的开关作用。创建方法参考(1);

(3)在“assets”下,分别创建“css”、“js”、“img”文件夹,创建方法参考(1);

Springboot 实践(5)springboot添加资源访问目录及目录测试_第2张图片

图2、添加静态资源后项目目录

2、添加静态资源

        页面开发,不管使用那种技术,都需要引入对应的技术文件,本文以jQuery为例,讲解静态资源文件配置和访问。

        (1) 在“js”文件夹下,添加“jquery.min.js”文件

        (2) 在“css”文件夹下,添加“demo.css”文件

        (3) 在“img”文件夹下,添加“海豚.png”文件

备注:目录下文件为举例,学友可以自行添加

Springboot 实践(5)springboot添加资源访问目录及目录测试_第3张图片

图3、静态资源目录

3、测试静态资源访问

        项目启动后,使用浏览器访问目录资源,详细如下:

        (1)访问“jquery.min.js”文件

浏览器中输入地址http://localhost:2885/assets/js/jquery.min.js,返回如图4所示。

图4、js文件返回图

        (2)访问“demo.css”文件

浏览器中输入地址http://localhost:2885/assets/css/demo.css,返回如图5所示。

Springboot 实践(5)springboot添加资源访问目录及目录测试_第4张图片

图5、css文件返回图

        (3)访问“海豚.png”文件

浏览器中输入地址http://localhost:2885/assets/img/海豚.png,返回如图6所示。

Springboot 实践(5)springboot添加资源访问目录及目录测试_第5张图片

图6、img文件返回图

到此,springboot添加资源访问目录及目录测试讲解就结束了,供大家学习参考。

      下文讲解项目添加spring security,实现系统资源的保护及系统访问登录授权等功能。

你可能感兴趣的:(spring,boot,后端,java)