那么大家晚上好，我是今天晚上的主讲老师，我是兔哥。

上一讲，我们已经完成了项目的搭建，那么这一讲，咱就把登录页面给造了。

登录页面如下图：

算是一种小清新风格，当然，本项目的重点还是SpringBoot项目开发。

因为是前后端一体的项目，所以我们采用模板引擎的方式，我个人非常不喜欢thymeleaf，那就用jsp吧。经典，不容易出错。

打开配置文件，添加视图解析器，和DataSource同级

spring:
  #视图解析器
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp

贴在这个位置，别弄错了。

在main下面创建一个新的目录：webapp

创建的时候会提醒你的

选择下面的webapp，我们要保证文件夹的右下角有一个黄色的标记，这个代表资源目录。

接下来，在里面创建WEB-INF（大写）目录

接下来是jsp目录

然后，我们需要在这个目录创建JSP文件。

idea默认没法直接右键创建JSP，我们需要做一点操作。

点开这个：

然后就可以新建JSP了

创建login.jsp

HTML代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>剽悍一小兔-日记本系统</title>
    <style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			min-height: 100vh;
			/* 弹性布局 居中 */
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #94bfb560;
		}
		.container{
			background-color: #222;
			width: 350px;
			height: 550px;
			border-radius: 15px;
			overflow: hidden;
			position: relative;
		}
		.container::after{
			content: "";
			position: absolute;
			/* inset为0，相当于top、left、bottom、right都为0的缩写 */
			inset: 0;
			background: url("images/bg.jpg") no-repeat;
			background-size: 500px;
			background-position: left bottom;
			opacity: 0.8;
		}
		/* 注册区域（登录区域很多样式和注册区域的一样，故而一些统一的样式写在了一起） */
		.register-box{
			width: 70%;
			position: absolute;
			z-index: 1;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			transition: 0.3s ease;
		}
		.register-title,
		.login-title{
			color: #fff;
			font-size: 27px;
			text-align: center;
		}
		.register-title span,
		.login-title span{
			color: rgba(0,0,0,0.4);
			display: none;
		}
		.register-box .input-box,
		.login-box .input-box{
			background-color: #fff;
			border-radius: 15px;
			overflow: hidden;
			margin-top: 50px;
			opacity: 1;
			visibility: visible;
			transition: 0.6s ease;
		}
		.register-box input,
		.login-box input{
			width: 100%;
			height: 30px;
			border: none;
			border-bottom: 1px solid rgba(0,0,0,0.1);
			font-size: 12px;
			padding: 8px 0;
			text-indent: 15px;
			outline: none;
		}
		.register-box input:last-child,
		.login-box input:last-child{
			border-bottom: none;
		}
		.register-box input::placeholder,
		.login-box input::placeholder{
			color: rgba(0,0,0,0.4);
		}
		.register-box button,
		.login-box button{
			width: 100%;
			padding: 15px 45px;
			margin: 15px 0;
			background: rgba(0,0,0,0.4);
			border: none;
			border-radius: 15px;
			color: rgba(255,255,255,0.8);
			font-size: 13px;
			font-weight: bold;
			cursor: pointer;
			opacity: 1;
			visibility: visible;
			transition: 0.3s ease;
		}
		.register-box button:hover,
		.login-box button:hover{
			background-color: rgba(0,0,0,0.8);
		}
		/* 登录区域 */
		.login-box{
			position: absolute;
			inset: 0;
			top: 20%;
			z-index: 2;
			background-color: #fff;
			transition: 0.3s ease;
		}
		.login-box::before{
			content: "";
			background-color: #fff;
			width: 200%;
			height: 250px;
			border-radius: 50%;
			position: absolute;
			top: -20px;
			left: 50%;
			transform: translateX(-50%);
		}
		.login-box .center{
			width: 70%;
			position: absolute;
			z-index: 3;
			left: 50%;
			top: 40%;
			transform: translate(-50%,-50%);
		}
		.login-title{
			color: #000;
		}
		.login-box .input-box{
			border: 1px solid rgba(0,0,0,0.1);
		}
		.login-box button{
			background-color: #75a297;
		}
		/* 注册、登录区域收起 */
		.login-box.slide-up{
			top: 90%;
		}
		.login-box.slide-up .center{
			top: 10%;
			transform: translate(-50%,0%);
		}
		.login-box.slide-up .login-title,
		.register-box.slide-up .register-title{
			font-size: 16px;
			cursor: pointer;
		}
		.login-box.slide-up .login-title span,
		.register-box.slide-up .register-title span{
			margin-right: 5px;
			display: inline-block;
		}
		.login-box.slide-up .input-box,
		.login-box.slide-up .button,
		.register-box.slide-up .input-box,
		.register-box.slide-up .button{
			opacity: 0;
			visibility: hidden;
		}
		.register-box.slide-up{
			top: 6%;
			transform: translate(-50%,0%);
		}
	</style>
</head>

<body>
    <div class="container">
        <div class="register-box">
            <h2 class="register-title">
                <span>没有账号，去</span>注册日记本
            </h2>
            <div class="input-box">
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码">
            </div>
            <button>注册</button>
        </div>
        <div class="login-box slide-up">
            <div class="center">
                <h2 class="login-title">
                    <span>已有账号，去</span>登录日记本
                </h2>
                <div class="input-box">
                    <input type="text" placeholder="用户名">
                    <input type="password" placeholder="密码">
                </div>
                <button>登录</button>
            </div>
        </div>
    </div>
    <script>
		// 获取要操作的元素
		let login_title=document.querySelector('.login-title');
		let register_title=document.querySelector('.register-title');
		let login_box=document.querySelector('.login-box');
		let register_box=document.querySelector('.register-box');

		// 绑定标题点击事件
		login_title.addEventListener('click',()=>{
			// 判断是否收起，收起才可以点击
			if(login_box.classList.contains('slide-up')){
				register_box.classList.add('slide-up');
				login_box.classList.remove('slide-up');
			}
		})
		register_title.addEventListener('click',()=>{
			if(register_box.classList.contains('slide-up')){
				login_box.classList.add('slide-up');
				register_box.classList.remove('slide-up');
			}
		})
	</script>
</body>

</html>

JSP准备好了，接下来，就是我们得用控制器去访问它。

创建PageController，专门用来访问某些页面

package com.rabbit.diary.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PageController {

    @RequestMapping("login")
    public String login(){
        return "login";
    }
}

login方法返回一个字符串，因为我们配置了视图解析器，所以返回字符串login，实际上找到的就是WEB-INF/jsp/login.jsp。

还有一个地方需要注意，就是SpringBoot访问jsp，还需要一个依赖，让我们加到pom.xml

<dependency>
	<groupId>org.apache.tomcat.embed</groupId>
	<artifactId>tomcat-embed-jasper</artifactId>
</dependency>

ok了，现在重启项目，访问http://localhost/login

发现背景怎么黑不溜秋的，这是因为背景图片没有引入。

对于这种静态资源，我们需要配置一下静态资源路径，因为我们这边使用的是SpringBoot（2.6.4）的版本，可能跟你之前看到的写法不一样，这一点需要注意。还是yml文件，我们加上：

web:
  resources:
    static-locations: classpath:static/

web和mvc是同级的，如果实在不知道加在哪里也不要紧，回头下载源代码就行了。源代码获取方式：关注最下方的公众号，回复【日记本】即可！

这个配置表示，以后你可以直接访问static目录下的资源。

比如，现在有这样的目录结构，找到bg.jpg

我们要访问它，直接 http://localhost/images/bg.jpg 即可！

接着，我们修改下login.jsp

添加项目根路径：

<c:set var="basePath" value="${pageContext.request.contextPath}"></c:set>

这句代码的作用是获取项目的根，比如以后项目的根改为 diary，那么basePath就是diary，我们访问后台就得在localhost后面加上diary。

找到css中获取背景图片的地方，改为：

.container::after{
    content: "";
    position: absolute;
    /* inset为0，相当于top、left、bottom、right都为0的缩写 */
    inset: 0;
    background: url("${basePath}/images/bg.jpg") no-repeat;
    background-size: 500px;
    background-position: left bottom;
    opacity: 0.8;
}

OK，重启。

访问 http://localhost/login

大功告成啦！

总结

这一讲，我们整合了jsp，学会了springboot访问jsp，以及springboot2.6版本如何访问静态资源的方法。

SpringBoot日记本系统全程直播02：登录页面搞起来撒~~

总结

猜你喜欢