SpringMVC+hibernate+Mysql環境搭建（二）

時間 2019-11-17

標籤 springmvc+hibernate+mysql springmvc hibernate mysql 環境搭建欄目 Spring 简体版

原文原文鏈接

（5）後臺代碼基本寫完了，如今開始寫表現層，表現層放在/WEB-INF/view目錄下，javascript

主要有student_add.jsp和student.jsp頁面html

student_add.jsp頁面源碼以下：java

 <%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"><!--   
function turnback(){   
    window.location.href="<%=request.getContextPath() %>/student.do";   
}   
// --></script> 
</head>
<body>
<form method="post" action="<%=request.getContextPath() %>/student.do?method=save">  
       <div><c:out value="${addstate}"></c:out></div>  
       <table>  
           <tr><td>姓名</td><td><input id="name" name="name" type="text" /></td></tr>  
           <tr><td>密碼</td><td><input id="psw" name="psw"  type="text" /></td></tr>  
           <tr><td colSpan="2" align="center"><input type="submit" value="提交"/>
           <input type="button" onclick="turnback()" value="返回" /> </td></tr>  
       </table>  
</form>  
</body>
</html>

student.jsp頁面的源碼以下：jquery

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>添加</title>  
<script language="javascript" src="<%=request.getContextPath()%>/style/jquery-1.8.0.min.js"></script>  
<style>
<!--   
table{  border-collapse:collapse;  }   
td{  border:1px solid #f00;  }   
-->
</style>
<style mce_bogus="1">
table{  border-collapse:collapse;  }   
td{  border:1px solid #f00;  }
</style>  
<script type="text/javascript">
<!--   
function add(){   
    window.location.href="<%=request.getContextPath() %>/student.do?method=add";   
}   
  
function del(id){   
$.ajax( {   
    type : "POST",   
    url : "<%=request.getContextPath()%>/student.do?method=del&id=" + id,   
    dataType: "json",   
    success : function(data) {   
        if(data.del == "true"){   
            alert("您肯定刪除麼！");   
            $("#" + id).remove();   
        }   
        else{   
            alert("刪除失敗！");   
        }   
    },   
    error :function(){   
        alert("網絡鏈接出錯！");   
    }   
});   
}   
// --></script>  
</head>  
<body>  
  
<input id="add" type="button" onclick="add()" value="添加"/>  
<table >  
    <tr>  
        <td>序號</td>  
        <td>姓名</td>  
        <td>密碼</td>  
        <td>操做</td>  
    </tr>  
    <c:forEach items="${list}" var="student">  
    <tr id="<c:out value="${student.id}"/>">  
        <td><c:out value="${student.id}"/></td>  
        <td><c:out value="${student.name}"/></td>  
        <td><c:out value="${student.psw}"/></td>  
        <td>  
            <input type="button" value="編輯"/>        
            <input type="button" onclick="del('<c:out value="${student.id}"/>')" value="刪除"/>  
        </td>  
    </tr>  
    </c:forEach>  
       
</table>  
</body>  
</html>

index.jspajax

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">   
function turnback(){   
    window.location.href="<%=request.getContextPath() %>/student.do";   
}   
</script> 
</head>
<body>
       這是一個springMVC，咱們來開始添加學生等。
       <form action="student.do">
           <input type="hidden" name="method" value="add" />
           <input type="submit" name="button" value="添加" />
       </form>
       <input type="button" onclick="turnback()" value="列表" /> </td></tr>  
</body>
</html>

這裏咱們把初始頁面寫在了index.jsp中，也能夠按我文檔結構截圖所示的把上面的index.jsp的代碼寫到Home.jsp裏spring

只需讓index.jsp中寫入以下代碼數據庫

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

</head>
<body>
        <jsp:forward page="WEB-INF/View/test/Home.jsp"/>
</body>
</html>

以上即完成了全部搭建、測試例代碼json

最後附錄數據庫截圖網絡

h3c庫中創建student表jsp