1. 程式人生 > >如何實現最基本的課程管理系統(程序庫的增刪改查)

如何實現最基本的課程管理系統(程序庫的增刪改查)

bilibili rtb styles cat 希望 driver 管理 代碼 all

  一直在聽建民老師說,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 }

技術分享圖片

以上,就是整個系統的流程,希望對初學者能用所幫助。

如何實現最基本的課程管理系統(程序庫的增刪改查)