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-blogString 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基于博客系统的UI手机界面展示
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
和lock一起学beego 博客系统开发为例(六)
为什么80%的码农都做不了架构师?>>> 接着上篇来写<和lock一起学beego 博客系统开发为例(五)> 这篇主要完成以下事项: 下篇我们要完成下面三个任务: ...
和lock一起学beego 博客系统开发为例(五)
为什么80%的码农都做不了架构师?>>> 接着上篇来写<和lock一起学beego 博客系统开发为例(四)> 这篇主要完成以下事项: 下篇我们要完成下面三个任务: ...
个人博客系统开发总结之 mybatis操作blob字段
mybaits通过mapper文件进行数据库的增删改查操作,在进行增删改查操作时需要将java的数据类型与数据库的数据类型进行转换,此时就会用到TypeHandler类型处理器.mybatis内置了j ...
视频教程-python项目之博客系统开发-Python
python项目之博客系统开发 TriAquae开源运维软件创始人,混迹IT运维领域多年,曾就职于松下.国政通.飞信.中金.NOKIA等公司,维护过少至几十台,多至数万台设备的IT系统,致力于提高企业 ...
python项目之博客系统开发-李杰-专题视频课程
python项目之博客系统开发-3133人已学习课程介绍系统由于主站.个人博客.后台管理三部分组成,其中包含Web开发中的知识,如:多级评论.文章点赞.主题定制.iframe伪Aj ...
从零开始开发SSM项目-博客系统实战
一.项目包含功能使用SSM框架开发一个博客系统,包含的功能大致有: 1.用户注册与激活,激活方式通过邮件激活 2.用户的登录和退出,包括账号登录.手机快捷登录和qq第三方登录 3.用户账号登录和注册 ...
SSM项目 - 博客系统
在线体验 : http://43.139.1.94:8080/login.html 项目 Gitee 链接 : 博客系统 - SSM 1.SSM 版本的博客系统相较于 Servlet 版本的升级 1. ...
uliweb新教程--多人博客系统开发
2019独角兽企业重金招聘Python工程师标准>>> 开始写一个uliweb的新教程,主要围绕着一个多人博客系统的开发来写.下面是我想实现的功能: blog功能 blog首页展示 ...

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

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