1 完成效果

在这里插入图片描述

2 建login.jsp

在项目中建 /jsp/login.jsp

3 导入静态资源

把静态资源(css,img,plugin …) 放到 webapp/resources 目录中 (css,img,js,piugin,uploads)

4 建login.jsp

根据 login.html 这个静态页面来修改 login.jsp 中的内容
在项目中建 /jsp/login.jsp

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();   //path ssm-blog
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";	      
%>		
<!DOCTYPE HTML>
<html>
	  <head>
	    <base href="<%=basePath%>"> 
	     
	     <title>博客登录</title>
	    
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">  
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name='robots' content='noindex,follow' />
        <meta name="viewport" content="width=device-width" />
	  
	    <link rel="stylesheet" href="resources/plugin/font-awesome/css/font-awesome.min.css">
	    <link rel="shortcut icon" href="resources/img/logo.png">
	    <link rel='stylesheet' id='dashicons-css'  href='resources/plugin/login/dashicons.min.css' type='text/css' media='all' />
	    <link rel='stylesheet' id='buttons-css'  href='resources/plugin/login/buttons.min.css' type='text/css' media='all' />
	    <link rel='stylesheet' id='forms-css'  href='resources/plugin/login/forms.min.css' type='text/css' media='all' />
	    <link rel='stylesheet' id='l10n-css'  href='resources/plugin/login/l10n.min.css' type='text/css' media='all' />
	    <link rel='stylesheet' id='login-css'  href='resources/plugin/login/login.min.css' type='text/css' media='all' />
	    <link rel='stylesheet'  href='resources/css/login.css' type='text/css' media='all' /> 
	  </head>
	  
	<body class="login login-action-login wp-core-ui  locale-zh-cn">
		<div id="login">
		    <br /> <br /> 
		    <form name="loginForm" id="loginForm" action="login"  method="post">
		        <p>
		            <label for="user_login">用户名或电子邮件地址<br />
		            <input type="text" name="userName" id="user_login" class="input" value="admin" size="20" required/></label>
		        </p>
		        <p>
		            <label for="user_pass">密码<br />
		                <input type="password" name="userPass" id="user_pass" class="input" value="123456" size="20" required/>
		            </label>
		        </p>
		        <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="1" checked /> 记住密码</label></p>
		        <p class="submit">
		            <input type="submit" name="wp-submit" id="submit-btn" class="button button-primary button-large" value="登录" />
		        </p>
		    </form>
		</div>		
	<div class="clear"></div>	
	</body>
</html>

5 配置springmvc

非常重要,一定不能忘, 要配置springmvc 对静态资源的映射
在 springmvc-xml 中加入

<mvc:resources location="/resources/" mapping="/resources/**" />

6 发布项目,在浏览器地址栏访问

访问地址:http://localhost:8080/blog-douyuzhi/login

7 所需文件下载

链接：https://pan.baidu.com/share/init?surl=rEjXINyTwAIhcviNukuLUA
提取码：u7yj

【SSM架构】博客系统开发(七)-登陆界面

【SSM架构】博客系统开发7-登陆界面