JSP和servlet实现后台数据管理

百合不是茶

浏览: 356187 次

最近访客更多访客>>

dd533

01nsglj

yhz61010

petehero

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Servlet + JSP 技术

JSP Servlet Tomcat Oracle数据库数据动态管理显示

JSP和Servlet的区别;

servlet是在服务器端执行的java程序，只不过它有专门的一套规则（就是我们平常所说的api）；jsp说得简单点就是用另一套简单的规则写的servlet程序，它可以写java代码，还可以写html代码，JavaScript，css等,但是到服务器端首先会被转成servlet程序然后就按照servlet的执行顺序执行了。

jsp一般用在数据的显示 ,Servlet用在数据的处理

jsp和servlet实现数据的添加与后台管理;

思路:1,使用html框架将页面组合起来;

2,在左边的数据添加和查询页面写成jsp和servlet

代码实现;

1,在Oracle中创建QQLine表和字段,并插入数据

1 ,创建
QQLine表

字段
no  number(10),  编号
name varchar2(15), 姓名
phone number(11), 电话
qq    number(13), qq号码
email  varchar2(15) email

2, 插入两条数据
 insert into QQLine values(2,'谢霆锋',15623453212,88888888,'feng@163.com');
 insert into QQLine values(1,'谢',15623453212,777777788,'ting@qq.com');

2,在JavaEE工具中创建动态网站项目

2,1创建顶部html页面;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
   <h1>QQLine</h1>
</body>
</html>

2,2创建左边的导航页面, 点击数据显示在右边 ;关键代码

<div>
<h3>功能导航</h3>
    <ul>
       <li><a href="XS.jsp"  target="_mainFrame">显示数据</a></li>
       <li><a href="Reg.html" target="_mainFrame">添加数据</a></li>
    </ul>
</div>

2,3 使用html框架将页面组合起来; 关键代码

   <frameset rows="100px,*">
     <frame src="Top.html" />
     
      <frameset cols="200px,*">
     	<frame src="Left.html" />
     	<frame src="XS.jsp" name="_mainFrame" /> //name的属性是点击左边的导航数据会显示在右边
      </frameset>
   </frameset>

3,动态数据的处理;

3,1 点击左边的查询数据库的数据显示在右边 XS.jsp;关键代码

<%@page import="sun.security.util.DerValue"%>
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Insert title here</title>
</head>
<body>
	<%
		try {
			//加载数据库驱动
			Class.forName("oracle.jdbc.driver.OracleDriver");
			String url = "jdbc:oracle:thin:@127.0.0.1:1521:orcl";
			Connection conn = DriverManager.getConnection(url, "SCOTT",
					"tiger");
	%> 
   
<!-- 设置表格显示数据 -->
<table border=1px width=100%>
 <h3>联系人信息</h3>
   <tr>
   	<th>编号</th>	<th>姓名</th>	<th>电话</th>	<th>QQ</th>	<th>Email</th>
   </tr>
   <%
   String sql="select * from QQLine order by no";
   //System.out.println(sql);
   PreparedStatement pstm =conn.prepareStatement(sql);
  // System.out.println("======");
   ResultSet rt =pstm.executeQuery();
   //System.out.println("++++++");
   while(rt.next()){
	 int  no = rt.getInt(1);
	 // String name=  rt.getString(2);
	 %> 
	   <tr>
			<td><%=no  %></td>
			<td><%=rt.getString("name")  %></td>
			<td><%=rt.getLong(3)   %></td>
			<td><%=rt.getLong(4)   %></td>
			<td><%=rt.getString(5) %></td>
		</tr>
	   
	 <%
   }
   %>
</table>
  <%          
		} catch (Exception ef) {
			ef.printStackTrace();
		}
	%>
</body>
</html>

3,2点击左边导航栏中的数据添加,可以向数据库添加数据 ,使用serlvet来处理

添加数据的html关键代码;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加数据</title>
<style type="text/css">
.float_right{
  text-align:center;
  color:#0000ff;
  font-size:14px;
  font-weight:bold;
}

form div{float:left;position:relative}

form input{float:left}

</style>

</head>
<body>
<h1>添加数据</h1>
<form  action="save" method="post">
<table width=300px>
	<tr class="float_right">
 		<td width=100px>id:</td> 
 		<td><input type="text" name="userId" id="userId"  onblur="fun_id()"/>
 		<div id="innerid"> </div></td>
 	</tr>
 	<tr>
 		<td class="float_right"> name:</td> 
 		<td><input type="text" name="userName" id="uesrName" />
    	<div id="innerctext"> </div></td>
    </tr>
    <tr>
 		<td class="float_right"> phone:</td> 
 		<td><input type="text" name="uesrPhone" id="uesrPhone" />
    	<div id="innerclass"> </div></td>
    </tr>
    <tr>
 		<td class="float_right"> qq:</td> 
 		<td><input type="text" name="uesrqq"  id="userqq" />
 		<div id="innerqq"> </div></td>
    </tr>
    <tr>
 		<td class="float_right"> email:</td> 
 		<td><input type="text" name="uesrEmail" id="userEmail" />
    	<div id="inneremail"> </div></td>
    </tr>
   
 <tr>
 <td colspan="2" align="center"> <input type="reset" value="取消"> <input type="submit" value="添加"></td>
 </tr>  
 </table>
</form>
</body>
</html>

数据库的单例模式;

package DB;

import java.sql.Connection;
import java.sql.DriverManager;

public class DB {
	
	private static Connection conn =null;

	private DB(){
		
	}
	
	public static Connection getConn(){
		if (conn != null) {
			return conn;
		}
		try{
		Class.forName("oracle.jdbc.driver.OracleDriver");
		String url = "jdbc:oracle:thin:@127.0.0.1:1521:orcl";

		conn= DriverManager.getConnection(url,"SCOTT", "tiger");
		return conn;
		}catch(Exception e){
			e.printStackTrace();
			return null;
		}
		
	}
}

servlet获取数据并处理数据添加到数据库中并跳转到显示页面XS.jsp

package servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import DB.DB;

/**
 * 使用servlet保存post提交数据
 * @author Administrator
 *
 */

public class SaveTXL extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	     
		String ids = request.getParameter("userId");
		int no = Integer.parseInt(ids);
		
		String name = request.getParameter("userName");
		System.out.println(name);

		String phones = request.getParameter("uesrPhone");
		int phone = Integer.parseInt(phones);

		String qqs = request.getParameter("uesrqq");
		int qq = Integer.parseInt(qqs);
        
		String email = request.getParameter("uesrEmail");
		
		System.out.println(no+" "+ name+" "+phones+" "+qqs+" "+ email);
		//连接数据库
		try{
			//创建数据库的连接
		Connection conn = DB.getConn();
		//sql语句
		String sql ="insert into QQLine values(?,?,?,?,?)";
		//预编译
		PreparedStatement pstm = conn.prepareStatement(sql);
		//赋值
		pstm.setInt(1, no);
		pstm.setString(2, name);
		pstm.setInt(3,phone);
		pstm.setInt(4,qq);
		pstm.setString(5,email);
		//
		int len =pstm.executeUpdate();
		System.out.println("受影响的行数:"+len);
		
		
		}catch(Exception e){
			e.printStackTrace();
		}	
		request.getRequestDispatcher("XS.jsp").forward(request, response);
	}
}

将 servlet在web.xml中配置

<servlet>
      <servlet-name>Save</servlet-name>
      <servlet-class>servlet.SaveTXL</servlet-class>
  </servlet>
  
  <servlet-mapping>
  <servlet-name>Save</servlet-name>
  <url-pattern>/save</url-pattern>
  </servlet-mapping>