之前一直没有独立完成过整个WEB，最近要写一个给老师自动发短信祝福的小web，从0.1到1（因为SSM框架朋友帮我搭好了，所以是0.1）
1.图标使用
web.xml 加入
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.woff</url-pattern>
<url-pattern>*.woff2</url-pattern>
</servlet-mapping>
2.登录拦截器
只能拦截Controller 不能拦截静态资源，jsp，html等
<!-- 配置拦截器 -->
<mvc:interceptors>
<mvc:interceptor>
<!-- 拦截所有birth目录下面的页面 -->
<mvc:mapping path="/**"/>
<!-- mvc:exclude-mapping是另外一种拦截，它可以在你后来的测试中对某个页面进行不拦截，这样就不用在
LoginInterceptor的preHandler方法里面获取不拦截的请求uri地址了(优选) -->
<mvc:exclude-mapping path="/toLogin" />
<mvc:exclude-mapping path="/login.jsp" />
<mvc:exclude-mapping path="/login" />
<bean class="interceptor.LoginInterceptor"></bean>
</mvc:interceptor>
</mvc:interceptors>
package interceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
public class LoginInterceptor implements HandlerInterceptor {
@Override
public void afterCompletion(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, Exception arg3)
throws Exception {
//执行完毕，返回前拦截
}
@Override
public void postHandle(HttpServletRequest arg0, HttpServletResponse arg1, Object arg2, ModelAndView arg3)
throws Exception {
//处理过程中执行拦截
}
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object arg2) throws Exception {
//在拦截点执行前拦截，如果返回true则不执行拦截点后的操作（拦截成功）
//返回false则不执行拦截
HttpSession session = request.getSession();
if(session.getAttribute("username")!=null) {
// 登录成功不拦截
return true;
}else {
// 拦截后进入登录页面
response.sendRedirect(request.getContextPath()+"/toLogin");
return false;
}
}
}
3.页面跳转
所有jsp里面的访问Controller接口，Controller完成跳转
jsp目录：/WEB-INF/jsp/index.jsp
1.视图解析器
@RequestMapping(value = "/toEditPwd", method = RequestMethod.GET)
String toEditPwd(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
return "edit_pwd";
//好像也能重定向，还没用过
//return "redirect:/user/index"; ？？？没验证
}
2.重定向/转发
@RequestMapping(value = "/toSelectByTeacherName", method = RequestMethod.GET)
void toSelectByTeacherName(HttpServletRequest request, HttpServletResponse response,String teaName) throws ServletException, IOException {
List<DBTeacher> resultlist = teaMapper.selectByTeaName(teaName);
request.setAttribute("resultlist",resultlist);
request.getRequestDispatcher("/WEB-INF/jsp/select.jsp").forward(request, response);
//response.sendRedirect("www.baidu.com");
}
视图解析器
<!-- 配置视图解析器 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass"
value="org.springframework.web.servlet.view.JstlView"></property>
<!-- 配置逻辑视图的前缀 -->
<property name="prefix" value="/WEB-INF/jsp/" />
<!-- 配置逻辑视图的后缀 -->
<property name="suffix" value=".jsp" />
</bean>
4.包含标签
没想明白是导航栏为主体，main作为插入，然后一直改变main里面的内容
还是main作为主体，导航栏作为插入，根据不同选项进行高亮
暂时测试是如下，但没有实际使用
edit_pwd.jsp中有
<jsp:include page="navbar.jsp" flush="true"/>
edit_pwd（父亲）引入的js、css等navbar（儿子）也可以使用，不用再次引入，jsp标签不能省略（不知为啥，什么utf-8）
edit_pwd.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>修改密码 - 生日祝福后台管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<jsp:include page="navbar.jsp" flush="true"/>
<!--页面主要内容-->
<main class="lyear-layout-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<form method="POST" action="#" class="site-form" onsubmit="return false" id="editPwdForm">
<input class="form-control" id="" type="text" style="display:none" value="${sessionScope.username}" name="username">
<div class="form-group">
<label for="old-password">旧密码</label>
<input type="password" class="form-control" name="oldpwd" id="oldpwd" placeholder="输入原密码">
</div>
<div class="form-group">
<label for="new-password">新密码</label>
<input type="password" class="form-control" name="newpwd" id="newpwd" placeholder="输入新的密码">
</div>
<div class="form-group">
<label for="confirm-password">确认新密码</label>
<input type="password" class="form-control" name="confirmpwd" id="confirmpwd" placeholder="请再次输入新的密码">
</div>
<button type="button" onclick="editPwd()" class="btn btn-primary">修改密码</button>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<!--End 页面主要内容-->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
function editPwd() {
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "${pageContext.request.contextPath}/editPwd" ,//url
data: $('#editPwdForm').serialize(),
success: function (result) {
if(result.code=="yes"){
alert("修改成功！");
document.location = "${pageContext.request.contextPath}/edit_pwd.jsp";
}else if(result.code=="no1") {
alert("新密码两次输入不同！");
document.location = "${pageContext.request.contextPath}/edit_pwd.jsp";
}else if(result.code=="no2") {
alert("新密码不能为空！");
document.location = "${pageContext.request.contextPath}/edit_pwd.jsp";
}else if(result.code=="no3") {
alert("原密码错误！");
document.location = "${pageContext.request.contextPath}/edit_pwd.jsp";
}else if(result.code=="no4") {
alert("操作失败");
document.location = "${pageContext.request.contextPath}/edit_pwd.jsp";
}
},
error : function() {
alert("系统异常！请联系开发人员");
}
});
}
</script>
</body>
</html>
navbar.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<div class="lyear-layout-web">
<div class="lyear-layout-container">
<!--左侧导航-->
<aside class="lyear-layout-sidebar">
<!-- logo -->
<div id="logo" class="sidebar-header">
<a href="#"><img src="images/logo-sidebar.png"
title="LightYear" alt="LightYear" /></a>
</div>
<div class="lyear-layout-sidebar-scroll">
<nav class="sidebar-main">
<ul class="nav nav-drawer">
<li class="nav-item active"><a
href="${pageContext.request.contextPath}/selectByPage?PageNum=1"><i
class="mdi mdi-home"></i> 教师管理</a></li>
</ul>
</nav>
<div class="sidebar-footer">
<p class="copyright">
友情链接<br> <a target="_blank" href="http://www.hhu.edu.cn/">河海大学</a><br>
<a target="_blank" href="http://jwc.hhu.edu.cn/">河海大学教务处</a>
</p>
</div>
</div>
</aside>
<!--End 左侧导航-->
<!--头部信息-->
<header class="lyear-layout-header">
<nav class="navbar navbar-default">
<div class="topbar">
<div class="topbar-left">
<div class="lyear-aside-toggler">
<span class="lyear-toggler-bar"></span> <span
class="lyear-toggler-bar"></span> <span
class="lyear-toggler-bar"></span>
</div>
<span class="navbar-page-title"> 教师管理 </span>
</div>
<ul class="topbar-right">
<li class="dropdown dropdown-profile"><a
href="javascript:void(0)" data-toggle="dropdown"> <span>${sessionScope.username}
<span class="caret"></span>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a
href="${pageContext.request.contextPath}/edit_pwd.jsp"><i
class="mdi mdi-lock-outline"></i> 修改密码</a></li>
<li class="divider"></li>
<li><a href="${pageContext.request.contextPath}/loginOut"><i
class="mdi mdi-logout-variant"></i> 退出登录</a></li>
</ul></li>
<!--切换主题配色-->
<li class="dropdown dropdown-skin"><span
data-toggle="dropdown" class="icon-palette"><i
class="mdi mdi-palette"></i></span>
<ul class="dropdown-menu dropdown-menu-right"
data-stopPropagation="true">
<li class="drop-title"><p>主题</p></li>
<li class="drop-skin-li clearfix"><span class="inverse">
<input type="radio" name="site_theme" value="default"
id="site_theme_1" checked> <label for="site_theme_1"></label>
</span> <span> <input type="radio" name="site_theme"
value="dark" id="site_theme_2"> <label
for="site_theme_2"></label>
</span> <span> <input type="radio" name="site_theme"
value="translucent" id="site_theme_3"> <label
for="site_theme_3"></label>
</span></li>
<li class="drop-title"><p>LOGO</p></li>
<li class="drop-skin-li clearfix"><span class="inverse">
<input type="radio" name="logo_bg" value="default"
id="logo_bg_1" checked> <label for="logo_bg_1"></label>
</span> <span> <input type="radio" name="logo_bg"
value="color_2" id="logo_bg_2"> <label
for="logo_bg_2"></label>
</span> <span> <input type="radio" name="logo_bg"
value="color_3" id="logo_bg_3"> <label
for="logo_bg_3"></label>
</span> <span> <input type="radio" name="logo_bg"
value="color_4" id="logo_bg_4"> <label
for="logo_bg_4"></label>
</span> <span> <input type="radio" name="logo_bg"
value="color_5" id="logo_bg_5"> <label
for="logo_bg_5"></label>
</span> <span> <input type="radio" name="logo_bg"
value="color_6" id="logo_bg_6"> <label
for="logo_bg_6"></label>
</span> <span> <input type="radio" name="logo_bg"
value="color_7" id="logo_bg_7"> <label
for="logo_bg_7"></label>
</span> <span> <input type="radio" name="logo_bg"
value="color_8" id="logo_bg_8"> <label
for="logo_bg_8"></label>
</span></li>
<li class="drop-title"><p>头部</p></li>
<li class="drop-skin-li clearfix"><span class="inverse">
<input type="radio" name="header_bg" value="default"
id="header_bg_1" checked> <label for="header_bg_1"></label>
</span> <span> <input type="radio" name="header_bg"
value="color_2" id="header_bg_2"> <label
for="header_bg_2"></label>
</span> <span> <input type="radio" name="header_bg"
value="color_3" id="header_bg_3"> <label
for="header_bg_3"></label>
</span> <span> <input type="radio" name="header_bg"
value="color_4" id="header_bg_4"> <label
for="header_bg_4"></label>
</span> <span> <input type="radio" name="header_bg"
value="color_5" id="header_bg_5"> <label
for="header_bg_5"></label>
</span> <span> <input type="radio" name="header_bg"
value="color_6" id="header_bg_6"> <label
for="header_bg_6"></label>
</span> <span> <input type="radio" name="header_bg"
value="color_7" id="header_bg_7"> <label
for="header_bg_7"></label>
</span> <span> <input type="radio" name="header_bg"
value="color_8" id="header_bg_8"> <label
for="header_bg_8"></label>
</span></li>
<li class="drop-title"><p>侧边栏</p></li>
<li class="drop-skin-li clearfix"><span class="inverse">
<input type="radio" name="sidebar_bg" value="default"
id="sidebar_bg_1" checked> <label for="sidebar_bg_1"></label>
</span> <span> <input type="radio" name="sidebar_bg"
value="color_2" id="sidebar_bg_2"> <label
for="sidebar_bg_2"></label>
</span> <span> <input type="radio" name="sidebar_bg"
value="color_3" id="sidebar_bg_3"> <label
for="sidebar_bg_3"></label>
</span> <span> <input type="radio" name="sidebar_bg"
value="color_4" id="sidebar_bg_4"> <label
for="sidebar_bg_4"></label>
</span> <span> <input type="radio" name="sidebar_bg"
value="color_5" id="sidebar_bg_5"> <label
for="sidebar_bg_5"></label>
</span> <span> <input type="radio" name="sidebar_bg"
value="color_6" id="sidebar_bg_6"> <label
for="sidebar_bg_6"></label>
</span> <span> <input type="radio" name="sidebar_bg"
value="color_7" id="sidebar_bg_7"> <label
for="sidebar_bg_7"></label>
</span> <span> <input type="radio" name="sidebar_bg"
value="color_8" id="sidebar_bg_8"> <label
for="sidebar_bg_8"></label>
</span></li>
</ul></li>
<!--切换主题配色-->
</ul>
</div>
</nav>
</header>
<!--End 头部信息-->
</div>
</div>
扫一扫
7393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
