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
相关文章
|
8月前
|
Java 微服务 Spring
技术不行还说Java卷!靠468页SpringBoot企业级项目实战成功逆袭
今年应届生就业的话真的是个难题,就以java来说,往年会SSM框架就可以轻松找到工作了,而现在都是以微服务分布式起步了,没有适应环境发展需求的技术栈,根本达不到企业的用人标准。
|
9月前
|
前端开发 安全 Java
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】 CSDN 转过来的,所以格式与内容有些许错误请见谅
SpringBoot最简单的登陆验证码+6套主页-【JSB项目实战】
|
9月前
|
Java 数据库连接 数据库
SpringBoot整合持久层技术之搭建JDBCTemplate项目实战
现在有了MyBatis之后很少人使用JDBCTemplate来整合项目了,要么就是JPA技术,要么就是Mybatis来操作数据库,今天我搭建一个springboot的template项目,看看其和JPA、Mybatis有什么不同的地方,方便大家一起学习。
47 0
|
10月前
|
SQL XML 前端开发
Spring Boot + vue-element 开发个人博客项目实战教程(十八、操作日志功能实现)2
Spring Boot + vue-element 开发个人博客项目实战教程(十八、操作日志功能实现)2
97 0
Spring Boot + vue-element 开发个人博客项目实战教程(十八、操作日志功能实现)2
|
8月前
|
缓存 NoSQL Redis
SpringBoot+SpringCloud+Mybatis+Vue电商项目实战,附文档+源码
采用SpringBoot+SpringCloud+Mybatis+Vue为主要技术栈,包括了大型商城的主要功能、难点功能以及复杂业务功能,涉及到了Oauth2、JWT令牌、MQ的可靠性投递、流量削峰、秒杀、支付、集群、redis哨兵、lua脚本、缓存击穿&雪崩,分布式文件存储等内容。
104 0
|
9月前
|
SQL Java 关系型数据库
解读SpringBoot整合持久层技术之搭建并整合Spring Data JPA项目实战
接下来这阵子就SpringBoot整合持久层技术进行一个项目的搭建,做一个练手,以前搞过但是都淡忘了,特意来总结一下。今天是JPA,后面陆续搭建MyBatis、JdbcTemplate等持久层技术,供大家相互学习。
89 0
|
9月前
|
XML 前端开发 JavaScript
SpringBoot接手JSP项目–【JSB项目实战】
SpringBoot接手JSP项目–【JSB项目实战】 CSDN 转过来的,所以格式与内容有些许错误请见谅
SpringBoot接手JSP项目–【JSB项目实战】
|
9月前
|
JSON 前端开发 JavaScript
SpringBoot仅会SSM强撸项目--【JSB项目实战】
SpringBoot仅会SSM强撸项目--【JSB项目实战】 CSDN 转过来的,所以格式与内容有些许错误请见谅
|
10月前
|
消息中间件 安全 NoSQL
跪了!Alibaba内部优质Springboot笔记:两大项目实战+源码解析
近年来,Spring Boot 是整个Java社区中最有影响力的项目之一,它的设计初衷是解决Spring各版本配置工作过于繁重,目前已经逐渐替代传统SSM架构。但SSM和Spring Boot并不冲突。Spring Boot更简单、更自动化,减少了传统SSM开发的配置。程序员在用Springboot开发应用程序时能做到零配置或极简配置。同时,为了不失灵活性,它也支持自定义操作。
|
10月前
|
XML SQL 缓存
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
Spring Boot + vue-element 开发个人博客项目实战教程(二十六、前端首页统计完善及完结)
105 1