Java之servlet+jdbc+html+css实现简单的MVC后台管理功能

灰太狼 2022-05-22 05:55 128阅读 0赞

## servlet+jdbc+html+css小案例 ##

简单的web小案例实现MVC小功能，学过一些Javaweb的童鞋们可以自己动手做一做了

实现后的登录界面是这样子的

![70][]

刚开始我确实使用了css，但是由于css还是使用的太菜了，没用好，所以就没有将css用上去，见谅

# 我的思路： #

1、先在web root下创建三个.jsp文件

![70 1][]

2、创建servlet类，可以直接创建，记得要打开自动配置web.xml文件，在project->Build Automatically打上勾即可

![70 2][]

3、编写loginservlet类，连接jdbc，并且从数据库中取出数据，判断用户登录的用户名和密码是否一致

4、判断是否一致，从而判断链接的页面.jsp文件进行链接

5、编写数据库之类的也要有

开始编写代码，思路一定要清晰；

1、我是先写login1.jsp文件的

具体代码如下：

<%@ page language="java" import="java.util.\*" contentType="text/html; charset=utf-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
      
    <title>login</title>  
      
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache">  
<meta http-equiv="expires" content="0">      
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
<meta http-equiv="description" content="This is my page">  
  
<link rel="stylesheet" href="/css/login1.css"/>  
  </head>  
  <body>  
   <div class="container">  
   <div class="nav-top"></div>  
   <div class="nav-bottom">  
   <div class="content">  
   <div class="content-top">  
   <p id="mangerment">管理员登陆面板</p>  
   </div>  
   <div class="content-bottom">  
   <form action="servlet/loginservlet" method="get">  
   <p class="pp">账号&nbsp;&nbsp;<input class="put" type="text" name="username"/></p>  
   <p class="pp">密码&nbsp;&nbsp;<input class="put" type="password" name="password"/></p>  
   <input class="btn" type="submit" value="登录"/>  
   <input class="btn" type="submit" value="取消"/>  
   </form>  
   </div>  
   </div>  
   </div>  
   </div>  
  </body>  
</html>

其中关键的代码：

![70 3][]

链接的CSS文件进行样式匹配，由于我的CSS还是不太好，故此做的样式效果不好，我也就没用了，注释掉了，见谅如果自己需要的话可以美化界面，去学习一下CSS挺好的

![70 4][]

在一个就是请求方式的action一定要填写web.xml中的<wrl-padding>中的如图：

![70 5][]

#### 补：css样式大概做出来了，大致是这样子 ####

源码：

<!DOCTYPE html>  
<html lang="en">  
<head><meta charset="utf-8">  
<title>登录界面</title>  
<style type="text/css">  
\*\{  
margin: 0px;  
padding: 0px;  
\}  
.container\{  
width: 100%;  
height:100%;  
\}  
.nav-top\{  
margin: 0px;  
padding: 0px;  
width: 100%;  
height:60px;  
background: skyblue;  
\}  
.nav-bottom\{  
width: 100%;  
height: 100%;  
padding: 0px;  
margin: 0px;  
position: absolute;  
top: 60px;  
left: 0px;  
background: lightpink;  
\}  
.content\{  
width: 400px;  
height: 270px;  
position: fixed;  
top: 50%;  
left: 50%;  
margin-left: -200px;  
margin-top: -135px;  
border: 2px solid \#fff;  
\}  
.content-top\{  
width: 100%;  
height: 70px;  
border: 1px dotted \#000;  
margin: 0px;  
padding: 0px;  
background: skyblue;  
text-align: center;  
font-size: 25px;  
font-family: arial;  
line-height: 70px;  
\}  
.content-bottom\{  
background: \#000044;  
height: 200px;  
width: 100%;  
border: 0px solid \#fff;  
\}  
.content-bottom .put\{  
width: 100%;  
height: 40px;  
text-align: center;  
font-size: 16px;  
font-family: arial;  
border: 0px solid \#000;  
padding: 10px;  
line-height: 40px;  
color: white;  
\}  
.pp\{  
width: 100%;  
height: 40px;  
padding: 10px;  
text-align: center;  
line-height: 40px;  
border: 0px solid \#000;  
\}  
.title\{  
width: 80px;  
height: 40px;  
line-height: 40px;  
font-size: 16px;  
font-family: arial;  
  
  
\}  
</style>  
</head>  
<body>  
<div class="container">  
<div class="nav-top"></div>  
<div class="nav-bottom">  
<div class="content">  
<div class="content-top">管理员登录界面</div>  
<div class="content-bottom">  
<div class="put">用户名：<input type="text" name="username"/></div>  
<div class="put">密码： &nbsp;&nbsp;<input type="password" name="password"></div>  
<div class="pp"><input class="title" type="submit" value="登录">&nbsp;&nbsp;&nbsp;&nbsp;<input class="title" type="reset" value="取消"></div>  
</div>  
</div>  
</div>  
</div>  
</body>

</html>

![70 6][]

2、同理，编写success.jsp和fail.jsp文件

success.jsp文件的编写：

<%@ page language="java" import="java.util.\*" contentType="text/html; charset=utf-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
      
    <title>登录成功提示</title>  
      
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache">  
<meta http-equiv="expires" content="0">      
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
<meta http-equiv="description" content="This is my page">  
  
  
  
  </head>  
    
  <body>  
    登录成功！<br>  
    你的登录信息如下：<br>  
   账号:<%=request.getParameter("username") %><br>  
   密码:<%=request.getParameter("password") %><br>  
   <a href="<%=request.getContextPath()%>/login1.jsp">返回登录界面</a>  
  </body>

</html>

fail.jsp文件的编写：

</html>

3、在servlet包下创建类servletlogin.java

直接创建servlet后的图片便是这样的，后面直接确定即可，系统会帮你配置好web.xml中的映射

![70 7][]

源码如下：

package servlet;  
  
  
import java.io.IOException;  
import java.io.PrintWriter;  
import java.sql.Connection;  
import java.sql.DriverManager;  
import java.sql.ResultSet;  
import java.sql.Statement;  
  
  
import javax.servlet.RequestDispatcher;  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
public class loginservlet extends HttpServlet \{  
public Connection con=null;  
public static String username;  
public static String password;  
public loginservlet() \{  
super();  
\}  
  
  
/\*\*  
 \* Destruction of the servlet. <br>  
 \*/  
public void destroy() \{  
super.destroy(); // Just puts "destroy" string in log  
// Put your code here  
\}  
  
  
public void doGet(HttpServletRequest request, HttpServletResponse response)  
throws ServletException, IOException \{  
request.setCharacterEncoding("utf-8");  
username=request.getParameter("username");  
password=request.getParameter("password");  
System.out.println(username);  
System.out.println(password);  
System.out.println("取得request的请求参数");  
try\{  
String driverName="com.mysql.cj.jdbc.Driver";  
Class.forName(driverName);  
System.out.println("加载驱动完成");  
String dbURL="jdbc:mysql://127.0.0.1:3306/test?characterEncoding=utf8&&useSSL=true&&serverTimezone=GMT";  
  
String userName="root";  
String userPwd="";   
con=DriverManager.getConnection(dbURL,userName,userPwd);  
Statement statement=con.createStatement();  
String sql="select \* from login";  
ResultSet rs=statement.executeQuery(sql);  
while(rs.next())\{  
String user=rs.getString("username");  
String pwd=rs.getString("password");  
if(username!=null&&password!=null&&username.equals(user)&&password.equals(pwd))\{  
request.getRequestDispatcher("../success.jsp").forward(request, response);  
\}else\{  
request.getRequestDispatcher("../fail.jsp").forward(request, response);  
\}  
rs.close();  
con.close();  
\}  
\}catch(Exception e)\{  
e.printStackTrace();  
\}  
\}  
public void doPost(HttpServletRequest request, HttpServletResponse response)  
throws ServletException, IOException \{  
doGet(request,response);  
\}  
public void init() throws ServletException \{  
// Put your code here  
\}

标红的地方是我的MySQL数据库的连接，这个地方我搞了好久，可能每个人是不一样的，可以自己先配置好数据库再来使用。

如果不懂得地方尽管去CSDN上找答案，很多问题都有答案的。

if(username!=null&&password!=null&&username.equals(user)&&password.equals(pwd))\{   
request.getRequestDispatcher("../success.jsp").forward(request, response);  
\}else\{   
request.getRequestDispatcher("../fail.jsp").forward(request, response);

这是请求跳转页面。

username=request.getParameter("username");

password=request.getParameter("password");

这是从login.jsp中获取的username和password，然后与数据库中的进行对比。

我的从网页输入开始的链接是：http://localhost:8080/LoginServlet/login1.jsp  当然每个人设置不一样输入就不一样

![70 8][]实现后的页面跳转  ../success.jsp     其中..的意思是返回上一级文件目录

大体上功能差不多实现了，其实简单MVC还是挺简单的，自己要学好点servlet，便可以找出问题的所在。

最后还有创建数据库：附图

![70 9][]

附上一张总图

![70 10][]

综上，总结自己做的小项目，确实挺小的，但是还是要花点心思的，建议学习Java web前端入门的小白们可以拿来练练手。

相信自己，好好练习Java，总有一天会有成就感的。

[70]: /images/20220522/8b764118e7cc4c1682b3195116df585b.png
[70 1]: /images/20220522/7e0b61bbf00d42dd8ac2645662796599.png
[70 2]: /images/20220522/59cb158dc8a946d48b736b6a71dd6729.png
[70 3]: /images/20220522/b7785dd1053b47ccbd63987c090533ba.png
[70 4]: /images/20220522/d9fd5e8dd42148fbbba026a8c685ff1b.png
[70 5]: /images/20220522/046fbaa1e35a4481b10c5ed255d16df8.png
[70 6]: /images/20220522/56403d6844674fc08ecaf93398177a83.png
[70 7]: /images/20220522/72f1bdcdf06e4779a1a7b10e1b4c067d.png
[70 8]: /images/20220522/94994663e8f743c0a1ac18fe529436e7.png
[70 9]: /images/20220522/c5c7ec84e3c740cba39cb8ebef34c1d9.png
[70 10]: /images/20220522/3ea78f74b1bd45a39e416c670ab18259.png