new394.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap + jsp 的使用</title>
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<style type="text/css">
#div1{
border: 1px solid red;
width: 200px;
height: 200px;
background-color: #cccccc;
margin: 50px auto;
}
#div2{
border: 1px solid black;
width: 350px;
height: 350px;
background-color: #666666;
}
</style>
<script type="text/javascript">
$(function () {
var $div1 = $("#div1");
var $div2 = $("#div2");
$div1.bind("mouseover mouseout mousemove",function (event) {
if(event.type == "mouseover")
{
$div2.show();
}
else if(event.type == "mouseout")
{
$div2.hide();
}
else if(event.type == "mousemove")
{
$div2.offset({
left: event.pageX + 15,
top: event.pageY + 15
});
}
});
});
</script>
</head>
<body>
<div id="div1"> </div>
<div id="div2"> </div>
</body>
</html>
new395.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bootstrap + jsp 的使用</title>
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
<style type="text/css">
*,html{
margin: 0;
padding: 0;
}
.container-fluid{
padding: 0;
}
.top-bar{
height: 150px;
width: 100%;
background-color: white;
}
.middle-bar{
width: 100%;
height: 560px;
background-color: #3e8f3e;
}
.middle-bar #span1{
color: #fefefe;
font-size: 50px;
display:inline-block;
padding-top: 260px;
padding-left: 220px;
}
#errorMsg{
color: red;
font-size: 21px;
padding-left: 40px;
}
</style>
<script type="text/javascript">
$(function () {
$("#btn_reg").click(function () {
//验证用户名
var userName = $("#userName").val();
var userNamePattern = /^\w{5,12}$/;
if(!userNamePattern.test(userName))
{
$("#errorMsg").text("用户名不合法");
return false;
}
//验证密码
var pwd = $("#pwd").val();
var pwdPattern = /^\w{5,12}$/;
if(!pwdPattern.test(pwd))
{
$("#errorMsg").text("密码不合法");
return false;
}
//确认密码与密码一致
var pwd2 = $("#pwd2").val();
if(pwd2 !== pwd)
{
$("#errorMsg").text("密码与确认密码不一致");
return false;
}
$("#errorMsg").text("");
alert("注册成功");
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="top-bar">
</div>
<div class="middle-bar">
<div class="col-md-4 col-md-offset-1">
<span id="span1">欢迎注册</span>
</div>
<div class="col-md-4 col-md-offset-1">
<h2>用户注册</h2>
<br>
<form action="http://localhost:8080">
<div class="form-group">
<label for="userName">用户名:</label>
<input type="text" class="form-control" id="userName" placeholder="用户名">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd" placeholder="密码">
</div>
<div class="form-group">
<label for="pwd2">确认密码:</label>
<input type="password" class="form-control" id="pwd2" placeholder="确认密码">
</div>
<br>
<button type="submit" class="btn btn-default" id="btn_reg">注册</button>
<span id="errorMsg"></span>
</form>
</div>
</div>
</div>
</body>
</html>
new396.jsp
<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
<script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
<script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
</head>
<body>
<%!
private Connection conn = null;
private Statement stmt = null;
private ResultSet rs = null;
public void getNewsList()
{
try
{
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","mysql123");
stmt = conn.createStatement();
rs = stmt.executeQuery("select a,b,c from table1");
while (rs.next())
{
int id = rs.getInt("a");
String title = rs.getString("b");
String summary = rs.getString("c");
String content = rs.getString("content");
String author = rs.getString("author");
Timestamp time = rs.getTimestamp("createdate");
System.out.println(id + "\t" + title + "\t" + summary + "\t" + content + "\t" + author + "\t" + time);
//以上均为模拟代码,供参考
}
}
catch (SQLException | ClassNotFoundException e)
{
e.printStackTrace();
}
finally
{
try
{
if(rs != null)
{
rs.close();
}
if(stmt != null)
{
stmt.close();
}
if(conn != null)
{
conn.close();
}
}
catch (SQLException e)
{
e.printStackTrace();
}
}
}
%>
<%
getNewsList(); //表没有建立,提示错误
%>
</body>
</html>