文章目录
数据库的准备
创建一个数据库
数据库名
给这个数据库创建一个表
数据库的连接的准备
buildPath一下数据库的驱动
不会的可以看一下我写的数据库连接方面的文章：链接如下
JDBC连接数据库
驱动的百度网盘分享
链接：https://pan.baidu.com/s/1_CB8eUoq7Q4NLSteflIakA&shfl=sharepset
提取码：kgn2
复制这段内容后打开百度网盘手机App，操作更方便哦
数据库连接的实现
运用了MVC的开发模式
包的创建如下
代码部分
后端代码的实现
首先创建一个实体，由于做的是登录的页面，数据库中的user也已经建好了，一共有三个属性，现在我们需要的就账户密码这两个属性，所以创建的实体中重写构造方法的时候只用账户密码就行了，记得把无参数的形式也要写上。
User的代码如下
package model;
public class User {
private int id;
private String userName;
private String passWord;
public User() {
super();
}
public User(String userName, String passWord) {
super();
this.userName = userName;
this.passWord = passWord;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassWord() {
return passWord;
}
public void setPassWord(String passWord) {
this.passWord = passWord;
}
}
然后写数据库的连接，放在util这个包中
package util;
import java.sql.DriverManager;
import com.mysql.jdbc.Connection;
public class DbUtil {
private String dbUrl="jdbc:mysql://localhost:3306/db_jsp";
private String dbUserName="root";
private String dbPassword="XXXXXXXXXXX";//放自己的数据库的密码
private String jdbcName="com.mysql.jdbc.Driver";
//获取数据库的连接
public Connection getCon()throws Exception{
Class.forName(jdbcName);//用反射实例化一下驱动包
Connection con=(Connection) DriverManager.getConnection(dbUrl,dbUserName,dbPassword);
return con;
}
//关闭数据库的连接
public void closeCon(Connection con) throws Exception{
if (con!=null) {
con.close();
}
}
//测试连接
public static void main(String[] args) {
DbUtil dbUtil=new DbUtil();
try {
dbUtil.getCon();
System.out.println("数据库连接成功！");
} catch (Exception e) {
e.printStackTrace();
System.out.println("数据库连接失败！");
}
}
}
一般写数据库的连接，都要测试一下，所以在这里面是有一个main函数的，用于我们数据库的连接的测试。
看一下测试的效果，可以看到数据库是连接成功的
再写dao类，dao类主要是对一些实体的进行操作的，这里就一个用户实体，所以我们创建一个UserDao，把对用户的一些数据库相关的操作放在这里面
UserDao的代码如下
package dao;
//dao类是处理数据库的相关操作的
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import com.mysql.jdbc.Connection;
import model.User;
public class UserDao {
public User login(Connection con,User user)throws Exception {
User resultUser=null;
String sql="select * from t_user where userName=? and passWord=?";
PreparedStatement pstmt=con.prepareStatement(sql);//预编译
pstmt.setString(1, user.getUserName());//向上面的第一个坑填值
pstmt.setString(2, user.getPassWord());//向上面的第二个坑填值
ResultSet rs=pstmt.executeQuery();//返回一个二维的结果集
if (rs.next()) {//查询数据
resultUser=new User();//实例化这个对象
//ResultSet中的一个方法getString方法是对这个结果集中的东西按照名字进行搜索
resultUser.setUserName(rs.getString("userName"));
resultUser.setPassWord(rs.getString("passWord"));
}
return resultUser;
}
}
前端的界面的实现
login.jsp的代码如下
<%@ 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=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="login" method="post">
<table>
<tr>
<!-- colspan属性表示单元格可以横跨的列数 -->
<th colspan="2">用户登录</th>
</tr>
<tr>
<th>用户名：</th>
<th><input type="text" id="userName" name="userName" style="width: 150px" /></th>
</tr>
<tr>
<th>密 码：</th>
<th><input type="password" id="passWord" name="passWord" style="width: 150px" /></th>
</tr>
<tr>
<th><input type="submit" value="登录"></th>
<th><input type="reset" value="重置">
</tr>
</table>
</form>
</body>
</html>
看一下效果
Servlet的创建
action是一个submit提交后访问的接口，这个接口可以带动后台的Servlet的代码的运行，现在创建一个空的后台的Servlet，这个Servlet是作用是对前台的数据进行处理。
package web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public LoginServlet2() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
}
}
web.xml的配置
架子已经搭好了，现在是配置前后端交互的连接，这个连接在web.xml中创建。如下：
填充后端的Servlet
代码如下
package web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.mysql.jdbc.Connection;
import dao.UserDao;
import model.User;
import util.DbUtil;
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
DbUtil dbUtil=new DbUtil();
UserDao userDao=new UserDao();
public LoginServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
String userName=request.getParameter("userName");
String passWord=request.getParameter("passWord");
Connection con=null;
try {
User user=new User(userName, passWord);
con=dbUtil.getCon();
User currentUser=userDao.login(con, user);
if (currentUser==null) {
System.out.println("登录失败");
}else{
System.out.println("登录成功");
}
} catch (Exception e) {
e.printStackTrace();
}finally {//关闭数据库
try {
dbUtil.closeCon(con);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
在数据库的表中写上数据
现在进行登录
登录成功后再控制台可以看到这个
完善登录的效果
完善后的代码如下
package web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.mysql.jdbc.Connection;
import dao.UserDao;
import model.User;
import util.DbUtil;
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
DbUtil dbUtil=new DbUtil();
UserDao userDao=new UserDao();
public LoginServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
String userName=request.getParameter("userName");
String passWord=request.getParameter("passWord");
Connection con=null;
try {
User user=new User(userName, passWord);
con=dbUtil.getCon();
User currentUser=userDao.login(con, user);
if (currentUser==null) {
request.setAttribute("error", "用户名或者密码错误");
request.setAttribute("userName", userName);//设置值
request.setAttribute("passWord", passWord);
//重定向，并把request和response带过去
request.getRequestDispatcher("login.jsp").forward(request, response);
}else{
//下面是设置登录成功后跳转的页面
HttpSession session=request.getSession();//获取session
session.setAttribute("currentUser", currentUser);
//request.getRequestDispatcher("main.jsp").forward(request, response);//服务器端跳转
response.sendRedirect("main.jsp");//直接用重定向就行了
}
} catch (Exception e) {
e.printStackTrace();
}finally {//关闭数据库
try {
dbUtil.closeCon(con);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
上面代码主要是改了if和else的语句，然后增加了登录的错误提示，然后现在改一下前台的代码，对这个修改进行连接，让后台修改的鲜果能传到前台
login的代码如下
<%@ 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=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="login" method="post">
<table>
<tr>
<!-- colspan属性表示单元格可以横跨的列数 -->
<th colspan="2">用户登录</th>
</tr>
<tr>
<th>用户名：</th>
<!-- 下面的value部分，是用的EI表达式，是可以直接获取request中获得的值 -->
<th><input type="text" id="userName" name="userName"
style="width: 150px" value="${userName}"/></th>
</tr>
<tr>
<th>密 码：</th>
<th><input type="password" id="passWord" name="passWord"
style="width: 150px" value="${passWord}"/></th>
</tr>
<tr>
<th><input type="submit" value="登录"></th>
<th><input type="reset" value="重置">
<td><font color="red">${error}</font>
</tr>
</table>
</form>
</body>
</html>
主要就是加了一个错误提醒和一个增强用户体验的效果，当我们登录的时候，输入的是错误的时候，会提示输入错误，并把你上一次输入的值传回来，现在登录，就有效果了
登录成功跳转
下面写登录成功后的跳转页面
main.jsp的代码如下
<%@ 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=UTF-8">
<title>Insert title here</title>
</head>
<body>
这是登录的主页
</body>
</html>
登录成功的效果
前两天有个东西写的不太好，简单的改了一下，主要修改的代码如下
上次写的跳转，不知道为什么，没有把那个对象带到写的页面去，现在换了一种跳转的方式，就是上面学的客户端跳转和服务器跳转的知识，现在能把currentUser这个对象带过去了。我们看一下main.jsp的代码，简单的改一下
现在看效果
通过这样的方式，我们就把登录的时候的用户名带过来了，这里用的是EI表达式，当然，还有很多方法可以取到这个值，比如说JavaBean的知识，有兴趣的都可以好好学一下。
简单总结
后面做项目的话，这个是可以直接用进去的，但是要把那个登录的界面进行美化，然后自己把main.jsp改成登录的首页，过几天我再写一个注册的界面，然后把登录和注册的结合在一起，有兴趣的可以关注后面的文章，大家一起加油啊，觉得还不错的记得点赞奥！
扫一扫
1659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
