基于SpringBoot的系统所用到的前端网页相关技术

一、基于SpringBoot的系统所用到的前端网页相关技术

基于 Spring Boot的系统可以使用各种前端网页相关技术，具体选择取决于项目需求和开发团队的偏好。以下是一些常用的前端技术，可以与 Spring Boot结合使用：

1. HTML/CSS/JavaScript：作为Web开发的基础，使用HTML定义网页结构，CSS进行样式设计，JavaScript实现交互和动态效果。

2. JavaScript框架和库：例如 Vue.js、React、Angular等前端框架和库，用于构建丰富的用户界面和单页应用。

3. CSS框架：像Bootstrap、Semantic UI、Material-UI等CSS框架可以提供现成的样式和组件，使开发者更快速地构建美观的界面。

4. AJAX：通过使用 AJAX技术，可以在前端与后端进行异步数据交互，实现无需刷新页面的动态数据加载。

5. RESTful API：使用 RESTful API架构风格，通过 HTTP协议与后端进行数据交互，实现前后端分离。

6.前端构建工具：像Webpack、Parcel、Gulp等前端构建工具可以优化、打包和管理前端资源，提高性能和开发效率。

7.模板引擎：如Thymeleaf、Freemarker等模板引擎可以方便地将后端数据渲染到前端页面，实现动态内容展示。

8.前端测试框架：像Jest、Mocha、Cypress等前端测试框架可以帮助进行自动化的前端单元测试和端到端测试。

需要根据项目的需求和团队的实际情况选择适合的前端技术，并与 Spring Boot进行集成开发。

二、springboot前端页面放哪

1、SpringBoot中Controller返回HTML页面

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

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

3、如果你是用SpringInitializr新建的项目的话，那么当你打开项目，就会看到：

4、对，/resources目录下已经存在了两个包：

5、我们写一个最简单的HTML页面，放在/templates下：

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

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

8、然后通过Postman来测试一下接口：

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

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

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

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

13、Thymeleaf语法也是个坑，有时间再去看看吧~

14、SpringBoot页面展示Thymeleaf

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30、关于“${属性}”和“{属性}”的区别？

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

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

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

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

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

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

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

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

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

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

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

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

三、前端开发和后端开发有什么区别

展示方式不同，所用技术不同。前端开发用到的技术包括但不限于html。css。javascript、jquery、Bootstrap、Node.js、AngularJs等技术。后端开发以java为例主要用到的是包括但不限于StrutsspringspringmvcHibernateHttp协议ServletTomcat服务器等技术。

前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。

随着互联网技术的发展和HTML。CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。