一直在听建民老师说,javaweb的精髓是Jsp+servlet+javabean。在完成这个系统之前,毕竟没有学习过javaweb,Jsp和servlet我是知道的,但不会在servlet和jsp之间相互传值以及应用,javabean是一点没有听说过。在这样的基础下,没办法逃脱测试的情况下,只能硬着头皮做了。数据库这方面,之前安装过mysql和可视化工具Navicat,但没有在eclipse中连接过,在数据库连接这方面基本也是空白。在慕课网和bilibili上找了无数视频,终于有了点头绪,下面就详细的介绍过程:
首先,创建一个web项目,并且安装好tomcat以及应用到eclipse中,网上有许多教程,此处不一 一讲解。
其次,系统展示给用户的是可视化界面形式,系统实践不同于考试,在控制台上操作的话是不能够达标的,在美观性上也差很多。既然提供给用户的是网页,那么就一定要用jsp来勾勒界面。首先我们实现一个让用户第一眼就看到的网页界面,总共分为两部分,左边的功能栏部分和上方的标题部分。
我们先做left.jsp也就是左边功能栏部分,代码如下:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 9 <style type="text/css"> 10 body { 11 margin: 0; 12 padding: 0; 13 font-size: 12px; 14 font-family: "Microsoft Yahei", Verdana, Arial, Helvetica, sans-serif 15 } 16 .leftMenu { 17 min-220px; 18 268px; 19 margin:40px auto 0 auto; 20 } 21 .menu { 22 border: #bdd7f2 1px solid; 23 border-top: #0080c4 4px solid; 24 border-bottom: #0080c4 4px solid; 25 background: #f4f9ff repeat-y right; 26 margin-left: 10px; 27 } 28 .menu .ListTitle { 29 border-bottom: 1px #98c9ee solid; 30 display: block; 31 text-align: center; 32 /*position: relative;*/ 33 height: 38px; 34 line-height: 38px; 35 cursor: pointer; 36 /*+min-220px;*/ 37 38 +100%; 39 } 40 41 .leftbgbt { 42 position: absolute; 43 background: no-repeat; 44 11px; 45 height: 52px; 46 left: -11px; 47 top: -4px; 48 } 49 50 .menuList { 51 display: block; 52 height: auto; 53 } 54 .menuList div { 55 height: 28px; 56 line-height: 24px; 57 border-bottom: 1px #98c9ee dotted; 58 } 59 .menuList div a { 60 display: block; 61 background: #fff; 62 line-height: 28px; 63 height: 28px; 64 text-align: center; 65 color: #185697; 66 text-decoration: none; 67 } 68 .menuList div a:hover { 69 color: #f30; 70 background: #0080c4; 71 color: #fff; 72 } 73 </style> 74 75 <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-1.12.1.js"></script> 76 77 </head> 78 <body style="margin-top: -30px;"> 79 80 <div class="leftMenu"> 81 <div class="menu"> 82 <div class="ListTitle"> 83 <strong>功能选择</strong> 84 </div> 85 <div class="menuList"> 86 <div> <a href="classm.jsp" target="mainAction">添加课程</a></div> 87 <div> <a href="select.jsp" target="mainAction">查看课程</a> </div> 88 <div> <a href="update.jsp" target="mainAction">修改课程</a> </div> 89 <div> <a href="delete.jsp" target="mainAction">删除课程</a> </div> 90 </div> 91 </div> 92 </div> 93 <div style="text-align:center;"> 94 </div> 95 </body> 96 </html>
效果如下:
再来勾勒一个标题jsp,取名为head.jsp
1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <title>课程信息管理系统</title> 8 </head> 9 <body> 10 <h1 align="center">课程信息管理系统</h1> 11 <hr align="center" color="#336699"/> 12 </body> 13 </html>
效果如下;
当然,分开展示给用户肯定是不行的,必须将这两个部分粘合到一块,成为一个整体,展示给用户完整的部分,于是我们再创建一个main.jsp(整体界面)
代码如下:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>课程管理系统</title> 8 <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.12.1.js"></script> 9 <script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap-3.3.5-dist/js/bootstrap.js"></script> 10 <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.5-dist/css/bootstrap.css" /> 11 </head> 12 <frameset frameborder="no" rows="82px, *"><%-- cols 代表水平框架 --%> 13 <frame src="head.jsp"> 14 <frameset cols="285px, *"> 15 <frame src="left.jsp"> 16 <frame name="mainAction"> 17 </frameset> 18 </frameset> 19 20 </html>
其实就是用到frame标签将界面分块,再竖向将left.jsp插进去,横向将head.jsp插进去,于是就构成了完整界面,效果如下:
因为css和js技术掌握实在是有限,所以整体界面比较低级,但是后续所有功能都可以在这个界面上实现了。
界面搭建完成后,我们返回来看left.jsp中的这段代码:
1 <div> <a href="classm.jsp" target="mainAction">添加课程</a></div> 2 <div> <a href="select.jsp" target="mainAction">查看课程</a> </div> 3 <div> <a href="update.jsp" target="mainAction">修改课程</a> </div> 4 <div> <a href="delete.jsp" target="mainAction">删除课程</a> </div>
其中<a href="select.jsp" target="mainAction">是超链接语句,它的作用是当我们点击界面上的按钮时,在界面中间部分可以出现功能jsp界面中的东西。
例如:
当我们点击删除课程时,就会出现如下界面:
我们在之前也是要把这四个功能的jsp界面提前画好的,因为这里面主要涉及最简单的表单操作,所以就不一 一去讲解了。
现在我们四个功能界面都已经画好了,试着点击一下是否所有的功能都可以展示到界面中,如果可以的话,我们的jsp部分就全部完成了。
下面介绍一个src包中最为关键的四个包:分别为dbutil,servlet,bean,dao
我们分别解释四个包的作用,先来第一个包dbutil,它的功能就是连接数据库和在操作结束时及时关闭数据库。代码如下:
1 package dbutil; 2 3 import java.sql.Connection; 4 import java.sql.DriverManager; 5 import java.sql.ResultSet; 6 import java.sql.SQLException; 7 import java.sql.Statement; 8 9 public class DButil { 10 public static String url = "jdbc:mysql://localhost:3306/lession?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8"; 11 public static String user = "root"; 12 public static String password = "123456"; 13 public static String driver = "com.mysql.jdbc.cj.Driver"; 14 public static Connection getConn() { 15 Connection conn = null; 16 try { 17 Class.forName(driver); 18 19 // 连续数据库 20 conn = DriverManager.getConnection(url, user, password); 21 if(!conn.isClosed()) 22 System.out.println("Succeeded connecting to the Database!"); 23 24 } catch (Exception e) { 25 e.printStackTrace(); 26 } 27 return conn; 28 } 29 30 public static void close(Statement state, Connection conn) { 31 if(state!=null) { 32 try { 33 state.close(); 34 } catch (SQLException e) { 35 e.printStackTrace(); 36 } 37 } 38 if(conn!=null) { 39 try { 40 conn.close(); 41 } catch (SQLException e) { 42 e.printStackTrace(); 43 } 44 } 45 } 46 47 public static void close(ResultSet rs, Statement state, Connection conn) { 48 if(rs!=null) { 49 try { 50 rs.close(); 51 } catch (SQLException e) { 52 e.printStackTrace(); 53 } 54 } 55 if(state!=null) { 56 try { 57 state.close(); 58 } catch (SQLException e) { 59 e.printStackTrace(); 60 } 61 } 62 if(conn!=null) { 63 try { 64 conn.close(); 65 } catch (SQLException e) { 66 e.printStackTrace(); 67 } 68 } 69 } 70 }
代码不能直接抄过来用,因为每个人的数据库名和账号密码是不同的,只需要修改这部分即可。
下面介绍javabean包,javabean说白了就是一个用户类,它包含所有的用户数据,并且必须设为私有,方便servlet和jsp中调用。代码如下
1 package bean; 2 3 public class Javabean { 4 private String lessionname; 5 private String teacher; 6 private String address; 7 8 public String getLessionname() { 9 return lessionname; 10 } 11 public void setLessionname(String lessionname) { 12 this.lessionname = lessionname; 13 } 14 public String getTeacher() { 15 return teacher; 16 } 17 public void setTeacher(String teacher) { 18 this.teacher = teacher; 19 } 20 public String getAddress() { 21 return address; 22 } 23 public void setAddress(String address) { 24 this.address = address; 25 } 26 //构造函数 27 public Javabean() {}; 28 public Javabean(String lessionname,String teacher,String address) 29 { 30 this.address=address; 31 this.lessionname=lessionname; 32 this.teacher=teacher; 33 } 34 }
这里我设置了两个构造函数,一个有全部参数,一个无参数。javabean存在的意义就是创立一个对象实体来将从界面或者从数据库中提取出来的数据进行传递。
以上两个工具包就已经书写完毕了,下面就要进行最重要的部分,功能类接口的书写,也就是我们的dao包。我们要在dao包中实现数据库的连接以及具体的增删改查功能:
dao包代码如下:
1 package dao; 2 3 import java.sql.Connection; 4 import java.sql.PreparedStatement; 5 import java.sql.ResultSet; 6 import java.sql.Statement; 7 8 9 import bean.Javabean; 10 import dbutil.DButil; 11 12 public class Dao { 13 14 public boolean checkReg(String name) 15 { 16 boolean flag = true; 17 // 查询用户是否已存在 18 Connection connection = DButil.getConn(); 19 Statement statement = null; 20 ResultSet rs = null; 21 try 22 { 23 statement = connection.createStatement(); 24 rs = statement.executeQuery("select * from lessionm");//数据库结果集 25 while (rs.next()) 26 { 27 if (name.equals(rs.getString("课程名称"))) 28 { 29 30 flag = false; 31 } 32 } 33 } catch (Exception e) 34 { 35 e.printStackTrace(); 36 } finally 37 { 38 DButil.close(rs, statement, connection); 39 } 40 return flag; 41 }//检查课程名是否存在 42 43 public Javabean insert(String lessionname,String teacher,String address) 44 { 45 Connection connnection = DButil.getConn(); 46 Javabean insertbean = new Javabean(); 47 ResultSet rs = null; 48 Statement statement=null; 49 try 50 { 51 String sql="insert into lessionm(课程名称,任课教师,上课地点) values('"+lessionname+"','"+teacher+"','"+address+"')"; 52 statement=connnection.prepareStatement(sql); 53 statement.executeUpdate(sql); 54 insertbean.setAddress(address); 55 insertbean.setLessionname(lessionname); 56 insertbean.setTeacher(teacher); 57 } catch (Exception e) 58 { 59 e.printStackTrace(); 60 }finally 61 { 62 DButil.close(rs, statement, connnection); 63 } 64 return insertbean; 65 66 }//插入操作 67 68 public Javabean update(String lessionname,String teacher,String address) 69 { 70 71 Connection connection = DButil.getConn(); 72 ResultSet rs = null; 73 Statement statement=null; 74 Javabean updatebean=new Javabean(); 75 try 76 { 77 String sql="update lessionm set 任课教师='"+teacher+"',上课地点='"+address+"' where 课程名称='"+lessionname+"'"; 78 statement=connection.createStatement(); 79 statement.executeUpdate(sql); 80 } catch (Exception e) 81 { 82 e.printStackTrace(); 83 }finally 84 { 85 DButil.close(rs, statement, connection); 86 } 87 return updatebean; 88 } 89 90 public void delete(String lessionname) 91 { 92 ResultSet rs = null; 93 Statement statement=null; 94 Connection connection = DButil.getConn(); 95 try 96 { 97 String sql = "delete from lessionm where 课程名称='"+lessionname+"'"; 98 statement=connection.createStatement(); 99 statement.executeUpdate(sql); 100 } catch (Exception e) 101 { 102 e.printStackTrace(); 103 }finally 104 { 105 DButil.close(rs, statement, connection); 106 } 107 108 } 109 110 public Javabean selectlessionm(String lessionname) 111 { 112 Javabean selectbean=new Javabean(); 113 Connection connection = DButil.getConn(); 114 Statement statement=null; 115 ResultSet rs = null; 116 try 117 { 118 statement = connection.createStatement(); 119 120 // 要执行的SQL语句 121 String sql = "select * from lessionm where 课程名称='"+lessionname+"'"; 122 123 // 结果集 124 rs = statement.executeQuery(sql); 125 126 while(rs.next()) 127 { 128 129 String lessionname1 = rs.getString("课程名称"); 130 String teacher = rs.getString("任课教师"); 131 String address = rs.getString("上课地点"); 132 selectbean.setAddress(address); 133 selectbean.setTeacher(teacher); 134 selectbean.setLessionname(lessionname1); 135 } 136 } catch (Exception e) 137 { 138 e.printStackTrace(); 139 } finally 140 { 141 DButil.close(rs, statement, connection); 142 } 143 return selectbean; 144 } 145 146 }
代码略长,checkReg函数是检验是否数据库中存在课程,如果存在,则不能进行增加功能,但可以进行查和删除和修改。insert,delete,update,select函数分别是增删改查的函数,在其中调用了dbutil进行数据库连接,并各自调用相对应的sql语句实现功能的实现。但需要注意的是,要进行数据库的连接,必须在项目文件中导入mysql的连接包,也就是jar包,否则是无法实现数据库操作的。
到最后,也就是我们的servlet操作了,servlet负责从jsp表单中获取数据,然后调用dao包的增删改查函数进行数据操作,然后再将数据库返回的值传给jsp界面,顺便执行界面跳转的工作。
代码大同小异,我只展示一个功能的代码:
1 package servlet; 2 3 import dao.Dao; 4 import java.io.IOException; 5 import javax.servlet.ServletException; 6 import javax.servlet.annotation.WebServlet; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 11 /** 12 * Servlet implementation class Insert 13 */ 14 @WebServlet("/Insert") 15 public class Insert extends HttpServlet { 16 private static final long serialVersionUID = 1L; 17 18 /** 19 * @see HttpServlet#HttpServlet() 20 */ 21 public Insert() { 22 super(); 23 // TODO Auto-generated constructor stub 24 } 25 26 /** 27 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 28 */ 29 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 30 // TODO Auto-generated method stub 31 response.setContentType("text/html;charset=utf8"); 32 request.setCharacterEncoding("utf-8"); 33 response.getWriter().append("Served at: ").append(request.getContextPath()); 34 String lessionname=request.getParameter("lessionname"); 35 String teacher=request.getParameter("teacher"); 36 String address=request.getParameter("address"); 37 int check=0; 38 Dao dao=new Dao(); 39 dao.checkReg(lessionname); 40 if(dao.checkReg(lessionname)) 41 { 42 check=1; 43 if(teacher.equals("刘丹")||teacher.equals("王建民")||teacher.equals("刘立嘉")) 44 dao.insert(lessionname, teacher, address); 45 } 46 request.setAttribute("check",check); 47 request.setAttribute("teacher", teacher); 48 request.setAttribute("address", address); 49 request.getRequestDispatcher("success.jsp").forward(request, response); 50 } 51 52 /** 53 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 54 */ 55 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 56 // TODO Auto-generated method stub 57 doGet(request, response); 58 } 59 60 }
以上,就是整个系统的流程,希望对初学者能用所帮助。