SpringBoot & Thymeleaf项目实战

简介: SpringBoot & Thymeleaf项目实战

web模板语言-thymeleaf

thymeleaf

项目启动,及各个页面入口

项目地址

tinytongtong/spring-thymeleaf

第一步项目运行:

打开IDE,将EurekaServerApplication执行起来。

访问接口-浏览器直接访问

eg: get请求:
http://localhost:8201/api/execute/get

http://localhost:8201/api/execute/get?name=maolegemi

访问web页面

访问静态页面:

http://localhost:8201/static.html

访问动态页面:
1、访问index页面

http://localhost:8201/index

2、访问basic-usage页面

http://localhost:8201/basic-usage

3、访问request-methods页面

http://localhost:8201/request-methods

项目架构

应用入口类-EurekaServerApplication

启动该类,即可启动服务。

在这里插入图片描述

web页面对应WebController

在这里插入图片描述

api接口对应ApiController

在这里插入图片描述

Web静态页面

resources/static/目录下的资源

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZtwBto7-1632454296976)(evernotecid://5E413247-DCB6-499B-8453-F2A2C2DF33A4/appyinxiangcom/13182898/ENResource/p17323)]

Web动态页面

resources/template/目录下的资源

在这里插入图片描述

web动态页面配置

SpringBoot使用的thymeleaf,具体看·项目根目录/src/main/resources/appliaction.yml`.

在这里插入图片描述

如何新建页面

新建html文件

resources/template/目录下新建html文件,html代码模板:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
    <title>Title</title>
</head>
<body>

<div>
    
</div>

<script>
    
</script>

</body>
</html>

第一次添加,需要将这个uri添加进配置:

在这里插入图片描述

js相关依赖:在pom.xmlproject#dependencies/dependency标签下:

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>3.3.7-1</version>
</dependency>
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.1.1</version>
</dependency>

在WebController增加对应的路由方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uza3uKxP-1632454296979)(evernotecid://5E413247-DCB6-499B-8453-F2A2C2DF33A4/appyinxiangcom/13182898/ENResource/p17197)]
接着添加

    /**
     * 本地访问内容地址 :http://localhost:8201/request-methods
     *
     * @param map
     * @return
     */
    @RequestMapping("/request-methods")
    public String requestMethods(HashMap<String, Object> map, Model model) {
        model.addAttribute("get111", "我是get方法");
        return "request-methods";// html页面名称-request-methods.xml
    }

如何跳转页面

通过相对路由地址:

<button onclick="window.location.href='/request-methods'">跳转request-methods页面</button>

如何发送请求-ajax

页面内部应该发送ajax请求。

AJAX-廖雪峰

端口占用问题

查看端口占用

lsof -i:8201

关闭端口当前进程

kill -9 pid
相关文章
|
Java 数据库 Maven
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】 CSDN 转过来的,所以格式与内容有些许错误请见谅
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】
|
Java 微服务 Spring
技术不行还说Java卷!靠468页SpringBoot企业级项目实战成功逆袭
今年应届生就业的话真的是个难题,就以java来说,往年会SSM框架就可以轻松找到工作了,而现在都是以微服务分布式起步了,没有适应环境发展需求的技术栈,根本达不到企业的用人标准。
|
24天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
59 10
|
24天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
43 8
|
4月前
|
JavaScript 前端开发 数据可视化
【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。
【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。
93 0
|
Java 数据库连接 数据库
SpringBoot整合持久层技术之搭建JDBCTemplate项目实战
现在有了MyBatis之后很少人使用JDBCTemplate来整合项目了,要么就是JPA技术,要么就是Mybatis来操作数据库,今天我搭建一个springboot的template项目,看看其和JPA、Mybatis有什么不同的地方,方便大家一起学习。
91 0
|
安全 Java 测试技术
Github标星98k,Alibaba最新发布的Spring Boot项目实战文档!太强了
前言 又到了一年一度的备战秋招的时间,虽然这两年因为经济环境不太好,互联网行业的各大厂都再裁员,但是今年的秋招经济形势正在复苏,我特地拜托阿里的朋友将这份Spring Boot项目实战开发文档分享出来。 本文档涵盖Spring Boot企业级项目开发的各方面知识,重点介绍Maven项目的搭建、Jersey Restful风格、Postman测试接口、Swagger2可视化文档、Lombok优雅编码、Redis缓存、Security安全机制、Web Service服务、WebSocke t通信、性能测试、集成测试、Jeecg Boot快速开发框架、使用Docker进行项目部署、使
|
XML 前端开发 JavaScript
SpringBoot接手JSP项目–【JSB项目实战】
SpringBoot接手JSP项目–【JSB项目实战】 CSDN 转过来的,所以格式与内容有些许错误请见谅
SpringBoot接手JSP项目–【JSB项目实战】
|
安全 Java 测试技术
Github标星98k,Alibaba最新发布的Spring Boot项目实战文档!太强了
前言 又到了一年一度的备战秋招的时间,虽然这两年因为经济环境不太好,互联网行业的各大厂都再裁员,但是今年的秋招经济形势正在复苏,我特地拜托阿里的朋友将这份Spring Boot项目实战开发文档分享出来。 本文档涵盖Spring Boot企业级项目开发的各方面知识,重点介绍Maven项目的搭建、Jersey Restful风格、Postman测试接口、Swagger2可视化文档、Lombok优雅编码、Redis缓存、Security安全机制、Web Service服务、WebSocke t通信、性能测试、集成测试、Jeecg Boot快速开发框架、使用Docker进行项目部署、使用sp
171 0
|
XML SQL 缓存
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
140 1