- 首页代码编写
<%--
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. 创建数据库
代码语言：javascript复制/*
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
代码语言：javascript复制 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 编写页面
代码语言：javascript复制<%@ 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>附加:
