web模板语言-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页面
2、访问basic-usage页面
http://localhost:8201/basic-usage
3、访问request-methods页面
http://localhost:8201/request-methods
项目架构
应用入口类-EurekaServerApplication
启动该类,即可启动服务。
web页面对应WebController
api接口对应ApiController
Web静态页面
resources/static/
目录下的资源
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.xml
的project#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请求。
端口占用问题
查看端口占用
lsof -i:8201
关闭端口当前进程
kill -9 pid