一、简介
这一章我们来构建View了，我们采用Thymeleaf作为我们的模板。
同时我们再添加一个拦截器实现登陆的逻辑
登陆的过程我打算加上密码学的东西大概下一章出，那么首先我们先来搭建一个简单框架
二、整合Thymeleaf
之前我们就已经在Maven中添加了Thymeleaf依赖，那么今天我们就来放到我们的项目实现我们的视图渲染
首先我们需要简单的配置一下
打开我们的application.properties文件，加入以下代码
#设置模板路径
spring.thymeleaf.prefix=classpath:/templates/
#设置文件后缀
spring.thymeleaf.suffix=.html
#模板编码
spring.thymeleaf.mode=HTML
#字符编码
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
#关闭缓存，不然不能更新页面
spring.thymeleaf.cache=false
好了之后，我们在resource文件下新建templates文件夹
新建一个html文档，随便写点内容，代码如下：
<html>
<head>
<meta charset='utf-8'>
<title>支教平台</title>
</head>
<body>
<h1>welcome to my world</h1>
</body>
</html>
其实弄完之后，thymeleaf已经整合进来了，测试一下
在Controller爆下面新建一个class，取名叫HomeController
代码如下：
@Controller
@RequestMapping("/")
public class HomeController {
@RequestMapping("home")
public String home(){
return "index";
}
@RequestMapping("login")
public String login(){
return "login";
}
}
}
地址映射随便取，跟我一样的话修改一下另一个Controller中的地址以免冲突
返回值是你刚刚新建html文档的名称
好了，启动项目输入localhost/home，是不是页面就出来了
三、拦截器
我们刚刚渲染出来了一个很简陋的页面，接下来我们要在新建一个拦截器的同时，给我们的模板添加Semantic UI
废话不多说，我们先新建一个包取名为：Interceptor，同样新建一个class取名随意
代码如下：
public class Interceptor implements HandlerInterceptor{
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
boolean result = false;
//映射的不是方法返回
if (!(handler instanceof HandlerMethod)) {
return true;
}
//取得请求的URI，如果是指向登陆地址的放行
if(request.getRequestURI().equals("/login")){
return true;
}
//取得Attribute，如果为空即是没有登陆
User user = (User) request.getAttribute("user");
if(user != null){
}
//没有登陆，则重定向至登陆界面
response.sendRedirect("login");
return result;
}
}
说明一下，我们这里是实现了HandlerInterceptor接口，preHandle方法就是预处理回掉方法，此方法会在控制器之前执行
接下来我们去注册我们的拦截器
新建一个包，取名为Config
包下面新建一个class，取名随意
代码如下：
@Configuration
public class webMvcConfig implements WebMvcConfigurer{
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new Interceptor()).addPathPatterns("/**");
WebMvcConfigurer.super.addInterceptors(registry);
}
}
注意把类名改成你取的名字
这样我们就将我们自定义的拦截器注册了进去
接下来我们来编辑我们的登陆视图
首先在resource文件夹下新建一个文件夹取名为statics，这个文件夹将用来存放我们的静态文件
在statics下新建css，js，images三个文件夹来存放我们的样式文件，js脚本，图片文件
下载jquery.js,放入js文件夹中（百度一下你就知道）
好的回到templates文件夹下，新建一个Html文件login.html
代码如下：
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>登陆支教平台</title>
<!-- <link rel="stylesheet" type="text/css" th:href=@{/statics/css/semantic.min.css}> -->
<link href="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet">
<script type="text/javascript" th:src="@{/statics/js/jquery-3.3.1.min.js}"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.js"></script>
<!-- <script type="text/javascript" th:src="@{/statics/js/semantic.min.js}"></script> -->
<style type="text/css">
body {
background-color: #DADADA;
}
body > .grid {
height: 100%;
}
.image {
margin-top: -100px;
}
.column {
max-width: 450px;
}
</style>
<script>
$(document).ready(function() {
$('.ui.form')
.form({
fields: {
email: {
identifier : 'email',
rules: [
{
type : 'empty',
prompt : 'Please enter your e-mail'
},
{
type : 'email',
prompt : 'Please enter a valid e-mail'
}
]
},
password: {
identifier : 'password',
rules: [
{
type : 'empty',
prompt : 'Please enter your password'
},
{
type : 'length[6]',
prompt : 'Your password must be at least 6 characters'
}
]
}
}
})
;
})
;
</script>
</head>
<body>
<div class="ui middle aligned center aligned grid">
<div class="column">
<div style="background-color:white">
<h2 class="ui teal image header">
<img th:src="@{/statics/image/icon.png}" class="image">
<div class="content">
登陆你的账户
</div>
</h2>
</div>
<form class="ui large form" th:action="@{/login}">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="username" placeholder="E-mail address">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Password">
</div>
</div>
<div class="ui fluid large teal submit button" type="submit">Login</div>
</div>
<div class="ui error message"></div>
</form>
<div class="ui message">
New to us? <a href="#">Sign Up</a>
</div>
</div>
</div>
</body>
</html>
如过对前端代码感到疑惑，建议先去w3school学习一下HTML
其中带th:字样的是thymeleaf的标签，它可以给我们带来许多强大的功能包括条件判断，循环，计算等等
由于我们引用了静态文件，我们需要去注册我们的静态资源文件路径
打开我们刚刚在config包下建立的class
添加如下内容
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/statics/**").addResourceLocations("classpath:/statics/");
WebMvcConfigurer.super.addResourceHandlers(registry);
}
好了，现在我们启动我们的项目，激动人心的一刻来临了
打开浏览器输入localhost/home
页面会转到login，我们将看到以下登陆页面
是不是觉得超级easy，下一章，我们来实现我们的登陆功能，并完成后台管理的页面，啧啧得去复习一下密码学了
