- 首页代码编写
<%-- Created by IntelliJ IDEA. User: develop Date: 2021/11/9 Time: 9:41 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html> <head> <title>操作首页</title> <!-- 引入bootstrap --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"> <!-- 引入JQuery bootstrap.js--> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script> </head> <body> <!-- 顶栏 --> <div class="container" id="top"> <div class="row"> <div class="col-md-12"> <!--加入导航条标题--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example" aria-expanded="true"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">社团成员信息管理系统</a> </div> <form action="#" class="navbar-form navbar-right" role="search"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" style="margin-right: 20px; "> <span class="glyphicon glyphicon-user">Alice</span> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="javascript:void(0)"> <span class="glyphicon glyphicon-cog pull-right"></span> 修改个人信息 </a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="javascript:void(0)"> <span class="glyphicon glyphicon-off pull-right"></span>注销 </a> </li> </ul> </div> </form> </div> </div> </div> </div> <!-- 中间主体 --> <div class="container" id="content"> <div class="row"> <div class="col-md-2"> <div class="collapse navbar-collapse" style="padding: 0;" id="bs-example"> <ul class="nav nav-pills nav-stacked" id="nav"> <li> <a href="./index.html">操作首页<span class="glyphicon glyphicon-folder-open pull-right"></span></a> </li> <li> <a href="${pageContext.request.contextPath}/deptServlet?op=list">部门管理<span class="glyphicon glyphicon-equalizer pull-right"></span></a> </li> <li> <a href="./show.html">成员管理<span class="glyphicon glyphicon-user pull-right"></span></a> </li> <li> <a href="javascript:void(0)">成员统计<span class="glyphicon glyphicon-pencil pull-right"></span></a> </li> <li> <a href="javascript:void(0)">退出系统<span class="glyphicon glyphicon-log-out pull-right"></span></a> </li> </ul> </div> </div> <div class="col-md-10"> <img src="${pageContext.request.contextPath}/images/bc2.jpg" width="100%" alt="操作首页图片"> </div> </div> </div> <div class="container" id="footer"> <div class="row"> <div class="col-md-12"></div> </div> </div> <script> $("#nav li:nth-child(1)").addClass("active"); </script> </body> </html>
2. 创建数据库
/* Navicat MySQL Data Transfer Source Server : localhost_3306 Source Server Version : 50618 Source Host : localhost:3306 Source Database : cims Target Server Type : MYSQL Target Server Version : 50618 File Encoding : 65001 Date: 2021-11-10 10:28:34 */ create Database cims ; SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for `dept` -- ---------------------------- DROP TABLE IF EXISTS `dept`; CREATE TABLE `dept` ( `deptId` int(11) NOT NULL AUTO_INCREMENT, `dName` varchar(20) NOT NULL, `dAddress` varchar(500) DEFAULT NULL, `manage` varchar(20) DEFAULT NULL, `phone` varchar(20) DEFAULT NULL, PRIMARY KEY (`deptId`), UNIQUE KEY `dName` (`dName`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- ---------------------------- -- Records of dept -- ----------------------------
3. 编写 Servlet
import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import static com.sun.javafx.fxml.expression.Expression.add; @WebServlet("/deptServlet") public class DeptServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1. 编码 // 2. 判断 找哪个功能方法 增add删del改update查find // 接受前台的jsp传递过来的参数 String op = request.getParameter("op"); switch (op){ case "add" : add(request,response); break; case "del" : del(request,response); break; case "list" : list(request,response); break; } } private void list(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { ResultSet rs = JdbcUtil.findDept(); ArrayList<Dept> list = new ArrayList<>(); while (rs.next()){ Dept d = new Dept(); String deptid = rs.getString("deptid"); String dName = rs.getString("dName"); String daddress = rs.getString("daddress"); String manage = rs.getString("manage"); String phone = rs.getString("phone"); // 类型不匹配 需要 转 int id = Integer.parseInt(deptid); d.setDeptId(id); d.setdName(dName); d.setdAddress(daddress); d.setManage(manage); d.setDphone(phone); list.add(d); } System.out.println("list = " + list); request.setAttribute("list",list); request.getRequestDispatcher("/jsp/department/list.jsp").forward(request,response); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (SQLException throwables) { throwables.printStackTrace(); } } private void add(HttpServletRequest request, HttpServletResponse response) { } private void del(HttpServletRequest request, HttpServletResponse response) { } }
4 编写页面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%-- Created by IntelliJ IDEA. User: develop Date: 2021/11/10 Time: 9:16 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html> <head> <title>部门管理</title> <!-- 引入bootstrap --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"> <!-- 引入JQuery bootstrap.js--> <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script> <style> th { text-align: center; } </style> </head> <body> <!-- 顶栏 --> <div class="container" id="top"> <div class="row"> <div class="col-md-12"> <!--导航条--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example" aria-expanded="true"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">社团信息管理系统</a> </div> <form action="#" class="navbar-form navbar-right" role="search"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" style="margin-right: 20px; "> <span class="glyphicon glyphicon-user">Alice</span> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="javascript:void(0)"> <span class="glyphicon glyphicon-cog pull-right"></span> 修改个人信息 </a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="javascript:void(0)"> <span class="glyphicon glyphicon-off pull-right"></span>注销 </a> </li> </ul> </div> </form> </div> </div> </div> </div> <!-- 中间主体 --> <div class="container"> <div class="row"> <div class="col-md-2"> <div class="collapse navbar-collapse" style="padding: 0;" id="bs-example"> <ul class="nav nav-pills nav-stacked" id="nav"> <li> <a href="${pageContext.request.contextPath}/">操作首页<span class="glyphicon glyphicon-folder-open pull-right"></span></a> </li> <li> <a href="${pageContext.request.contextPath}/deptServlet?op=list">部门管理<span class="glyphicon glyphicon-equalizer pull-right"></span></a> </li> <li> <a href="./show.html">成员管理<span class="glyphicon glyphicon-user pull-right"></span></a> </li> <li> <a href="javascript:void(0)">成员统计<span class="glyphicon glyphicon-pencil pull-right"></span></a> </li> <li> <a href="javascript:void(0)">退出系统<span class="glyphicon glyphicon-log-out pull-right"></span></a> </li> </ul> </div> </div> <div class="col-md-10"> <div class="panel panel-default"> <div class="panel-heading"> <div class="row"> <h1 class="col-md-4">部门信息管理</h1> <div class="col-md-5" style="margin-top: 26px;"> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入查询" name="search"> <span class="input-group-addon btn" id="sub"><input style="border: 0;" type="submit" value="搜索"></span> </div> </div> <button class="btn btn-success col-md-offset-1 col-md-2" style="margin-top: 26px" onClick="void(0)"> 添加部门信息 <sapn class="glyphicon glyphicon-plus" /> </button> </div> </div> <table class="table table-bordered table-striped table-hover" style="text-align: center;"> <thead> <tr> <th>部门编号</th> <th>部门名称</th> <th>部门地址</th> <th>部门负责人</th> <th>负责人电话</th> <th>操作</th> </tr> </thead> <tbody> <c:forEach items="${list}" var="item"> <tr> <td>${item.deptId}</td> <td>${item.dName}</td> <td>${item.dAddress}</td> <td>${item.manage}</td> <td>${item.dphone}</td> <td> <button class="btn btn-default btn-xs btn-info" onClick="void(0)">修改</button> <button class="btn btn-default btn-xs btn-danger" onClick="deleteById(1);">删除</button> </td> </tr> </c:forEach> <%--<tr> <td>1001</td> <td>Alice</td> <td>19938001234</td> <td>管理员</td> <td>管理员</td> <td> <button class="btn btn-default btn-xs btn-info" onClick="void(0)">修改</button> <button class="btn btn-default btn-xs btn-danger" onClick="deleteById(1);">删除</button> </td> </tr>--%> </tbody> </table> <div class="panel-footer"> </div> </div> </div> </div> </div> <script> $("#nav li:nth-child(3)").addClass("active"); function deleteById(id) { if (confirm("删除该用户会同时删除已选课程，确定删除吗？") == true) { location.href = "javascript:void(0)"; } else { return false; } } </script> </body> </html>
附加:
