基于MVC架构的简单javaweb登陆注册功能实现(jsp + servlet + jdbc + mysql)
由于是第一次写博客,可能书写表达的效果不太好,希望大家见谅。此次博客主要是针对暑期老师布置的简单用户管理系统作业而展开,通过连接数据库可以利用数据库中用户信息进行登陆,并且在登陆后可修改数据库中信息(即实现数据库中的增删改查)。
本次简单的用户管理系统主要分为三个部分:前端部分;后台部分;数据库部分。其中前端部分采用html+css编写,主要部分为用户登陆界面,用户注册界面和数据库显示界面;后台部分是以MVC为架构,将servlet作为控制逻辑,对用户发出的请求作出响应,并链接到其他视图页面进行跳转。数据库部分就是一个简单的二维表以描述用户信息,但是需要将数据库加载到后台中以实现数据库的连接。
其中用户管理系统的核心即是实现这个MVC架构,MVC架构全称为: 模版(model)、视图 (view)、控制器(controller)。对于该用户管理系统,模板主要是用户表的设计和用户业务逻辑的设计;视图作为与用户交互的页面显示,负责指引用户登陆、注册和数据库的更改;控制器负责后台中数据库的业务逻辑。整个MVC架构的工作流程如下图:
一、显示界面:
1.登陆界面:
2.注册界面:
3.登陆成功界面:
二、开发环境:
idea + tomcat8.0.53 + mysql-connector-java-5.1.37.jar + mysql
三、编写过程:
1.数据库构建
直接利用idea中的database模块构建数据库,如下图所示:
2.javaBean和userDao的设计
javaBean和UserDao作为MVC架构中的model部分,javabean主要是为了表示数据库中二维表信息,简化了之后对于数据库的操作程序。而UserDao作为数据库的控制逻辑,描述对于数据库的各类行为。具体程序如下:
javabean
package bean;
public class User {
private int id;
private String username;
private String password;
public User(){
super();
}
public User(int id, String name, String password){
this.id = id;
this.username = name;
this.password = password;
}
public int getId(){
return id;
}
public void setId(int id1){
this.id = id1;
}
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;
}
}
userDao,其中引入了user的接口
package Dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.*;
import bean.User;
import conn.DBconn;
public class userDao implements InterfaceUser{
@Override
public List<User> getAllUsers(){
List<User> list = new ArrayList<User>();
Connection conn = DBconn.getConn();
String sql = "select * from thing";
try {
PreparedStatement pst = conn.prepareStatement(sql);
ResultSet rs = pst.executeQuery();
while(rs.next()){
User user = new User();
user.setId(rs.getInt("id"));
user.setUsername(rs.getString("name"));
user.setPassword(rs.getString("password"));
list.add(user);
}
rs.close();
pst.close();
} catch(SQLException e){
e.printStackTrace();
}
return list;
}
@Override
public User userLogin(String username, String passwords) {
User user = null;
PreparedStatement pst = null;
Connection conn = DBconn.getConn();
String sql = "select * from thing where name= ? and password= ?";
try{
pst = conn.prepareStatement(sql);
pst.setString(1,username);
pst.setString(2,passwords);
ResultSet rs = pst.executeQuery();
if (rs.next()){
user = new User();
user.setUsername(rs.getString("name"));
user.setPassword(rs.getString("password"));
}
pst.close();
}catch (SQLException e){
e.printStackTrace();
}
return user;
}
@Override
public boolean register(User user){
Connection conn = DBconn.getConn();
String sql = "insert into thing(id, name, password) values(?,?,?)";
int i = 0;
try{
PreparedStatement pst = conn.prepareStatement(sql);
pst.setInt(1, user.getId());
pst.setString(2, user.getUsername());
pst.setString(3, user.getPassword());
i = pst.executeUpdate();
pst.close();
} catch (SQLException e){
e.printStackTrace();
}
return i > 0;
}
@Override
public boolean updateUser(User user){
Connection conn = DBconn.getConn();
String sql = "UPDATE thing SET name=?, password=? where id=?";
int i = 0;
try{
PreparedStatement pst = conn.prepareStatement(sql);
pst.setString(1, user.getUsername());
pst.setString(2, user.getPassword());
pst.setInt(3,user.getId());
i = pst.executeUpdate();
pst.close();
} catch(SQLException e){
e.printStackTrace();
}
return i > 0;
}
@Override
public boolean deleteUser(User user){
Connection conn = DBconn.getConn();
String sql = "DELETE FROM thing where id = " + user.getId();
int i = 0;
try{
PreparedStatement pst = conn.prepareStatement(sql);
i = pst.executeUpdate();
pst.close();
}catch (SQLException e){
e.printStackTrace();
}
return i > 0;
}
}
3.数据库的连接
package conn;
import java.sql.*;
public class DBconn {
public static Connection getConn(){
String url = "jdbc:mysql://localhost:3306/lzx";
String username = "lzx";
String password = "lzx6842658";
String driver_string = "com.mysql.jdbc.Driver";
Connection conn = null;
try {
Class.forName(driver_string);
conn = DriverManager.getConnection(url, username, password);
} catch (Exception e){
System.out.println("数据库数据异常");
e.printStackTrace();
}
return conn;
}
4.servlet业务逻辑
1)loginServlet:
在doPost函数中判定输入的账号密码是否存在与数据库中,若存在则显示登陆成功,并跳转到数据库显示界面;反之则显示登陆失败。
package Servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Dao.userDao;
import bean.User;
public class loginServlet extends HttpServlet{
public loginServlet() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("username");
String password = request.getParameter("password");
userDao ud = new userDao();
User user = ud.userLogin(name, password);
if(user != null){
request.getRequestDispatcher("success.jsp").forward(request, response);
}
else if (name.equals("admin")&&password.equals("123456")){
request.getRequestDispatcher("success.jsp").forward(request, response);
} else{
response.sendRedirect("index.jsp?error=yes");
}
}
}
2)registerServlet:
在doPost函数中添加账号和密码,并将其加入到数据库中。
package Servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Dao.userDao;
import bean.User;
public class registerServlet extends HttpServlet {
public registerServlet() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8"); //设置请求数据的字符编码格式
String name = request.getParameter("username"); //获得请求表单中的用户名
String pwd = request.getParameter("password"); //获得请求表单中的密码
User user = new User();
user.setUsername(name);
user.setPassword(pwd);
userDao ud = new userDao();
if(ud.register(user)){
request.getRequestDispatcher("index.jsp").forward(request, response);
}
else {
response.sendRedirect("index.jsp");
}
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}
3)deleteServlet:
package Servlet;
import Dao.userDao;
import bean.User;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class deleteServlet extends HttpServlet {
public deleteServlet() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
int id = Integer.parseInt(request.getParameter("id"));
User user = new User();
user.setId(id);
userDao ud = new userDao();
if(ud.deleteUser(user)){
request.getRequestDispatcher("success.jsp").forward(request, response);
}
else {
response.sendRedirect("success.jsp");
}
}
/**
* Initialization of the servlet.
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
}
}
5、前端界面
1.登陆界面:
<%--
Created by IntelliJ IDEA.
User: lzx666
Date: 2018/8/6
Time: 15:26
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="first.css" />
<link rel="stylesheet" href="login.css" />
</head>
<body>
<div class="container">
<form
action="loginServlet"
method="post">
<h3>
<a href="index.jsp">用户登陆</a>
</h3>
<label
for="input"
class="sr-only">用户名</label>
<input
type="text"
id="input"
class="form-control"
placeholder="用户名"
name="username"
required>
<label
for="inputPassword"
class="sr-only">密码</label>
<input
type="password"
id="inputPassword"
class="form-control"
placeholder="密码"
name="password"
required>
<button
class="btn btn-lg btn-primary btn-block"
type="submit"
id="submit">登录</button>
<a
href="register.jsp">注册</a>
</form>
</div>
<div id="footer">
<a target="_blank"
href="https://github.com/LouZhiX">
<img src="byr.jpg"
width="30px"
height="20px" class="img-circle">Copyright</a>
by lzx.
</div>
<script>
var error ='<%=request.getParameter("error")%>';
if(error == 'yes'){
alert("账号或者密码错误!");
}
</script>
</body>
</html>
css样式:
body {
background: #eee;
}
.container {
position: fixed;
top: 50%;
left: 50%;
width: 340px;
height: 400px;
margin-left: -170px;
margin-top: -200px;
text-align: center;
}
#input, #inputpassword {
margin: 10px 0;
}
#submit {
margin-top: 10px;
}
.visitor {
display: inline-block;
margin-top: 20px;
}
a:link {
text-decoration: none;
}
.c_center {
text-align: center;
}
.c_left {
text-align: left;
}
.c_right {
text-align: right;
}
.f_div {
float: left;
}
.r_div {
float: right;
}
.head_line {
border-bottom: 1px solid #177cb0;
}
.foot_line {
border-top: 1px solid #C0C0C0;
margin-bottom: 20px;
}
.inline {
display: inline;
float: left;
margin-left: 23px;
margin-right: 25px;
margin-bottom: 20px;
}
#main {
width: 68%;
}
#content {
text-align: center;
clear: both;
}
#list {
margin-top: 10px;
}
#tag {
margin-top: 50px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
clear: both;
text-align: center;
}
2.注册界面:
<%--
Created by IntelliJ IDEA.
User: lzx666
Date: 2018/8/14
Time: 16:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="first.css" />
<link rel="stylesheet" href="login.css" />
</head>
<body>
<div class="container">
<form
action="registerServlet"
method="post">
<h3>
<a href="success.jsp">用户注册</a>
</h3>
<label
for="input"
class="sr-only">用户名</label>
<input
type="text"
id="input"
class="form-control"
placeholder="用户名"
name="username"
required>
<label
for="inputPassword"
class="sr-only">密码</label>
<input
type="password"
id="inputPassword"
class="form-control"
placeholder="密码"
name="password"
required>
<label
for="inputPassword1"
class="sr-only">确认密码</label>
<input
type="password"
id="inputPassword1"
class="form-control"
placeholder="确认密码"
name="password"
required>
<button
class="btn btn-lg btn-primary btn-sm"
type="submit"
>确 认</button>
<button
class="btn btn-lg btn-primary btn-sm"
type="reset"
>取 消</button>
</form>
</div>
</body>
</html>
3.成功登陆界面:
<%--
Created by IntelliJ IDEA.
User: lzx666
Date: 2018/8/6
Time: 16:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="Dao.userDao"%>
<%@ page import="bean.User"%>
<%@ page import="java.util.List" %>
<html>
<head>
<title>数据库显示</title>
<link rel="stylesheet" href="first.css" />
<link rel="stylesheet" href="login.css" />
</head>
<style>
table
{
width: 60%;
}
.data{
color:black;
border:2px solid RGB(73,161,225);
border-collapse: collapse;
font-size:17px;
}
.data caption{
font-size: 22px;
font-weight: bold;
}
.data td
{
vertical-align: middle;
text-align: center;
}
.data th{
color: cornflowerblue;
}
.data tr.{
background-color: #C0C0C0;
}
</style>
<body>
<center>
<table class="data" border="4">
<caption style="color: #177cb0">数据库信息</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody align="center" valign="middle">
<%
userDao ud = new userDao();
List<User> users1 = ud.getAllUsers();
for(User p: users1){
%>
<tr>
<td><%=p.getId() %></td>
<td><%=p.getUsername() %></td>
<td><%=p.getPassword() %></td>
<td><a href="deleteServlet?id=<%=p.getId()%>">删除</a></td>
</tr>
</tbody>
<%} %>
</table>
</center>
</body>
</html>
最后将以上所有模块连接起来,即可实现最简单的登陆注册以及数据库的删除。
下一篇: 幽默问答:过节就不送礼物怎么办?