JavaWeb个人博客项目：手把手教你实现博客后台系统之管理员管理模块5

上一篇博文介绍了注册和登录模块，未看过的人欢迎翻我之前博文~

接下来就进入登录成功后的主界面，这里主要实现主界面的基础布局和管理员管理模块=w=

GitHub地址：https://github.com/DaiPanda/Blog-of-Dai

照例有任何问题欢迎下方评论>3<

一、后台主界面

1.1 图片演示

（默认进入博文管理的博文列表界面，这里暂时不介绍博文管理模块，以后会更）

1.2 详细分析

①登录成功后，登录的用户名将会显示在右上角，譬如刚刚那张图片的“胖达”

（使用session，之前登录成功后先是将登陆的adm对象保存在session中，再进行转发的，具体代码参考上一篇博文。

如果在index.jsp中获得对象为null，则代表未通过登录页面而是直接在地址栏中输入主页面的地址，这样会重定向到登录页面。）

图示如下：

②总的后台布局使用的是layui框架，主要是使用iframe实现页面的嵌套

（使用iframe标签，相关a标签中的target值对应iframe的name值）

图示如下：

③相关步骤如下：

第一步：通过layui的后台框架将index.jsp的大体结构搭好

第二步：对官方的后台框架进行修改，主要修改左侧导航栏的代码内容

第三步：使用iframe布局达到页面嵌套的效果，即点击不同的导航栏按钮右侧链接不同的页面

第四步：通过session判断是否经过了登录页面

1.3 目录结构

要想实现如图主界面，除了之前几篇博文写的准备工作以外，你还需要这样的目录结构

当然，之前的准备工作没有看的，建议从个人博客的第三篇博文看起

地址：https://blog.csdn.net/DaiYuMeng/article/details/104677362

1.4 详细代码

index.jsp文件：

<%@page import="pojo.Adm"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@include file="base.jsp"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
<title>熊猫后台</title>
<%String name;Adm a = (Adm) request.getSession().getAttribute("admin");if (a == null) {response.sendRedirect("login.jsp");return;} else {name = a.getAdm_name();}
%>
<style>
.layui-body {border: none !important;
}.mydiv {width: 100%;position: relative;top: 0%;left: 0%;
}.myframe {background-color: rgb(250, 250, 250);position: relative;top: 50%;left: 50%;margin-left: -550px;
}
</style></head>
<body class="layui-layout-body"><div class="layui-layout layui-layout-admin"><div class="layui-header" style="background: skyblue; opacity: 0.7"><div class="layui-logo">IPanda 博客后台管理系统</div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制台</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><li class="layui-nav-item"><a href="">用户</a></li><li class="layui-nav-item"><a href="javascript:;">其它系统</a><dl class="layui-nav-child"><dd><a href="">邮件管理</a></dd><dd><a href="">消息管理</a></dd><dd><a href="">授权管理</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"> <imgsrc="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=19ee1139ffdeb48fef64a98c9176514c/810a19d8bc3eb135d7ee3ce3aa1ea8d3fd1f44b9.jpg"class="layui-nav-img"> <span id="uname"><%=name%></span></a><dl class="layui-nav-child"><!--${ctx}/user/index.jsp  --><dd><a href="#" target="myframe">基本资料</a></dd><dd><a href="">安全设置</a></dd></dl></li><li class="layui-nav-item"><a href="login.jsp">退了</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class=""href="javascript:;">博文管理</a><dl class="layui-nav-child"><dd><a href="${ctx}/article/listArticle.jsp" target="myframe">博文列表</a></dd><dd><a href="${ctx}/article/addArticle.jsp" target="myframe">添加博文</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">评论管理</a><dl class="layui-nav-child"><dd><a href="${ctx}/comment/listComment.jsp" target="myframe">评论列表</a></dd><%--  <dd><a href="${ctx}/comment/addComment.jsp" target ="myframe">添加评论</a></dd>  --%></dl></li><li class="layui-nav-item"><a href="javascript:;">分类管理</a><dl class="layui-nav-child"><dd><a href="${ctx}/category/listCategory.jsp" target="myframe">分类列表</a></dd><dd><a href="${ctx}/category/addCategory.jsp" target="myframe">添加分类</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">标签管理</a><dl class="layui-nav-child"><dd><a href="${ctx}/tag/listTag.jsp" target="myframe">标签列表</a></dd><dd><a href="${ctx}/tag/addTag.jsp" target="myframe">添加标签</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">友链管理</a><dl class="layui-nav-child"><dd><a href="${ctx}/friend/listFriend.jsp" target="myframe">友链列表</a></dd><dd><a href="${ctx}/friend/addFriend.jsp" target="myframe">添加友链</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">管理员管理</a><dl class="layui-nav-child"><dd><a href="${ctx}/adm/listAdm.jsp" target="myframe">管理员列表</a></dd><%-- <dd><a href="${ctx}/adm/addAdm.jsp" target ="myframe">添加管理员</a></dd>  --%></dl></li></ul></div></div><div class="layui-body" style="background-color: rgb(250, 250, 250);"><!-- 内容主体区域 --><div class="mydiv"><iframe name="myframe" width="1100" height="728" frameborder="0"class="myframe" src="article/listArticle.jsp"></iframe></div></div><div class="layui-footer"><!-- 底部固定区域 -->© Daipanda.com - 使用layui框架</div></div><script>//JavaScript代码区域layui.use('element', function() {var element = layui.element;});</script>
</body>
</html>

二、管理员模块

1.1 图片演示

①管理员列表（含分页）

②编辑管理员

③删除管理员

1.2 详细分析

①管理员管理在左侧导航栏第六个管理的位置，相关具体代码在index.jsp中位置如下：

（总体代码在上方）

②listAdm.jsp是使用layui里的经典的数据表格布局，这就对他从后台传回来的数据有一定的要求，官网要求如下：

（详细介绍及扩展部分见官网：https://www.layui.com/doc/modules/table.html）

③layui的table布局中有三种渲染方法：方法渲染、自动渲染、静态表格渲染，这里使用的是方法渲染，要求如下：

cols里面各个field对应于每一列的表头，其field的值应该与后台传过来的属性变量名是一样的，这里我的命名和数据库中字段名也是一样的

（这里渲染的数据还可以使用自定义列模板templet，以后再更该用法）

④listAdm.jsp渲染数据表格时还使用了分页效果，相关步骤如下：

第一步：设置开启table的分页效果（page:true）

第二步：servlet层获取limit（默认10）和page（默认1）参数值

第三步：通过AdmDaoImpl.java里的getPageAdm(page,limit)方法返回相关管理员每页数据，是一个ArrayList对象

第四步：通过AdmDaoImpl.java里的getAllAdm()方法返回相关管理员总数，是一个int变量

代码图示如下：

⑤前台回调数据实现管理员列表时，具体来说接收的是符合一定规则的json数据，这里我掌握了两个方法

第一个方法：(1)先使用map集合，保存相关数据格式

(2)再利用google的json解析包将map格式转为string格式，google的json包目录如下，没有的可以私信我

(3)然后返回给前台，ajax回调时选择json格式就会自动把其转换为json格式

（我使用这个方法，但我觉得这个相对下面比较复杂）

第二个方法：也是先使用map存储数据，再利用json的jar包，首先你需要如下jar包，没有的可以私信我

代码图示如下：

⑥listAdm.jsp使用了layui经典的弹出层效果制作编辑管理员信息，图例如下：

操作步骤：根据满足条件的事件触发执行弹出层动画，弹出层由另外的页面（editAdm.jsp）组成

⑦综上，listAdm.jsp详细步骤如下

第一步：运用方法渲染的格式，其table的id值与渲染表格的elem值要对应

图示如下：

第二步：使用layui的数据表格table结构，在url里写入对应的数据接口（管理员列表的数据接口）

图示如下：

第二步：写入对应的工具条模板，就相当于操作模板，注意script的type值

图示如下：

第三步：监听工具条，layEvent对应

举例如下：

第四步：(1)点击某一项的编辑按钮时，它就触发监听工具条的事件,通过layEvent确定触发的是“编辑”事件

(2)利用弹出层的content属性，走到servlet层，同时将adm_id传回去

(3)它获取adm_id是通过data.adm_id的方法，因为之前渲染数据时数据接口返回的值都存在data里头

图示如下：

(4)它先走selectAdm这个控制层的接口，然后从Dao层的getOneAdm()通过adm_id读取对应的一条管理员的数据，返回的是Adm对象，将其对应信息保存在request属性中，最后再将数据转发到editAdm.jsp页面

图示如下：

(5)编辑弹出层主要是利用layui的form组件，利用getAttribute()方法获得上一步存储的属性值

图示如下：

第五步：(1)点击某一项的删除按钮时，它就触发监听工具条的事件,通过layEvent确定触发的是“删除”事件

(2)利用layui提供的confirm弹出对话框，提示用户执行下一步操作

(3)当用户点击“确定”时，先删除对应行的DOM结构（假删除），再通过ajax向服务端发送删除指令，调用delAdm接口，传过去adm_id（真删除）

图示如下：

（4)在delAdm接口中，先获得传过来的id，再利用Dao层的deleteAdm(int id)方法，这个方法返回一个boolean值

(5)将这个boolean值返回给前端，然后前端通过这个值判断是否删除成功，删除成功就会弹出“删除成功”提示

图示如下：

1.3 具体代码

首先，Adm.java、AdmDao.java以及AdmDaoImpl.java等已经在上一篇博文里详细写了，这里就不赘述了

①src-->在servlet包里-->新建一个Servlet文件，命名为ListAdm-->在URL mappings中改名为/listAdm-->键入代码，如下

ListAdm.java

package servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;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 org.json.JSONArray;
import org.json.JSONObject;import com.google.gson.JsonObject;import dao.AdmDao;
import dao.AdmDaoImpl;
import pojo.Adm;
import util.JsonUtil;/*** Servlet implementation class ListAdm*/
@WebServlet("/listAdm")
public class ListAdm extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public ListAdm() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {int limit = 0;int page = 0;        PrintWriter writer = null;try {limit = Integer.parseInt(request.getParameter("limit"));page = Integer.parseInt(request.getParameter("page"));AdmDao a = new AdmDaoImpl();ArrayList<Adm> aList = a.getPageAdm(page, limit);ArrayList<Adm> aListTotal = a.getAllAdm();Map<String, Object> map = new HashMap<String, Object>();map.put("code", 0);map.put("msg", "");map.put("count", aListTotal.size());map.put("data", aList);   //String jsonStr = JsonUtil.beanToString(map);//writer.write(jsonStr);  writer= response.getWriter();net.sf.json.JSONObject jsonStr = net.sf.json.JSONObject.fromObject(map);writer.print(jsonStr);}catch(Exception e) {e.printStackTrace();}finally {writer.flush();writer.close();}}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

②src-->在servlet包里-->新建一个Servlet文件，命名为SelectAdm-->在URL mappings中改名为/selectAdm-->键入代码，如下

SelectAdm.java

package servlet;import java.io.IOException;
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 dao.AdmDao;
import dao.AdmDaoImpl;
import dao.CategoryDao;
import dao.CategoryDaoImpl;
import pojo.Adm;
import pojo.Category;/*** Servlet implementation class SelectAdm*/
@WebServlet("/selectAdm")
public class SelectAdm extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public SelectAdm() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {try {int adm_id = Integer.parseInt(request.getParameter("adm_id"));AdmDao a = new AdmDaoImpl();Adm adm = a.getOneAdm(adm_id);if(adm!=null) {request.setAttribute("adm_id", adm.getAdm_id());request.setAttribute("adm_name",adm.getAdm_name());request.setAttribute("adm_password", adm.getAdm_passward());request.getRequestDispatcher("adm/editAdm.jsp").forward(request, response);//转发到成功页面}} catch (Exception e) {e.printStackTrace();} }/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

③src-->在servlet包里-->新建一个Servlet文件，命名为EditAdm-->在URL mappings中改名为/editAdm-->键入代码，如下

EditAdm.java

package servlet;import java.io.IOException;
import java.io.PrintWriter;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 dao.AdmDao;
import dao.AdmDaoImpl;
import pojo.Adm;/*** Servlet implementation class EditAdm*/
@WebServlet("/editAdm")
public class EditAdm extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public EditAdm() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String result = "false";PrintWriter writer = null;try {int adm_id = Integer.parseInt(request.getParameter("adm_id"));String adm_name = request.getParameter("adm_name");String adm_password = request.getParameter("adm_password");Adm adm = new Adm();adm.setAdm_id(adm_id);adm.setAdm_name(adm_name);adm.setAdm_passward(adm_password);AdmDao a = new AdmDaoImpl();boolean flag = a.updateAdm(adm);System.out.println(flag);if(flag) {result ="true";    }writer =  response.getWriter();writer.write(result);}catch(Exception e) {e.printStackTrace();}finally {writer.flush();writer.close();}}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

④在WebContent的adm目录下-->新建jsp文件，命名为listAdm.jsp-->键入代码，如下

listAdm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@include file="../base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../css/base.css" rel="stylesheet" media="screen" />
<title>管理员列表</title>
</head>
<body>
<div id="box"><table id="demo" lay-filter="test"></table>
</div>
</body>
<!-- 这里实现了分页效果 -->
<script>layui.use('table', function() {var table = layui.table;//开始渲染表格table.render({elem : '#demo',//要渲染的表格idheight : 480,//表格的高度width : 635,//表格的宽度url : '${ctx}/listAdm', //数据接口page : true, //开启分页cols : [ [ //表头{field : 'adm_id',title : 'ID',width : 80,sort : true,fixed : 'left'},{field : 'adm_name',title : '管理员昵称',width : 160,},{field : 'adm_password',title : '管理员密码',width : 210}, {title : '操作',toolbar : '#barDemo',width : 180} ] ],done:function(res){//如果是异步请求数据方式，res即为你接口返回的信息console.log(res);}});//监听工具条table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"var data = obj.data; //获得当前行数据var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）var tr = obj.tr; //获得当前行 tr 的DOM对象if (layEvent === 'detail') { //查看/* 后来可以查看父id的值*/layer.msg("你今天真好看！！", {icon : 1});} else if (layEvent === 'del') { //删除layer.confirm('真的删除该管理员么？？', function(index) {obj.del(); //删除对应行（tr）的DOM结构，并更新缓存layer.close(index);//向服务端发送删除指令$.post("${ctx}/delAdm", {adm_id : data.adm_id}, function(result) {if (result) {layer.msg("删除成功！！", {icon : 1});table.reload('demo');}}, "json");});layer.close(index);} else if (layEvent === 'edit') { //编辑//弹出层layer.open({title : ["编辑管理员","text-align:center"],type : 2,offset : [ "80px" ],//位置area : [ "500px", "220px" ],//大小content : ['${ctx}/selectAdm?adm_id=' + data.adm_id,"no"], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']anim:1,//当窗口关闭时执行end : function() {table.reload('demo');}});}});});</script>
<!--工具条模板  -->
<script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="detail">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>

⑥在WebContent的adm目录下-->新建jsp文件，命名为editAdm.jsp-->键入代码，如下

editAdm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@include file ="../base.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑管理员</title>
</head>
<body>
<!-- session由服务器产生，保存在服务器的内存中，sessionid会返回给客户端 -->
<%int adm_id = (int)request.getAttribute("adm_id");String adm_name = (String)request.getAttribute("adm_name");String adm_password = (String)request.getAttribute("adm_password");
%>
<form class="layui-form" action="">
<!-- hidden = "hidden"  --><input value = "<%=adm_id %>" hidden = "hidden" id = "tid"><div class="layui-form-item"><label class="layui-form-label">管理员名:</label><div class="layui-input-inline" style="width: 200px;"><input type="text" name="title" lay-verify="title"autocomplete="off" placeholder="请输入管理员名称" class="layui-input"id="adm_name" name="adm_name"  value = "<%=adm_name%>"><span id="tip" style="color:red;margin-top:20px;"></span></div></div><div class="layui-form-item"><label class="layui-form-label">管理员密码:</label><div class="layui-input-inline" style="width: 200px;"><input type="text" name="title" lay-verify="title"autocomplete="off" placeholder="请输入管理员密码" class="layui-input"id="adm_password" name="adm_password"  value = "<%=adm_password%>"></div></div><div class="layui-form-item"><div class="layui-input-block"><div class="layui-btn"  lay-submit="" lay-filter="demo1" id="sub">立即提交</div><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form><script type="text/javascript">layui.use([ 'layer' ], function() {var isOk = false;$("#adm_name").blur(function(){if ($("#adm_name").val() == "") {layer.msg("不能输入为空哦！", {icon : 2});return;}else {$.post('isExist', {username : $('#adm_name').val()},function(result) { //alert(typeof result);if(result=="true"){//alert(1);isOk = false;//利用jquery对元素设置样式$('#username').css("border", "1px solid red");$('#tip').html('该用户已存在');$('#tip').css("color", "red");return;}else{//alert(2);isOk = true;//利用jquery对元素设置样式$('#username').css("border", "1px solid gray");//html() 设置标签之间的 内容$('#tip').html('该用户名可用');$('#tip').css("color", "green");}}, "text");}});  $("#sub").click(function(){if (!isOk) {layer.msg("管理员名是唯一的哦！", {icon : 2});return;}else{$.post("${ctx}/editAdm",//后台地址{adm_password : $("#adm_password").val(),adm_name : $("#adm_name").val(),adm_id : $("#tid").val()},//需要提交到后台的数据function(result) {if (result) {//修改成功layer.msg("修改成功", {icon : 1});//假设这是iframe页var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index); //再执行关闭        }},//回调函数"json");}});});</script>
</body>
</html>

1.4 易错点分析之转发与重定向的区别

(1)转发地址栏不会发生变化，显示的依然是上一个地址栏的地址

(2)转发一般带ServletRequest和Servletresponse对象过去，所以数据不会丢失

(3)重定向地址栏会发生变化

(4)重定向没有带数据过去，即数据会丢失

如果有任何问题，欢迎在下方留言~

我如果看到了就一定会回复的=w=

注：GitHub下载地址在文章顶部，也传到了csdn下载上面，希望能对你有所帮助；

也欢迎关注我的个人微信公众号【大胖猫的马太效应】，回复关键字JavaWeb博客后台管理系统获得本后台项目所有源码噢~