SpringBoot 整合SSM（五）：编写前台文件

最新推荐文章于 2020-04-21 20:33:07 发布

wzlhlhhh

最新推荐文章于 2020-04-21 20:33:07 发布

阅读量432

点赞数

文章标签： springboot

本文链接：https://blog.youkuaiyun.com/wzlhlhhh/article/details/80349140

版权

SpringBoot 专栏收录该内容

9 篇文章

订阅专栏

这个步骤呢很常规，但是注意的是前台文件和后台数据传输的问题。

这里因为是用Springboot推荐支持的thymeleaf，我之前没用过，不过这个前端模板是一个非入侵的开发方式，很赞。

这里的话，在pom.xml中加入整合的包spring-boot-starter-thymeleaf。

还有就是，这个前端模板找文件默认在/src/main/resources/templates下找，所以可以看到刚刚后台文件直接的/index.html

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎页面</title>
</head>
<body>
	<h1 th:text="${msg}">欢迎喔</h1>
	<form th:action="@{/login}" action="login" method="post">
			姓名:<input type="text" name="username" id="uesrname" th:value="${username}" value=""/>
			密码:<input type="text" name="password" id="password" th:value="${password}" value=""/>
			<input type="submit" name="submit" value="登录"/>
	</form>
	<form th:action="@{/register}" action="register" method="post">
			姓名:<input type="text" name="username" id="uesrname" th:value="${username}" value=""/>
			密码:<input type="text" name="password" id="password" th:value="${password}" value=""/>
			角色:
			<select name="role">
			  <option value ="老师">老师</option>
			  <option value ="学生">学生</option>
			</select>
			<input type="submit" name="submit" value="注册"/>
	</form>
</body>
</html>

welcome.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录成功页面</title>
</head>
<body>
	<h1 th:text="${msg + session.user}">欢迎喔</h1>
	<h3><a th:href="@{/selectAllStudent}">老师才有资格点的</a></h3>
</body>
</html>

err.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>出错页面</title>
</head>
<body>
	<h1 th:text="${msg}">出错了喔</h1>
	<a th:href="@{/}" href="/"><img alt="" src="img/2.gif"></a>
</body>
</html>

关于thymeleaf的语法我不多说，因为下一个小东西是微信小程序开发，前台暂时和它无关。

这里的话就简单的搭好了，这个时候，用开关文件运行java程序应该能启动了。