一直在聽建民老師說,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-width:220px;
18 width: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-width:220px;*/
37
38 +width:100%;
39 }
40
41 .leftbgbt {
42 position: absolute;
43 background: no-repeat;
44 width: 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 }
以上,就是整個系統的流程,希望對初學者能用所幫助。

