springboot前端页面放哪?

来自:    更新日期:早些时候
~ SpringBoot中Controller返回HTML页面

由于SpringBoot内嵌了Tomcat容器,所以不用把项目打亩雀成war包,再放到Tomcat中去运行。但是随之出现了个问题,基于Tomcat的Web应用都有一个/团耐槐webapp目录来存放前端页面和静态资源等文件。那么SpringBoot中应该放在哪里呢?

如果你是用SpringInitializr新建的项目的话,那么当你打开项目,就会看到:

对,/resources目录下已经存在了两个包:

/static用来存放静态文件

/templates用来存放前端页面

Ps:没有目录的话可以自己创建

我们写一个最简单的HTML页面,放在/templates下:

可能你注意到了,在htmllang="zh-CN"xmlns:th=""中多了点东西,没关系,继续往下看。

我们写一个SpringMVC中最简单的Controller,用来返回hello.html:

然后通过Postman来测试一下接口:

可以看到报错了,错误提示说,可能是没有指定视图。

我们知道在传统的TomcatWeb应用里面,还需要配置web.xml与SpringMVC。

不过也太麻烦啦,所以SpringBoot就简化了这些配置,并且推荐使用Thymeleaf前端塌友模板引擎。

前面提到的多了点东西也就是这个引擎的语法。

我用Gradle做依赖管理:

可以看到返回的就是hello.html

Thymeleaf语法也是个坑,有时间再去看看吧~

SpringBoot页面展示Thymeleaf

开发传统JavaWEB工程时,我销颂穗们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言

上面并没有列举所有SpringBoot支持的页面模板技术。其中Thymeleaf是SpringBoot官方所推荐使用的,下面来谈谈Thymeleaf一些常用的语法规则。

要想使用Thhymeleaf,首先要在pom.xml文件中单独添加Thymeleaf依赖。

SpringBoot默认存放模板页面的路径在src/main/resources/templates或者src/main/view/templates,这个无论是使用什么模板语言都一样,当然默认路径是可以自定义的,不过一般不推荐这样做。另外Thymeleaf默认的页面文件后缀是.html。

在MVC的开发过程中,我们经常需要通过Controller将数据传递到页面中,让页面进行动态展示。

创建一个Controller对象,在其中进行参数的传递

在SpringBoot默认的页面路径下创建show.html文件,内容如下

可以看到在p标签中有th:text属性,这个就是thymeleaf的语法,它表示显示一个普通的文本信息。

如果我们要显示的信息是存在资源文件中的,同样可以在页面中显示,例如资源文件中定义了内容welcome.msg=欢迎{0}光临!。可以在页面中将其显示

另外,在th:utext中还能做一些基础的数学运算

如果我们想要传递到的页面的信息,它本身是带有CSS样式的,这个时候如何在页面中将携带的样式信息也显示出来?此时我们的控制器方法这样写。

此时页面中需要借助th:utext属性进行显示

通过浏览器查看页面源码可以看出th:utext和th:text的区别是:th:text会对和进行转义,而th:utext不会转义。

我们常常需要将一个bean信息展示在前端页面当中。

上面给出了两种展现方式,一种是通过${属性},另外一种是通过{属性}。

关于“${属性}”和“{属性}”的区别?

$访问完整信息,而访问指定对象中的属性内容,如果访问的只是普通的内容两者没有区别;

在thymeleaf之中提供有相应的集合的处理方法,例如:在使用List集合的时候可以考虑采用get()方法获取指定索引的数据,那么在使用Set集合的时候会考虑使用contains()来判断某个数据是否存在,使用Map集合的时候也希望可以使用containsKey()判断某个key是否存在,以及使用get()根据key获取对应的value,而这些功能在之前并不具备,下面来观察如何在页面中使用此类操作

在传统WEB工程开发时,路径的处理操作是有点麻烦的。SpringBoot中为我们简化了路径的处理。

页面之间的跳转也能通过@{}来实现

虽然在这种模版开发框架里面是不提倡使用内置对象的,但是很多情况下依然需要使用内置对象进行处理,所以下面来看下如何在页面中使用JSP内置对象。

thymeleaf考虑到了实际的开发情况,因为request传递属性是最为常用的,亏卜但是session也有可能使用,例如:用户登录之后需要显示用户id,那么就一定要使用到session,所以现在必须增加属性范围的形式后才能够正常使用。樱告在thymeleaf里面也支持有JSP内置对象的获取操作,不过一般很少这样使用。

所有的页面模版都存在各种基础逻辑处理,例如:判断、循环处理操作。在Thymeleaf之中对于逻辑可以使用如下的一些运算符来完成,例如:and、or、关系比较(、、=、=、==、!=、lt、gt、le、ge、eq、ne)。

通过控制器传递一些属性内容到页面之中:

不满足条件的判断

通过swith进行分支判断

在实际开发过程中常常需要对数据进行遍历展示,一般会将数据封装成list或map传递到页面进行遍历操作。

我们常常需要在一个页面当中引入另一个页面,例如,公用的导航栏以及页脚页面。thymeleaf中提供了两种方式进行页面引入。

可以看到页面当中还存在一个变量projectName,这个变量的值可以在引入页面中通过th:with="projectName=百度"传过来。

如何将网上下载的前端页面放到自己的项目中?

网上你下载之后的前端,只是一个表面,还需要做接州拦激口跟后台进行对接,才可以获取到自己衡余的数据,要是你只展示一个前册袜端,那直接传到服务器上就可以展示了,页面用html展示就行




springboot前端页面放哪?视频

相关评论:
  • 19566264426springboot前端页面放哪?
    赖夏郭SpringBoot默认存放模板页面的路径在src\/main\/resources\/templates或者src\/main\/view\/templates,这个无论是使用什么模板语言都一样,当然默认路径是可以自定义的,不过一般不推荐这样做。另外Thymeleaf默认的页面文件后缀是.html。在MVC的开发过程中,我们经常需要通过Controller将数据传递到页面中,让页面进行动...

  • 19566264426springboot前端用什么?
    赖夏郭基于sprigboot构建web前端页面采用什么技术实现spring-boot适合开发web应用的静态资源访问在我们开发Web应用的时候,需要引用大量的js、css、图片等静态资源。默认配置SpringBoot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则:\/static\/public\/resources\/META-INF\/resources举例:我们可以在src\/m...

  • 19566264426基于SpringBoot的系统所用到的前端网页相关技术?
    赖夏郭1. HTML\/CSS\/JavaScript:作为Web开发的基础,使用HTML定义网页结构,CSS进行样式设计,JavaScript实现交互和动态效果。2. JavaScript框架和库:例如 Vue.js、React、Angular等前端框架和库,用于构建丰富的用户界面和单页应用。3. CSS框架:像Bootstrap、Semantic UI、Material-UI等CSS框架可以提供现成的样式...

  • 19566264426springboot项目中通过接口返回html页面,前端中会被读到存
    赖夏郭在Spring Boot项目中,通过接口返回HTML页面,前端并不直接读取服务器上的文件名。控制器映射URL路径访问页面,Spring Boot使用视图解析器处理HTML文件,返回渲染后的HTML内容,而非文件路径。假设HTML文件名为greeting.html,存于src\/main\/resources\/templates目录下。创建控制器返回此页面,用户访问\/greeting U...

  • 19566264426springboot后端获取数据传不到vue前端页面,显示暂
    赖夏郭请问您是想问“springboot后端获取数据传不到vue前端页面的原因”这个问题吗?该情况的原因如下:1、网络问题:检查后端和前端之间的网络连接是否正常。确保后端服务正在运行,并且前端能够正确地访问后端API。2、数据格式问题:确保后端返回的数据格式与前端期望的数据格式匹配。例如,如果后端返回的是JSON数据...

  • 19566264426vue项目部署到springboot后只能访问index页面
    赖夏郭1. 在 Vue 项目中运行 npm run build 命令进行编译,生成 dist 目录;2. 将 dist 目录下的静态资源放在 Spring Boot 静态资源目录(src\/main\/resources\/static)下;3. 在 Spring Boot 中配置视图解析器,将请求 \/ 转发到 index.html 页面,让前端路由系统接管页面跳转。可以使用 Thymeleaf 或者...

  • 19566264426Vue+SpringBoot项目实战(四):前后端项目结合测试(登录页面开发)
    赖夏郭一、后端项目创建与完善通过Spring Initializr创建后端项目,选择2.7.17版本以兼容较低的JDK要求。创建后,可能会遇到依赖下载问题,这时可以尝试关闭并重新打开项目。运行后,访问localhost:8080,验证项目是否正常启动。二、前后端项目结合与测试前后端通信基于Restful API的JSON数据。前端通过Nginx转发请求到...

  • 19566264426springboot前端网页替换无效eclipse
    赖夏郭1、清除浏览器缓存:在浏览器中按下Ctrl+F5刷新页面,清除浏览器缓存。2、清除项目目录下的缓存文件:在SpringBoot项目的根目录下,找到名为target或者build的文件夹,删除其中的所有文件,重新启动项目,正常替换。3、确保替换的文件路径和名称一致:确保要替换的文件路径和名称与代码中的引用一致。4、检查...

  • 19566264426springboot前后端分离项目怎么获取获取网站的pvuv
    赖夏郭1、第三方统计工具:使用第三方的网站统计工具,GoogleAnalytics、百度统计等。这些工具提供了JavaScript代码,将其嵌入到前端页面中,当用户访问页面时,工具会自动收集访问数据并提供统计报告。2、前端埋点:在前端页面中嵌入JavaScript代码进行数据采集。通过在页面的关键事件,页面加载、按钮点击上埋点,可以...

  • 19566264426springboot怎么用(springboot怎么用在web上又用在微信小程序上)_百 ...
    赖夏郭Springboot中控制器的使用 步骤: (1)在model层,创建一个Result类,封装code(状态识别码)、msg(提示信息)、data(核心数据)。 (2)在model层,创建一个User实体类。 (3)创建控制器UserController(相当于入口main)。 (1)在resources\/static路径下创建一个静态页面view1.html。 (2)在application.properties中添加静态...

  • 相关主题精彩

    版权声明:本网站为非赢利性站点,内容来自于网络投稿和网络,若有相关事宜,请联系管理员

    Copyright © 喜物网