这次我们使用以前学过的jdbc来写一个简单的登录页面（用到了Ajax 先了解 后续会讲）
主要注解都在代码后注明了！自己阅读。
先看一下成品页面。
有输入用户名，密码，登录按钮。
粉色区域为登陆状态（登陆成功，登陆失败），点击登陆后会根据情况改变
蓝色区域为时钟，是动态的，利用js周期定时器（setInterval（））实现。
数据库界面
（懒得新建表了，随便拿了一个 attack是密码）
登录成功
登陆失败
1.页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<style>
#time{
width: 200px;
}
#jieguo{
width: 200px;
}
#body{
background-color: yellow;
background-image: url("/img/u=146030364,2758798561&fm=26&gp=0.jpg");
background-repeat: no-repeat;
background-position: center;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<body id="body">
<div id="all" align="center">
<div>
用户名：<input name="username" id="name">
</div>
<div>
密 码：<input name="password" id="password">
</div>
<div>
<button type="button" id="loginBtu">登录</button>
<div id="jieguo" style="background-color: pink">登陆状态</div>
</div>
<div id="time" align="center" style="background-color: aqua">time</div>
</div>
</body>
</html>
2.文件路径
3.js文件代码（需要引入jQuery），内附Ajax简单介绍
$(function () {
$("#loginBtu").click(function () {
//获取前端页面输入的账号密码
var name1 = document.getElementById("name").value;
var password1 = document.getElementById("password").value;
//使用Ajax！目前先了解，后续重点
$.ajax(
{
url:"/login", //此处就是跳转的url=> @Webservlet（/login）
type:"get",
data:{
name:name1, //向后台传递参数name 值为上面的name1
password:password1 //向后台传递参数password 值为上面的password1
},
success:function (result) { //若成功
$("#jieguo").html(result); //id为jiegu的div内容将变为result（后台返回的结果）
}
}
)
})
// 动态时间 这个不多介绍 能看懂
function getTime() {
var date = new Date();
var h = date.getHours()<10?"0"+date.getHours().toString():date.getHours();
var m = date.getMinutes()<10?"0"+date.getMinutes().toString():date.getMinutes();
var s=date.getSeconds()<10?"0"+date.getSeconds().toString():date.getSeconds();
var x=date.getDay();
var xx;
if(x==0){
xx="星期日";
}
else if(x==1){
xx="星期一";
}
else if(x==2){
xx="星期二";
}
else if(x==3){
xx="星期三";
}
else if(x==4){
xx="星期四";
}
else if(x==5){
xx="星期五";
}
else if(x==6){
xx="星期六";
}
var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+h+":"+m+":"+s+'</br>'+"---------"+'</br>'+xx;
$("#time").html(timeInfo);
}
getTime();
setInterval(getTime,1000)
});
4.数据库连接池代码
建立c3p0数据库配置文件
命名一定是 c3p0-config.xml 否则不会自动找到
<c3p0-config>
<!-- 使用默认的配置读取连接池对象 -->
<default-config>
<!-- 连接参数 -->
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost:3306/lol?characterEncoding=utf-8</property>
<property name="user">root</property>
<property name="password"></property>
<!-- 连接池参数 -->
<property name="initialPoolSize">5</property> //初始连接数
<property name="maxPoolSize">10</property> //最大连接数
<property name="checkoutTimeout">3000</property> //连接延迟
</default-config>
</c3p0-config>
建立工具类JDBCUtils_c3p0
package login;
import com.mchange.v2.c3p0.ComboPooledDataSource;
import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;
public class JDBCUtils_c3p0 {
private static DataSource dataSource;
static {
dataSource=new ComboPooledDataSource(); //使用c3p0数据库连接池 自动找名字为c3p0-config.xml的配置文件
}
public static Connection getConnection() throws SQLException {
return dataSource.getConnection();
}
public static void getClose(Connection connection, Statement statement){
try {
if(connection!=null){
connection.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
try {
if(statement!=null){
statement.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
5.登录Login的后台Java代码
package login;
import druid.JDBCUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Iterator;
@WebServlet("/login")
public class Login extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
String name=req.getParameter("name");
String password=req.getParameter("password");
Connection connection = null;
Statement statement=null;
String a="登录失败";
int i=0;
try {
connection = JDBCUtils.getConnection();
statement=connection.createStatement();
String sql="select * from hero where name='"+name+"'and attack='"+password+"'";
ResultSet rs = statement.executeQuery(sql);
while (rs.next())
{
System.out.println(rs.getString(1) + "/t" + rs.getString(2));
i++;
}
if(i!=0){
a="登录成功";
}
resp.getWriter().write(a); //这里就是后台返回给ajax 的 result的数据
} catch (SQLException ex) {
ex.printStackTrace();
}finally {
JDBCUtils_c3p0.getClose(connection,statement);
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doPost(req, resp);
}
}
最后 看完自己写着试试 增加熟练度 对 servlet和JDBC
