zoukankan html css js c++ java

如何写一个完整课堂管理系统（数据库增删改查）

　　一直在听建民老师说，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 }

以上，就是整个系统的流程，希望可以帮到初学者。

查看全文

相关阅读:
nodejs ---day01
面向对象
 面向对象
 面向对象
 webpack
webpack
webpack
模块化（ESM） --- day02
模块化 --- day01
轮播图（淡入淡出切换）

原文地址：https://www.cnblogs.com/Aduorisk/p/10090643.html