当前位置:首页 » 网页前端 » springboot项目前端页面
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

springboot项目前端页面

发布时间: 2023-02-19 16:24:20

⑴ springboot集成jsp页面总结

开发工具:IDEA
Springboot版本:2.0+

注:前端页面引入静态资源默认路径resources/static/下

1、默认情况下访问路径为/,如: http://127.0.0.1/index ,其中index为LoginController 中配置的映射
2、指定上下文路径,Springboot2.0+使用server.servlet.context-path指定;Springboot1.o+使用server.context-path指定

⑵ React+SpringBoot项目部署

这篇文章是记录一下我刚刚部署的过程...倒不是怕忘记,只是部署花了我蛮长时间的,然而最后明白了之后,才发现超级简单...

所以写这篇文章用来帮助那些和我一样的小白...

首先我用create-react-app搭建了一个react项目(这一步操作大家可以去官网看 https://reactjs.org/docs/add-react-to-a-new-app.html )

你会得到一个结构如下的项目:

我们可以通过 yarn start 运行这个项目:

跑起来的页面是这样的:

好的,现在你已经成功在开发环境中跑起来了,接下来我们来打包,然后将其部署到服务器上

打包也很简单,执行 npm run build :

你会发现在你的项目文件夹里多了个build文件夹:

然后当你点击index.html之后,会发现打开是这样的:

一片空白...然后你检查了了下index.html,发现里面的路径是这样的:

发现了啥问题没...里面的路径是绝对路径,所以当然找不到js和css以及图片资源啥的,那怎么让这些路径变成相对路径呢,很简单...我们再package.json加上homepage就行:

大家看最后一句就行...然后我们再次打包,然后再点index.html,会发现一切正常:

好的,现在我们通过build得到了html页面以及js和css和各种资源...你也发现了,我们网页的入口是index.html

所以比如说你自己有个服务器地址是 www.abc.com ,你只要在访问 www.abc.com 的时候把index.html返回出去就行了...因为我自己的服务器是用SpringBoot搭建的,所以我就用SpringBoot来举例子

SpringBoot返回html页面也很简单,在resource目录下新建一个public文件夹,然后把你React打包的build文件夹里的文件都丢进去就行...(这里截图是我自己的项目,我把一些.js和.json文件去掉了,因为好像没啥用)

这个时候你访问 www.abc.com 他就会直接返回index.html了(注意在SpringBoot里的Controller去掉对"/"的拦截)

然后你只要把SpringBoot项目部署到服务器上(如何部署SpringBoot项目大家可以看这篇文章 https://blog.csdn.net/ruglcc/article/details/76147645 ),然后访问你的域名,你就可以看到index.html了,比如我刚刚部署的自己的网页 www.nanmian.top

OK这篇文章结束了,大家也发现了目前的网页很简单...就只有一个页面,我刚学前端...所以也不是很懂,不知道之后项目变大了这种方法还行不行...到时候我会再记录的

最后的最后,这篇文章不能再感谢我可爱的女朋友了,祝她前程似锦。

⑶ SpringBoot页面展示Thymeleaf

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

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

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

Spring Boot默认存放模板页面的路径在 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=网络" 传过来。

⑷ Spring Boot 中 Controller 返回HTML页面

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

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

对, /resources 目录下已经存在了两个包:
/static 用来存放静态文件
/templates 用来存放前端页面

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

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

可能你注意到了,在 <html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"> 中多了点东西,没关系,继续往下看。

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

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

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

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

不过也太麻烦啦,所以Spring Boot就简化了这些配置,并且推荐使用Thymeleaf前端模板引擎。
前面提到的多了点东西也就是这个引擎的语法。

我用Gradle做依赖管理:

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

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

⑸ SpringBoot | IDEA 搭建 springboot 项目 + jsp 页面模板

搭建 springboot 项目,web页面用 jsp 模板

我把自己遇到的问题和解决方法罗列了一下,看看你们会不会也遇到这些问题

Group 和 Artifact 被称为“坐标”,为了保证项目唯一性

Group分为多个段,一般可设成两段,第一段为域,例如org、com、cn,org为非营利组织,com为商业组织;第二段为公司名称

Artifact 为项目名称

其他的可根据自己的需求选择对应的 starter 进行依赖,或者可后期在pom.xml 中配置

在 main 下新增 webapp 目录, 在 webapp 目录下新增 WEB-INF 目录和 jsp 目录,则将 jsp 文件创建在 jsp 目录下

右击 jsp 目录 -> new -> JSP/JSPX page 创建 jsp 文件,例如本文创建 index.jsp

首先,右击 项目  ->  Open Mole Settings

选择Moles  ->  选择Web  ->  点击 + 号  ->  点击 web.xml

选择 main\webapp\WEB-INF 目录,在后面添加上 web.xml,点击ok

web.xml 内容如下:

添加  org.apache.tomcat.embed 的 tomcat-embed-jasper 依赖包和 javax.servlet 的 jstl 依赖包

配置tomcat端口(默认值为8080),可以选择不配置

spring.mvc.view.prefix 和 spring.mvc.view.suffix 是 Spring Boot 约定的视图前缀和后缀的配置,意思是找到 /jsp/ 目录下以 .jsp 为后缀的 JSP 文件

右击 com.spring.demo 目录 -> new -> 选择 pakage,新增 controller 包

右击 controller 目录 ->  new -> 选择 Java Class,创建 Controller 类 ,本人创建为 IndexController 类

引入注解 @Controller 和 @RequestMapping,返回 jsp 页面

springboot 小 demo 搭建完毕    ^_^

⑹ spring boot怎么创建jsp页面

最近在接支付项目,从官方下了个及时到款的demo,想在springBoot项目中运行起来,发现访问jsp的时候直接会访问到jsp页面的源文件。

如何在springBoot项目中访问到jsp页面?

1.添加pom依赖

首先在原来的pom文件基础上加上这两个配置

[html] view plain

  • <!--tomcat的支持.-->

  • <dependency>

  • <groupId>org.springframework.boot</groupId>

  • <artifactId>spring-boot-starter-tomcat</artifactId>

  • <scope>provided</scope>

  • </dependency>

  • <dependency>

  • <groupId>org.apache.tomcat.embed</groupId>

  • <artifactId>tomcat-embed-jasper</artifactId>

  • <scope>provided</scope>

  • </dependency>

  • 其实根据我自身的配置,只配置tomcat下面这个也可以 顺利运行项目

⑺ “SpringBoot实战”视图技术-Thymeleaf

在一个Web应用中,通常会采用MVC设计模式实现对应的模型、视图和控制器,其中,视图是用户看到并与之交互的界面。对最初的Web应用来说,视图是由HTML元素组成的静态界面;而后期的Web应用更倾向于使用动态模板技术,从而实现前后端分离和页面的动态数据展示。Spring Boot框架为简化项目的整体开发,提供了一些视图技术支持,并主要推荐整合模板引擎技术实现前端页面的动态化内容。本文对SpringBoot常用的Thymeleaf进行整合。

Thymeleaf是一种现代的基于服务器端的Java模板引擎技术,也是一个优秀的面向Java的XML、XHTML、HTML5页面模板,它具有丰富的标签语言、函数和表达式,在使用Spring Boot框架进行页面设计时,一般会选择 Thymeleaf模板。我们在这里学习Thymeleaf 常用的标签、表达式。

Thymeleaf标签

使用标签只需要加上一个命名空间就可以了。 即修改原html的第二行就可以了。

变量表达式${..}主要用于获取上下文中的变量值,示例代码如下。

这是标题

- 使用了Thymeleaf模板的变量表达式${..}用来动态获取p标签中的内容 - 如果当前程序没有启动或者当前上下文中不存在title变量,该片段会显示标签默认值“这是标题”; - 如果当前上下文中存在title 变量并且程序已经启动,当前p标签中的默认文本内容将会被tite变量的值所替换,从而达到模板引擎页面数据动态替换的效果。

Thymeleaf为变量所在域提供了一些内置对象

结合上述内置对象的说明,假设要在Thymeleaf模板擎页面中动态获取当前国家信息,可以使用#locale内置对象

选择交量表达式和变量表达式用法类似,一般用于从被选定对象而不是上下文中获取属性值,如果没有选定对象,则和变量表达式一样,示例代码如下。

消息表达式#{..}主要用于Thymeleaf模板页面国际化内容的动态替换和展示。使用消息表这式#{..}进行国际化设置时,还需要提供一些国际化配置文件。关于消息表达式的使用,下文写国际化时会详细说明。

链接表达式@{..}一般用于页面跳转或者资源的引入,在Web开发中占据着非常重要的地位,并且使用也非常频繁。

片段表达式~{..}是一种用来将标记片段移动到模板中的方法。其中,最常见的用法是使用th:insert或th:replace 属性插入片段

Spring Boot默认设置了静态资源的访问路径,默认将/**所有访问映射到以下目录。

我们创建一个springboot项目用于本次实验。项目名为springboot_01_thyme。java8,springboot2.6.6

创建一个LoginController类用于数据替换效果测试。

我们写一个login.html进行测试。我们导入一个bootstrap的样式到static/login里面,并且自己定义一些css。

最后我们通过访问http://localhost:8080/toLoginPage 可以查看效果

在resources目录下创建名为i18n的文件夹,数一数这个单词多少个字母internationalization,就知道为什么叫i18n了。
然后我们在i18n文件夹下面创建login.properties、 login_zh_CN.properties、 login_en_US.properties文件。
目录结构:这个Resource Bundle 'login'时idea自动创建的,我们不需要管,只需要完成我们的就行。

login.properties

login_zh_CN.properties

login_en_US.properties

然后我们在配置文件application.properties里面添加代码

我们在config包下面创建一个MyLocalResovel类,自定义国际化功能区域信息解析器。

这里我们基本就完成了,但是在访问中文的时候会出现乱码现象。

我们打开idea的file->settings->file Encodings.
将Default encoding for properties的编码改为utf-8,同时勾选Transparentnative-to-ascii conversion

然后我们重新编写login.properties和其他相关的

但是这种方法1只对当前项目有效。下次创建还是使用GBK编码

本文我们主要了解了Thymeleaf的基本语法、标签、表达式、基本使用、同时还实现了页面登录页得国际化。

本文作者:hjk-airl

本文链接:https://www.cnblogs.com/hjk-airl/p/16181598.html