Jsp页面
image
(一)、项目结构图
image
(二)、代码实现
界面： login.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
// 我们将绝对路径封装成一个对象
String ctx = request.getContextPath();
pageContext.setAttribute("ctx",ctx);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #f3f3f3;
}
.control{
width: 340px;
background: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 5px;
}
.item{
width: 340px;
height: 60px;
background: #eeeeee;
}
.item div{
width: 170px;
height: 60px;
display: inline-block;
color: black;
font-size: 18px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
.content{
width: 100%;
}
.content div{
margin: 20px 30px;
display: none;
text-align: left;
}
p{
color: #4a4a4a;
margin-top: 30px;
margin-bottom: 6px;
font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{
width: 100%;
height: 40px;
border-radius: 3px;
border: 1px solid #adadad;
padding: 0 10px;
box-sizing: border-box;
}
.content input[type="submit"]{
margin-top: 40px;
width: 100%;
height: 40px;
border-radius: 5px;
color: white;
border: 1px solid #adadad;
background: #00dd60;
cursor: pointer;
letter-spacing: 4px;
margin-bottom: 40px;
}
.active{
background: white;
}
.item div:hover{
background: #f6f6f6;
}
</style>
<script>
window.onload = function(){
var item = document.getElementsByClassName("item");
var it = item[0].getElementsByTagName("div");
var content = document.getElementsByClassName("content");
var con = content[0].getElementsByTagName("div");
for(let i=0;i<it.length;i++){
it[i].onclick = function(){
for(let j=0;j<it.length;j++){
it[j].className = '';
con[j].style.display = "none";
}
this.className = "active";
it[i].index=i;
con[i].style.display = "block";
}
}
}
</script>
</head>
<body>
<div class="control">
<div class="item">
<div class="active">登录</div><div>注册</div>
</div>
<div class="content">
<div style="display: block;">
<form action="${ctx}/userServlet?action=login" method="post">
<p>账号</p>
<input type="text" placeholder="username" name="name"/>
<p>密码</p>
<input type="password" placeholder="password" name="password" />
<br/>
<input type="submit" value="登录" />
</form>
</div>
<div>
<form action="${ctx}/userServlet?action=register" method="post">
<p>用户名</p>
<input type="text" placeholder="username" name="name"/>
<p>密码</p>
<input type="password" placeholder="password" name="password"/>
<p>邮箱</p>
<input type="text" placeholder="email" name="email"/>
<br/>
<input type="submit" value="登录" />
</form>
</div>
<div style="test-algin:center">${show}</div>
</div>
</div>
</body>
</html>
Servlet： UserServlet.java这个类使用了反射优化了一下，详细请看Servlet优化
package servlet;
import java.io.IOException;
import java.lang.reflect.Method;
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 molde.User;
import service.UserService;
@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String action = req.getParameter("action");
// 利用反射来优化Servlet
try {
Class<? extends UserServlet> clazz = this.getClass();
Method method = clazz.getMethod(action,HttpServletRequest.class,HttpServletResponse.class);
if(method!=null) {
String returns=(String) method.invoke(this, req,resp);
if(returns != null) {
if("/index.jsp".equals(returns)) {
req.getRequestDispatcher(returns).forward(req, resp);
}else {
req.setAttribute("show", returns);
req.getRequestDispatcher("/login.jsp").forward(req, resp);
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
// 处理登录请求
public String login(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
UserService us = new UserService();
boolean obj = us.login(req.getParameter("name"),req.getParameter("password"));
if(obj == true) {
return "/index.jsp";
}else {
return "登录失败！";
}
}
// 处理注册请求
public String register(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
User user = new User(req.getParameter("name"),req.getParameter("password"),req.getParameter("email"));
UserService us = new UserService();
boolean obj = false;
if(us != null) {
obj = us.register(user);
}
if(obj == true) {
return "注册成功！";
}else {
return "注册失败！";
}
}
}
UserInterface.java 这是一个接口，用来约束UserDao和UserService。
package Interface;
import molde.User;
// user接口约束
public interface UserInterface {
// 处理登录
public boolean login(String name,String password);
// 处理注册
public boolean register(User user);
}
Service: UserService.java 实现了 UserInterface接口，用来处理具体业务操作！
package service;
import Interface.UserInterface;
import dao.UserDao;
import molde.User;
public class UserService implements UserInterface{
UserDao ud = new UserDao();
// 登录
@Override
public boolean login(String name, String password) {
System.out.println(ud.login(name, password));
return ud.login(name, password);
}
// 注册
@Override
public boolean register(User user) {
return ud.register(user);
}
}
Dao： UserDao.java实现了实现了 UserInterface接口，然后进行数据的保存验证！
package dao;
import java.sql.*;
import Interface.UserInterface;
import molde.User;
import utils.jdbcUtils;
// 实现UserInterface
public class UserDao implements UserInterface{
private Connection conn;
private ResultSet res;
private PreparedStatement ps;
// 登录验证
@Override
public boolean login(String name, String password) {
boolean ble = false;
try {
conn = jdbcUtils.getConn();
String sql = "select * from user where uname=? and upassword=?";
ps = conn.prepareStatement(sql);
ps.setString(1, name);
ps.setString(2,password);
res = ps.executeQuery();
ble=res.next();
} catch (Exception e) {
e.printStackTrace();
}finally {
jdbcUtils.closes(ps, conn, res);
}
return ble;
}
// 注册存储
@Override
public boolean register(User user) {
boolean ble = false;
try {
conn = jdbcUtils.getConn();
String sql = "insert into user(uname,upassword,ueamil) value(?,?,?)";
ps = conn.prepareStatement(sql);
ps.setString(1, user.getName());
ps.setString(2, user.getPassword());
ps.setString(3, user.getEmail());
res = ps.executeQuery();
ble=res.next();
} catch (Exception e) {
e.printStackTrace();
}finally {
jdbcUtils.closes(ps, conn, res);
}
System.out.println("dao:"+ble);
return ble;
}
}
Utils: jdbcUtils.java实现数据库连接！
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import com.mysql.jdbc.Statement;
public class jdbcUtils {
// 获取Connection连接对象
public static Connection getConn() throws Exception {
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/test";
return DriverManager.getConnection(url,"root","123456");
}
// 释放资源
public static void closes(PreparedStatement ps,Connection conn,ResultSet res) {
try {
if(ps != null) {ps.close();}
if(conn != null) {conn.close();}
if(res != null) {res.close();}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
能力有限，若有疏漏，或总结有误，欢迎指教 ~ ~ ~
