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框架就可以轻松找到工作了,而现在都是以微服务分布式起步了,没有适应环境发展需求的技术栈,根本达不到企业的用人标准。
|
2月前
|
JavaScript 前端开发 数据可视化
【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。
【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。
53 0
|
Java 数据库连接 数据库
SpringBoot整合持久层技术之搭建JDBCTemplate项目实战
现在有了MyBatis之后很少人使用JDBCTemplate来整合项目了,要么就是JPA技术,要么就是Mybatis来操作数据库,今天我搭建一个springboot的template项目,看看其和JPA、Mybatis有什么不同的地方,方便大家一起学习。
76 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进行项目部署、使
|
安全 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
135 0
|
XML 前端开发 JavaScript
SpringBoot接手JSP项目–【JSB项目实战】
SpringBoot接手JSP项目–【JSB项目实战】 CSDN 转过来的,所以格式与内容有些许错误请见谅
SpringBoot接手JSP项目–【JSB项目实战】
|
XML SQL 缓存
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
131 1
|
XML SQL 前端开发
Spring Boot + vue-element 开发个人博客项目实战教程(二十四、文章管理页面开发(3))
Spring Boot + vue-element 开发个人博客项目实战教程(二十四、文章管理页面开发(3))
77 0
Spring Boot + vue-element 开发个人博客项目实战教程(二十四、文章管理页面开发(3))
|
JSON 前端开发 NoSQL
Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)2
Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)2
72 0
Spring Boot + vue-element 开发个人博客项目实战教程(十九、日志中心页面接口对接)2