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:;"> <img
						src="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 stub
		doGet(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 stub
		doGet(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 stub
		doGet(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',//要渲染的表格id
			height : 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下載上面,希望能對你有所幫助

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章