欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaWeb的登陆注册(JSP+ServLet+JDBC)

程序员文章站 2022-06-18 11:19:49
...

2019年 12月4 日
今天完成了课程的小小答辩，我展示的是一个以图书商城为主题的Javaweb项目，可以实现用户的登陆注册。其实我本人还是比较喜欢前端的。

一、概述
在本次期末项目设计中，我选择了以图书商城为主题的Web项目。
主要运用JSP+Servlet+JDBC技术
首先是在Hbuilderx中运用html和css搭建好登陆、注册、图书商城的主页。
主要实现了用户能够登陆注册的功能，以及浏览图书的功能。

二、需求分析
在移动手机快速的发展时代，实体的书籍离我们的生活可能越来越远，一是因为实体的书籍在生活中携带不方便，二是因为实体的书籍可以在网上看盗版的之类。所以一些手机app或者网页上用于下载图书的软件、网站也越来越多。所以，这个图书商城可以满足用户对于浏览图书的需求。

三、项目设计
3.1数据库设计
（1）数据项:用户名 密码
（2) 在数据库中创建user表，用于记录用户名和密码。
JavaWeb的登陆注册(JSP+ServLet+JDBC)

3.2 数据库连接
（1）在src下创建Util包，建立DBHelper类专门负责数据库的连接
（2）在这个项目设计中，登录与注册需要反复使用数据库进行查询与插入，所
以使用单例模式，只返回一个实例。

以这里的DBHelper类中使用了单例模式，确保数据库类中只有一个实例。
//此类被用于连接数据库
public class DBHelper {// 用于连接数据库 给其他类调用
	public static String driver = "com.mysql.jdbc.Driver";
	public static String url = "jdbc:mysql://localhost:3306/user";
	public static String username = "root";
	public static String password = "root";
	public static Connection con = null;
	// 进行驱动加载	开始连接用的类方法 方便其他直接调用
	public static Connection getConnection() {
	// 加载驱动
		try {
			Class.forName(driver);
			System.out.println("驱动成功");
		} catch (Exception e) {
			e.printStackTrace();
			System.out.println("驱动加载异常");
		}
	// 加载驱动完成
		if (con == null) {
			try {
				con = DriverManager.getConnection(url, username, password);
				System.out.println("连接成功");
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return con;
	}
	// 连接建立完成
}

3.3 功能介绍
JavaWeb的登陆注册(JSP+ServLet+JDBC)
3.4 登陆设计
（1）简述
用户输入账号密码，如果用户名不存在或密码错误，则提示错误。
（2）详细设计
在jsp中输入账号密码后，将表单数据提交到LoginServlet中，LoginServlet调用dao中的checkLogin方法将usernmae以及password通过数据库查询进行判断是否正确。

LoginServlet类的代码：
package myservlet;
import dao.DAO;
//要引入DAO，使用DAO中的方法。因为其中的方法是static，直接调用。
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/json;charset=UTF-8");//设置编码格式
	    response.setCharacterEncoding("UTF-8");
	      
		String username=request.getParameter("username");//从form中获取username
		String password=request.getParameter("password");//获取password
		if(DAO.checkLogin(username, password))//调用DAO 检查登录 如果结果正确
			request.getRequestDispatcher("/jsp/demon.jsp").forward(request, response);//请求转发，到主页
		else {
			request.setAttribute("inf", "error");//将失败的消息存到 inf中
		    request.getRequestDispatcher("/jsp/login.jsp").forward(request, response);
	

调用的DAO中的checkLogin代码:

public static boolean checkLogin(String username, String password) {
		con = DBHelper.getConnection();// 利用DBHelper类中的类方法直接得到Connection
		String sql = "select * from dbuser where username = ?";// 占位符？ 可以在下面赋值
		try {
			pst = con.prepareStatement(sql);
			pst.setString(1, username);// 将获取的username传入 1时指给sql语句的第一个？赋值
			rs = pst.executeQuery();// 查询上述的sql语句 返回的结果是数据库里的username
			/* 开始判断数据库的数据 */
			if (rs.next()) {
				String user = rs.getString("username");/* 获取数据库里的账号 */
				String pwd = rs.getString("password");/* 获取数据库里的密码 */
				if (user.equals(username)&&pwd.equals(password)) // 如果密码匹配则验证成功
					return true;

				else
					return false;

			} else
				return false;
		}

		catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
		/* 关闭rs pst */
		try {
			rs.close();// 关闭rs
			pst.close();
			
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}
		return false;
｝

```yaml

3.5 注册设计
（1）简述：如果登陆过程中，用户名密码出现问题，则进入注册界面
（2）详细设计 在注册jsp中输入账号密码后，将表单数据提交到RegisterServlet中，RegisterServlet调用dao中的register方法将usernmae以及password通过数据库插入语句进行存储。
RegisterServlet代码：


```java
protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/json;charset=UTF-8");//设置编码格式
	    response.setCharacterEncoding("UTF-8");
	    
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		String sure_password=request.getParameter("sure_password");
		if(password.equals(sure_password)) {
		DAO.register(username, password);
				request.getRequestDispatcher("/jsp/login.jsp").forward(request, response);
		}else
			request.getRequestDispatcher("/jsp/register.jsp").forward(request, response);

			
	}
}

`

``
DAO中的register代码：


```java
public static void register(String username, String password) {
		con = DBHelper.getConnection();// 通过DBHelper得到Connection
		String sql = "insert into dbuser values(?,?)";// 插入语句的sql

		try {
			pst = con.prepareStatement(sql);
			pst.setString(1, username);// 用户名赋值
			pst.setString(2, password);// 密码赋值
			int b = pst.executeUpdate();// 更新数据 返回受影响的行数
			// 执行插入语句，并返回一个int值，大于0表示添加成功，小于0表示添加失败.
			if (b > 0) {
				System.out.println("数据添加成功");
			} else {
				System.out.println("数据添加失败");
			}
		} catch (Exception e) {
			// TODO: handle exception
			e.printStackTrace();
		}

		/* 关闭rs pst */
		try {
			rs.close();// 关闭rs
			pst.close();						
		}catch(Exception e)
	     {
		// TODO: handle exception
		e.printStackTrace();
	}
}}
`

``

3.6页面设计

（1）使用了html++css 用div进行板块排版，在一些图片及文字上添加了超链接。
（2）页面如下：

登陆界面：


```c

```css
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
String path = request.getRequestURI();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<base href="<%=basePath%>">


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>		
		<link rel="stylesheet" type="text/css" href="../css/login_css.css" />
	
		
	</head>
	<body>
    <div id="frame">
		<div class="login_frame">
			<img src="../images/inco.png" />
			<h2>欢迎登录</h2>
			<form action="/uml_task/LoginServlet" method="post">
				<table>								
			          <tr><th><label>用户名</label></th>
					  <th><input type="text"  class="login_text"  maxlength="20" name="username" id="username"/></th>
					  </tr>
					  <%if(request.getAttribute("inf")!=null){ %>
					  <span>请输入正确的用户名和密码！</span>
					  <%} else{%>						  
					  <% }%>
					  <tr><th> <label>密&ensp;&nbsp;码</label></th>
					  <th><input type="password"  class="login_text" name="password" id="password"/></th>
					   </tr>		  
			    </table>
			    <input type="submit" value="登录" class="login_btn"   />
			    <input type="reset" value="取消"  class="login_btn" />
			</form>
			<a href="../jsp/register.jsp">注册账号</a>
			<a href="http://www.baidu.com">忘记密码</a>
		</div>
    </div>
	</body>
</html>
``

其中的css样式

*{
	margin: 0;
	padding: 0;
    font-size: 15px;
}
body{
	background: url(../images/timg2.jpg);
	background-size: cover;
}

#frame{
	
}

#frame .login_frame{
	
	   height: 400px;
	   width: 300px;
	   border: 1px solid #8e8e8e;
	   padding: 20px;
	   /*position: absolute;
	   top: 50%;
	   left: 50%;
	   transform: translate(-50%,-50%);*/
      /* position: absolute;
	   margin: auto;
	   left: 0;
	   top: 0;
	   right: 0;
	   bottom: 0;*/
	   text-align: center;
       margin: 8% auto;
	   border-radius: 10px ;
	   background:rgba(0,0,0,.3);
}

#frame .login_frame h2{
	font-family: 'Do Hyeon', sans-serif;
	font-size: 35px;
	color: white;
	text-align: center;
	padding-bottom: 30px;
}

#frame table{
	color: white;
	margin: 0 auto;
	line-height: 50px;
}

#frame .login_frame .login_text{
	font-size: 12px;
	width: 150px;
	border-radius: 10px;
	padding:8px;
}

#frame .login_btn{
	width: 30%;
	height: 40px;
	border-radius: 10px;
    margin-top: 10px;
	background-color: cornflowerblue;
	color: white;
	display: block;	
	margin: 0 auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

#frame .login_frame a{
	text-decoration: none;
	font-size: 15px;
	color: white;
	margin-left: 20px;
}

#frame .login_frame a:hover{
	color: red;
}

#frame img{
	
	width: 70px;
}

注册界面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
        <%
String path = request.getRequestURI();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<base href="<%=basePath%>">
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎注册</title>
		<link rel="stylesheet" type="text/css" href="../css/register_css.css" />
	</head>
	<body>
	<div id="frame">
		<div class="register_frame">
			<img src="../images/inco.png" />
			<h2>欢迎注册</h2>
			<form action="/uml_task/RegisterServlet" method="post">
				<table>								
			          <tr><th><label>用户名</label></th>
					  <th><input type="text"  class="register_text"  maxlength="20" name="username"/></th></tr>
					  <tr><th> <label>密&nbsp;&nbsp;码</label></th>
					  <th><input type="password"  class="register_text" name="password" /></th> </tr>
					  <tr><th> <label>确认密码</label></th>
					  <th><input type="password"  name="sure_password" class="register_text"/></th> </tr>
			    </table>
			    <input type="submit" value="注册" class="register_btn" />
			    <input type="reset" value="取消"  class="register_btn" />
			</form>
			<a href="login.jsp">返回登陆</a>
			<a href="http://www.baidu.com">帮助</a>
		</div>
	</div>
    </body>
</html>

注册界面的css

*{
	margin: 0;
	padding: 0;
    font-size: 15px;
}
body{
	background: url(../images/bg.jpg);
	background-size: cover;
}

#frame{
	
}

#frame .register_frame{
	
	   height: 450px;
	   width: 300px;
	   border: 1px solid #8e8e8e;
	   padding: 20px;
	   /*position: absolute;
	   top: 50%;
	   left: 50%;
	   transform: translate(-50%,-50%);*/
      /* position: absolute;
	   margin: auto;
	   left: 0;
	   top: 0;
	   right: 0;
	   bottom: 0;*/
	   text-align: center;
       margin: 8% auto;
	   border-radius: 10px ;
	   background:rgba(0,0,0,.3);
}

#frame .register_frame h2{
	font-family: 'Do Hyeon', sans-serif;
	font-size: 35px;
	color: white;
	text-align: center;
	padding-bottom: 30px;
}

#frame table{
	color: white;
	margin: 0 auto;
	line-height: 50px;
}

#frame .register_frame .register_text{
	font-size: 12px;
	width: 150px;
	border-radius: 10px;
	padding:8px;
}

#frame .register_btn{
	width: 30%;
	height: 40px;
	border-radius: 10px;
    margin-top: 10px;
	background-color: cornflowerblue;
	color: white;
	display: block;	
	margin: 0 auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

#frame .register_frame a{
	text-decoration: none;
	font-size: 15px;
	color: white;
	padding-left: 20px;
}

#frame .register_frame a:hover{
	color: red;
}

#frame img{
	
	width: 70px;
}

主页的html

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    
        <%
String path = request.getRequestURI();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<base href="<%=basePath%>">
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页</title>
		<link rel="stylesheet" type="text/css" href="../css/demon_css.css" />
		<script src="../js/myfocus-2.0.4.min.js" type="text/javascript"></script><!DOCTYPE 引入库文件>
		<script src="../js/mf-pattern/mF_fscreen_tb.js"   type="text/javascript"></script> <!DOCTYPE 引入样式的css文件>
		<link href="../js/mf-pattern/mF_fscreen_tb.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript">
			myFocus.set({
				id:'picBox'})
			function $(id){
			return document.getElementById(id);}
		</script>
	</head>
	<body>
		<div id="top">
			<div class="top_content">
				<ul>
					<li><a href="#" οnclick="setcooect()">消息</a></li>
					<li><a href="#" οnclick="setcollect()">购物车</a></li>
					<li><a href="#" οnclick="sethome()">个人信息</a></li>				
				</ul>
			</div>	
		</div><!DOCTYPE top结束>
		
		<div id="bd">
			<div class="bd_logo"><img src="../images/read.png" /></div><!DOCTYPE logo 结束>
			<div class="bd_form">
				<from>
					<input type="text" class="text" placeholder="在图书系统中搜索"/>
					<input type="button" value="搜索" class="collect" />
				</from>
			</div><!DOCTYPE bd_from结束>
		</div><!DOCTYPE bd结束>
		
		<div id="nav">
			<div class="nav_ul">
				<ul>
					<li><a href="demon.html">首页</a></li>
					<li><a href="#">分类</a></li>
					<li><a href="#">榜单</a></li>
					<li><a href="#">独家作品</a></li>
					<li><a href="#">机构专区</a></li>					
					<li><a href="#">党史天地</a></li>	
				</ul>
			</div><!DOCTYPE nav_ul结束>
			<div class="nav_ul_right"><a href="#">我的书架</a></div>
		</div><!DOCTYPE nav 结束>
	
	    <hr /><!DOCTYPE 从导航栏往下分割>
		<div id="bg_color"><!DOCTYPE 背景颜色一直到 三个文本框那里>
			
				<div id="picBox">
					<div class="pic">
					<ul>
						<li><a href="#"><img src="../images/ad1.jpg"/></a></li>
						<li><a href="#"><img src="../images/ad2.jpg"/></a></li>
						<li><a href="#"><img src="../images/ad3.jpg"/></a></li>
					</ul>
					</div>
				</div>	<!DOCTYPE ad结束>
				
				<div id="next_nav">
					 <h2>分类</h2>
					 <ul>
						<li><a href="#">成功学</a></li>
						<li><a href="#">投资理财</a></li>
						<li><a href="#">人际处事</a></li>
						<li><a href="#">计算机</a></li>
						<li><a href="#">人物传记</a></li>					
						<li><a href="#">言情小说</a></li>
						<li><a href="#">散文随笔</a></li>
						<li><a href="#">悬疑推理</a></li>
						<li><a href="#">市场营销</a></li>
						<li><a href="#">武侠传记</a></li>
						<li><a href="#">玄幻小说</a></li>					
					 </ul>
				</div><!DOCTYPE next_nav结束>
				
				<div id="rd_img">
					<ul>
							<li><a href="http://yuedu.baidu.com/promotion/activity/duke?fr=xjdt"><img src="../images/lad1.jpg" /> </a></li>
							<li><a href="https://yuedu.baidu.com/promotion/activity/bjzc2017?fr=xjdt"><img src="../images/lad2.jpg" /> </a></li>
							<li><a href="http://yuedu.baidu.com/promotion/activity/huazhnag?fr=xjdt"><img src="../images/lad3.jpg" /> </a></li>						
					</ul>
				</div><!DOCTYPE rd结束>
				
				<div id="recommand">
		
				<div class="recommand_content">
						<div class="title">
							<h2>公告咨询</h2>
						</div><!DOCTYPE title 结束>
						<div class="content">
							<ul>
								<li><a href="#">专访女频签约作者鸭圣婆</a> <span> 2019 8-10</span></li>
								<li><a href="#">塔读文学男频当家小生【六界三道】</a> <span> 2019 8-18</span></li>
								<li><a href="#">第二期首席推书官-陈楚河</a> <span> 2019 8-30</span></li>
							</ul>
						</div><!DOCTYPE content结束>
				</div><!DOCTYPE 第一部分结束>	
				
				<div class="recommand_content">	
						<div class="title">
							<h2>好书推荐</h2>
						</div><!DOCTYPE title 结束>
						<div class="content">
							<ul>
								<li><a href="#">一代尊皇，逆势伐仙</a> <span class="date"> 2019 10-11</span></li>
								<li><a href="#">手可摘星辰，拳能灭山河	</a> <span> 2019 10-28</span></li>
								<li><a href="#">帝王一怒，伏尸百万</a> <span> 2019 10-30</span></li>
							</ul>
						</div><!DOCTYPE content结束>
				</div><!DOCTYPE 第二部分结束>	
					
				<div class="recommand_content">		
					<div class="title">
						<h2>原创发布</h2>
					</div><!DOCTYPE title 结束>
					<div class="content">
						<ul>
							<li><a href="#">一只狗引发的故事...</a> <span class="date"> 2019 11-10</span></li>
							<li><a href="#">平凡的他，曾屹立世界之巅</a> <span> 2019 11-14</span></li>
							<li><a href="#">尊严不可践踏，人生需要逆袭</a> <span> 2019 11-20</span></li>
						</ul>
					</div><!DOCTYPE content结束>
			</div><!DOCTYPE 第三部分结束>	
		    </div><!DOCTYPE recommand结束>	    
	    </div><!DOCTYPE 颜色填充区结束!>
		
		<div id="main">
			<div class="title">
				<h1>热门推荐</h1> 
			</div><!DOCTYPE title 结束>
			<div class="row1">
				<ul>
					<li><a href="https://yuedu.baidu.com/ebook/aaf3e704f11dc281e53a580216fc700abb68522e?fr=index"><img src="../images/book1.jpg"/><span>致我们暖暖的小时光</span> </a></li>
					<li><a href="https://yuedu.baidu.com/ebook/00e7354c48649b6648d7c1c708a1284ac85005ae?fr=index"><img src="../images/book2.jpg"/><span>他来时惊涛骇浪</span></a></li>
					<li><a href="https://yuedu.baidu.com/ebook/ea624d07a36925c52cc58bd63186bceb18e8ed09?fr=index"><img src="../images/book3.jpg"/><span>都挺好</span></a></li>
					<li><a href="https://yuedu.baidu.com/ebook/21200230a9956bec0975f46527d3240c8547a11a?fr=index"><img src="../images/book4.jpg"/><span>如果可以这样爱</span></a></li>
					<li><a href="https://yuedu.baidu.com/ebook/d949e958f342336c1eb91a37f111f18583d00cdc?fr=index"><img src="../images/book5.jpg"/><span>我在未来等你</span></a></li>
					<li><a href="https://yuedu.baidu.com/ebook/8c4a682cd0f34693daef5ef7ba0d4a7303766c7a?fr=index"><img src="../images/book6.jpg"/><span>熊镇</span></a></li>
					<li><a href="https://yuedu.baidu.com/ebook/71c84d756d85ec3a87c24028915f804d2a168723?fr=index"><img src="../images/book7.jpg"/><span>蜜蜂与远雷</span></a></li>
					<li><a href="https://yuedu.baidu.com/ebook/2827d868162ded630b1c59eef8c75fbfc67d9435?fr=index"><img src="../images/book8.jpg"/><span>伯娜黛特,你要去哪</span></a></li>
					<li><a href="https://yuedu.baidu.com/ebook/e88950fb50e79b89680203d8ce2f0066f4336433?fr=index"><img src="../images/book9.jpg"/><span>夜行实录</span></a></li>
					<li><a href="https://yuedu.baidu.com/ebook/6e0cd550d05abe23482fb4daa58da0116d171f45?fr=index"><img src="../images/book10.jpg"/><span>天谴者</span></a></li>
				</ul>
			</div><!DOCTYPE ul图片排列结束>
		</div><!DOCTYPE main结束>
	
	    <hr />
		
		<div id="next_main">			
			<div class="title">
					<h1>最受好评</h1> 
				</div><!DOCTYPE title 结束>
				<div class="row1">
					<ul>
						<li><a href="https://yuedu.baidu.com/ebook/a59381a3492fb4daa58da0116c175f0e7dd11918?fr=index"><img src="../images/b1.jpg"/><span>如果东京不快乐</span> </a></li>
						<li><a href="https://yuedu.baidu.com/ebook/ffa76e846edb6f1afe001f2e?fr=index"><img src="../images/b2.jpg"/><span>迷茫时代的明白人</span></a></li>
						<li><a href="https://yuedu.baidu.com/ebook/2a5f06aa492fb4daa58da0116c175f0e7cd119de?fr=index"><img src="../images/b3.jpg"/><span>小偷家族</span></a></li>
						<li><a href="https://yuedu.baidu.com/ebook/8ad70a003868011ca300a6c30c2259010302f349?fr=index"><img src="../images/b4.jpg"/><span>无罪辩护</span></a></li>
						<li><a href="https://yuedu.baidu.com/ebook/a47a08cb68dc5022aaea998fcc22bcd126ff42ad?fr=index"><img src="../images/b5.jpg"/><span>尸语者</span></a></li>
						<li><a href="https://yuedu.baidu.com/ebook/49047066a4e9856a561252d380eb6294dd88222d?fr=index"><img src="../images/b6.jpg"/><span>诡案追踪之大结局</span></a></li>
						<li><a href="https://yuedu.baidu.com/ebook/cb6decf25ff7ba0d4a7302768e9951e79a89694a?fr=index"><img src="../images/b7.jpg"/><span>诡案追踪</span></a></li>
						<li><a href="https://yuedu.baidu.com/ebook/78bbd11304a1b0717ed5dd40?fr=index"><img src="../images/b8.jpg"/><span>D版杀人案</span></a></li>
						<li><a href="https://yuedu.baidu.com/ebook/3f3970479b89680202d82545?fr=index"><img src="../images/b9.jpg"/><span>深宫谍影</span></a></li>
						<li><a href="https://yuedu.baidu.com/ebook/c6eca88e690203d8ce2f0066f5335a8102d26643?fr=index"><img src="../images/b10.jpg"/><span>潜行迷踪</span></a></li>
					</ul>
				</div><!DOCTYPE row1 ul图片排列结束>
			</div><!DOCTYPE next_main 结束>
		
        <div id="footer">
			<p>2019年11月25日完成</p>
			<p>@China this is niu bi 666</p>
		</div><!DOCTYPE footer结束>
	</body>
</html>

主页的css

*{
	margin: 0;
	padding: 0;
}

body{
	font-size: 15px;
}

#top .top_content{
	height: 25px;
/*	border-bottom: 1px solid #8E8E8E;*/
	padding-right: 10%;
}

#top .top_content li{
	line-height: 25px;
	float: right;
	padding-right: 30px;
	list-style: none;
}

#top .top_content a:link,#top .top_content a:visited{
	color: #101010;
	text-decoration: none;
	font-size: 14px;
}

#top .top_content a:hover{
	color: red;
	font-size: 20px;
	font-weight: bold;
    	
}

#bd{
	width: 80%;
	margin-left: 10%;
	margin-top: 5px;
	height: 100px;
/*	border: 1px solid #8E8E8E;*/
}

#bd .bd_logo{
	margin-left: 50px;
	float: left;
}

#bd .bd_logo img{
   width: 100px;
}

#bd .bd_form{
	height: 50px;
	float: left;
	margin-left: 20px;
	line-height: 100px;
	padding-left: 20px;
	}

#bd .text{
    font-size: 15px;
	width: 400px;
	margin-left: 20px;
	padding: 8px;
}

#bd .collect{
	width: 100px;
	padding:4px ;
	margin-left: 10px;
	font-size: 20px;
	text-align: center;
    border-radius: 5px ;
	background-color:white ;
} 

#nav{
	margin-left: 10%;
	height: 40px;
	margin-top: 5px;
	/*border: 1px solid #8E8E8E;*/
}

#nav .nav_ul {
	/*border: 1px solid #8E8E8E;*/
	height: 50px
	width: 900px;
	float: left;
}

#nav .nav_ul li{
	line-height: 40px;
	float: left;
	list-style: none;
	font-size: 20px;
	width: 150px;
}

#nav .nav_ul a:link,#nav .nav_ul a:visited{
	text-decoration: none;
	color: black;
}

#nav .nav_ul a:hover{
	font-size: 25px;
	color: red;
	border-bottom: 2px solid #419641;
}

#nav .nav_ul_right{
	height: 40px;
	width: 200px;
	line-height: 40px;
	float: left;
	font-size: 20px;
	margin-left: 122px;
	text-align: center;
  /*  border: 1px solid #8E8E8E;*/
	background-image: url(mybook.png);
	background-size: 40px;
	background-position: left center; 
	background-repeat: no-repeat;
    
}

#nav .nav_ul_right a:link,#nav .nav_ul_right a:visited{
	text-decoration: none;
	color: black;
}

#nav .nav_ul_right a:hover{
	font-size: 25px;
	color: red;
	border-bottom: 2px solid #419641;
}

#picBox{
	margin-left: 10%;
	height: 300px;
	width: 1200px;
	overflow: hidden;
}

#bg_color{
	background-color: whitesmoke;
}

#next_nav {	
	margin-left: 10%;
	height: 50px;
	margin-top: 5px;
}

#next_nav h2{
	float: left;
	line-height: 50px;
}

#next_nav li{
	text-align: center;
	list-style: none;
	float: left;
    width: 105px;
	line-height: 50px;
}

#next_nav  a:link,#next_nav  a:visited{
	text-decoration: none;
	color: black;
}

#next_nav a:hover{
	
	font-size: 22px;
	color: red;
}

#rd_img{
	margin-top: 15px ;
	height: 170px;	
	margin-left: 12.5%;
	}	

#rd_img li{
	float: left;
	width: 405px;
	list-style: none;
}

#rd_img img{
	border-radius: 10px;
}

#recommand {
	margin-left: 10%;
	height: 160px;
	padding: 10px;
}

#recommand .recommand_content{
	border: 1px solid #8E8E8E;
	border-radius: 10px;
	height: 150px;
	width: 350px;
	float: left;
	margin-left: 30px;
	background:white ;
}

#recommand .title{
	height: 45px;
	line-height: 45px;
	padding-left: 20px;
}

#recommand .content{
	padding-left: 8px;
}

#recommand  .content  li{
	list-style: none;
	border-bottom: 1px dotted #8E8E8E;
	line-height: 28px;
}

#recommand .content span{
	font-size: 11px;
	color: #999999;
	float: right;
	line-height: 25px;
    margin: 2px;
}

#recommand .content a:link,.content a:visited{
	text-decoration: none;
	color: black;
}

#recommand .content a:hover{
	color:red; 	
}

#main{
	 background-color: #DFF0D8; 
	 height: 700px;
}

#main .title{
	text-align: center;
	height: 100px;
	line-height: 70px;
}

#main .row1{
	margin-left: 9%;
}

#main img{
	border-radius: 7px;
}

#main li{
	width:18%;
	height: 300px;
	list-style: none;
	/* background-color: #DFF0D8; */
	text-align: center;
	float: left;
	/*border: 1px solid #000000;*/
	text-align: center;
}

#main span{
	margin-top: 15px;
	display: block;
}

#main a{
	text-decoration: none;
	color: #000000;
	font-size: 15px;
}

#main a:hover{
	color: red;
	font-size: 20px;
}

#next_main{
	background-color: #DFF0D8;
	height: 700px;
}

#next_main .title{
	text-align: center;
	height: 100px;
	line-height: 70px;
}

#next_main .row1{
	margin-left: 9%;
}

#next_main img{
	border-radius: 7px;
}

#next_main li{
	width:18%;
	height: 300px;
	list-style: none;
	/* background-color: #DFF0D8; */
	text-align: center;
	float: left;
	/*border: 1px solid #000000;*/
	text-align: center;
}

#next_main span{
	margin-top: 15px;
	display: block;
}

#next_main a{
	text-decoration: none;
	color: #000000;
	font-size: 15px;
}

#next_main a:hover{
	color: red;
	font-size: 20px;
}

#footer{
	height: 170px;
	color: white;
	text-align: center;
	background: #888888;
	padding-top: 50px;
}

#footer p{
	line-height: 30px;
}

3.7运行效果
登陆
JavaWeb的登陆注册(JSP+ServLet+JDBC)

注册
JavaWeb的登陆注册(JSP+ServLet+JDBC)

主页
JavaWeb的登陆注册(JSP+ServLet+JDBC)

3.8总结
一定要注意路径问题，要用相对路径
还要引入JDBC的jar包
404就是路径不对，去研究路径对不对
出现问题多百度，百度可以解决80%的问题
接下来深入学习前端和JAVA啦
加油

上一篇： 小米12pro如何开启极致模式 小米12pro开启极致模式教程

下一篇： Mybatis如何获取最新插入数据的id

推荐阅读