這一節(jié)講用戶管理界面設(shè)計跪呈。先想想用戶管理都要做什么甚带，新增踏志、修改姑子、刪除寻定、查詢用戶基本信息酪刀，密碼重置边琉、加鎖贡这、解鎖用戶倘屹，查詢用戶登錄記錄银亲，姑且這么多，如果還有額外的要求纽匙，后期都可以加進(jìn)去务蝠。

1、新建公共引用taglib.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

頁面開發(fā)中肯定要用到各種表達(dá)式語言烛缔，所以就用公共的jsp引進(jìn)來馏段，包括JSTL里面的C標(biāo)簽，ftm函數(shù)標(biāo)簽践瓷，還有Spring的form標(biāo)簽院喜，后續(xù)還會用到自定義標(biāo)簽。

2当窗、各頁面的編寫

這里面一共包括四個頁面：
1够坐、index.jsp，管理頁面
2、add.jsp元咙，新增頁面
3梯影、update.jsp，修改頁面
4庶香、login.jsp甲棍，用戶的登錄信息

都不是很復(fù)雜，下面主要講特殊一點(diǎn)的知識點(diǎn)赶掖。

3感猛、自定義函數(shù)式標(biāo)簽

開發(fā)中有些頁面的引用可能用在好多地方，這時候就需要自定義一些函數(shù)式標(biāo)簽奢赂，常用的功能提前寫好陪白，用到的時候以標(biāo)簽的形式展示。比如用戶管理界面用戶狀態(tài)字段膳灶，數(shù)據(jù)庫存儲的是1正常咱士，2鎖定，頁面展示的時候就需要顯示為漢字轧钓，更好看一些的話序厉，正常是綠色，鎖定是紅色毕箍，加一些樣式弛房，這時候標(biāo)簽的好處就能體現(xiàn)出來了。

webtag.tld

在/webapp/WEB-INF/下面新建標(biāo)簽配置文件webtag.tld

<?xml version="1.0" encoding="UTF-8" ?>

<taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
    version="2.0">
    <tlib-version>1.0</tlib-version>
    <short-name>critc</short-name>
    <uri>http://www.critc.com/jsp/jstl/tags</uri>

    <function>
        <description>系統(tǒng)管理-用戶管理獲取用戶狀態(tài)</description>
        <name>getUserStatus</name>
        <function-class>com.critc.plat.util.web.WebTag</function-class>
        <function-signature>java.lang.String getUserStatus(java.lang.Integer)</function-signature>
    </function>
    
</taglib>

這里面首先定義標(biāo)簽的版本號<tlib-version>而柑，縮寫名<short-name>文捶，及URI<uri>，這樣在jsp頁面里面就可以引用該標(biāo)簽了牺堰。

這里面定義了一個function拄轻，里面四個配置項,<description>標(biāo)簽的描述颅围，<name>函數(shù)名伟葫，<function-class>函數(shù)對應(yīng)的類，需要寫全路徑院促，<function-signature>函數(shù)簽名筏养，需要寫清楚調(diào)用的是類里面的哪個方法，返回值是什么常拓，這里面返回值和參數(shù)都需要時包裝類型渐溶，不能是原生類型。

WebTag.java

public class WebTag {

    /**
     * 獲取用戶狀態(tài)弄抬，系統(tǒng)管理-用戶管理用到
     *
     * @param user_status
     * @return
     */
    public static String getUserStatus(Integer user_status) {
        if (user_status == 1)
            return "<span class=\"label label-success arrowed\">正常</span>";
        else if (user_status == 2)
            return "<span class=\"label label-warning arrowed\">已鎖定</span>";
        else
            return "";
    }

}

taglib.jsp增加引用

<%@ taglib prefix="critc" uri="http://www.critc.com/jsp/jstl/tags"%>

index.jsp中的具體使用

${critc:getUserStatus(sysUser.status)}

很簡單吧茎辐，而且可以重復(fù)使用。

4、SiteMesh中自定義Tag

實(shí)際開發(fā)中頁面會有自定義的JS和CSS拖陆，這些JS和CSS需要按照格式要求放到指定位置弛槐，比如CSS放到header中，JS放到公共引用js的后面依啰，這時候就需要自定義Tag了乎串。

SiteMesh3.xml

 <!-- 自定義標(biāo)簽 -->
    <content-processor>
        <tag-rule-bundle class="com.critc.plat.core.tagrules.ScriptTagRuleBundle" />
        <tag-rule-bundle class="com.critc.plat.core.tagrules.CssTagRuleBundle" />
    </content-processor>

增加這樣兩句話，自定義位置包括javascript和css

ScriptTagRuleBundle.java和CssTagRuleBundle.java

public class ScriptTagRuleBundle implements TagRuleBundle {
    @Override
    public void install(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) {
        defaultState.addRule("critc-script",
                new ExportTagToContentRule(siteMeshContext, contentProperty.getChild("critc-script"), false));
    }

    @Override
    public void cleanUp(State defaultState, ContentProperty contentProperty, SiteMeshContext siteMeshContext) {
    }
}

這一段的代碼非常簡單速警，實(shí)現(xiàn)TagRuleBundle接口叹誉，增加一個Tag 規(guī)則即可，這里定義為critc-script

decorator.jsp

<%@include file="../common/scripts.jspf" %>
<sitemesh:write property='critc-script'/>

這里就和定位body和header一樣闷旧，<sitemesh:write property='critc-script'/>這句話就可以頁面定義的javascript放到最后长豁。

index.jsp

<critc-script>
    <script type="text/javascript">
      ///省略
        </script>
</critc-script>

這里就和普通javascript定義一樣，只不過在最外層包了一下<critc-script>忙灼，原理一看就明白了蕉斜。

5、自定義操作成功界面和失敗界面

每個按鈕操作成功后缀棍，比如新增宅此、修改，需要告訴用戶操作成功了爬范，然后跳轉(zhuǎn)回原先界面父腕。一版這種場景有以下幾種方式：
1、alert以下或頁面上方青瀑、下方彈出一個tip璧亮，提示操作成功了，然后列表頁面刷新一下斥难，常用于頁面無刷新的架構(gòu)枝嘶，比如easyUI、ext等
2哑诊、跳轉(zhuǎn)至成功頁面群扶，提示操作成功，3秒后返回列表頁面镀裤，常用于互聯(lián)網(wǎng)界面竞阐。
這里選擇第二種方式。

SysUserController.java

 @RequestMapping("/add")
    public String add(HttpServletRequest request, HttpServletResponse response, SysUser sysUser) {
        sysUser.setStatus(1);
        int flag = sysUserService.add(sysUser);
        if (flag == 0)
            return "forward:/error.htm?msg=" + StringUtil.encodeUrl("用戶信息新增失敗");
        else if (flag == 2)
            return "forward:/error.htm?msg=" + StringUtil.encodeUrl("用戶賬號已存在");
        else
            return "forward:/success.htm?msg=" + StringUtil.encodeUrl("用戶信息新增成功");
    }

操作成功或失敗暑劝，跳往對應(yīng)界面骆莹，同時把操作結(jié)果，以msg的形式帶過去了担猛。

更好的方式是以代碼或數(shù)字碼的方式傳過去幕垦，在SccessController或ErrorController再解析這些代碼具體對應(yīng)的中文是什么丢氢。

SuccessController.java

@Controller
@RequestMapping("/")
public class SuccessController {

    /**
     * 成功處理操作
     * @param request
     * @param response
     * @return
     */
    @RequestMapping("/success")
    public ModelAndView success(HttpServletRequest request, HttpServletResponse response) {
        ModelAndView mv = new ModelAndView();
        mv.setViewName("/plat/common/success");
        mv.addObject("msg", StringUtil.decodeUrl(request.getParameter("msg")));
        mv.addObject("backUrl", StringUtil.decodeUrl(request.getParameter("backUrl")));
        return mv;
    }
}

這一塊代碼很簡單啊，就是獲取msg和backUrl先改，并跳轉(zhuǎn)success.jsp界面

success.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/taglib.jsp" %>
<head>
    <title>${webTitle }-操作成功</title>
</head>
<body>
<div class="breadcrumbs  breadcrumbs-fixed" id="breadcrumbs">
    <ul class="breadcrumb">
        <li><i class="ace-icon fa fa-home home-icon"></i> <a href="${dynamicServer}/index.htm">首頁</a></li>
        <li class="active">操作結(jié)果</li>
    </ul>
</div>

<div class="page-content">
    <div class="alert alert-success" style="text-align: center;">
        <h4>
            <i class="fa fa-check-circle"></i> ${msg }
        </h4>
        <a href="${backUrl}">如果你的瀏覽器沒有自動跳轉(zhuǎn)卖丸，請點(diǎn)擊此鏈接</a>
        <script type="text/javascript">
                            setTimeout(function() {
                                location.href = "${backUrl}";
                            }, 2000);

        </script>
    </div>
</div>
</body>
</html>

具體效果

具體效果.png

6、彈出框提示

效果如圖

在刪除用戶盏道、鎖定等操作時稍浆，一定要提示用戶，這種情況下就需要提示框了猜嘱。

bootbox.confirm("你確定要刪除該用戶嗎衅枫？", function (result) {
                if (result) {
                    window.location = "delete.htm?id=" + id + "&backUrl=${backUrl}";
                }
            })

這里整合了bootbox，只需要一句話即可朗伶，還是很方便的弦撩。

7、SysUserSearchVO.java的作用域

寫java代碼的時候定義SysUserSearchVO這個類论皆，用于獲取查詢條件益楼，具體怎么用的呢，很多人會有疑問点晴。

index請求方法

 /**
     * 進(jìn)入用戶管理界面
     *
     * @return
     */
    @RequestMapping("/index")
    public ModelAndView index(HttpServletRequest request, HttpServletResponse response, SysUserSearchVO sysUserSearchVO) {
        ModelAndView mv = new ModelAndView();
        int recordCount = sysUserService.count(sysUserSearchVO);// 獲取查詢總數(shù)
        String url = createUrl(sysUserSearchVO);
        PageNavigate pageNavigate = new PageNavigate(url, sysUserSearchVO.getPageIndex(), recordCount);//定義分頁對象
        List<SysUser> list = sysUserService.list(sysUserSearchVO);
        mv.addObject("pageNavigate", pageNavigate);// 設(shè)置分頁的變量
        mv.addObject("list", list);// 把獲取的記錄放到mv里面
        mv.addObject("listRole", sysRoleService.list());// 角色列表
        mv.setViewName("/plat/sys/user/index");// 跳轉(zhuǎn)至指定頁面
        BackUrlUtil.createBackUrl(mv, request, url);// 設(shè)置返回url
        return mv;
    }

這里面SysUserSearchVO作為一個參數(shù)感凤，由SpringMVC自動進(jìn)行參數(shù)的包裝，就是說進(jìn)入這個方法粒督，SysUserSearchVO的各個參數(shù)都已經(jīng)賦值了陪竿。

頁面?zhèn)髦?/p>

 // 查詢方法
        var searchUser = function () {
            var url = "index.htm?";
            if ($("#txtUsername").val() != '')
                url += "username=" + $("#txtUsername").val();
            if ($("#txtRealname").val() != '')
                url += "&realname=" + $("#txtRealname").val();
            if ($("#cmbStatus").val() != '')
                url += "&status=" + $("#cmbStatus").val();
            if ($("#cmbRoleId").val() != '')
                url += "&role_id=" + $("#cmbRoleId").val();
            window.location = encodeURI(url);
        }

頁面的傳值是通過拼請求的url，來實(shí)現(xiàn)的屠橄。包括分頁的鏈接也都是這種寫法族跛。原理就是不管是查詢還是分頁，把所有參數(shù)都寫到url的參數(shù)里面锐墙，這樣不管怎么跳轉(zhuǎn)礁哄，參數(shù)是不會變的。一定要牢記溪北，頁面查詢一定不要用用form的post方法桐绒，這樣分頁就無法post了。

8刻盐、表單校驗(yàn)

這里表單校驗(yàn)用的是jquery-validator掏膏，用起來還是比較簡單的劳翰。

引用jquery-validator

頁面校驗(yàn)對應(yīng)js

$("#userForm").validate({
            errorElement: "label",
            errorClass: "valiError",
            errorPlacement: function (error, element) {
                error.appendTo($("#" + element.attr('id') + "Tip"));
            },
            rules: {
                username: {
                    required: true,
                    minlength: 4,
                    maxlength: 20,
                    remote: {
                        url: "checkUserExist.htm", //后臺處理程序
                        type: "post", //數(shù)據(jù)發(fā)送方式
                        //dataType: "json", //接受數(shù)據(jù)格式
                        data: { //要傳遞的數(shù)據(jù)
                            username: function () {
                                return $("#username").val();
                            }
                        }
                    }
                },
                realname: {
                    required: true,
                    maxlength: 20
                },
                mobile: {
                    required: true,
                    maxlength: 11
                },
                roleId: {
                    required: true
                }
            },
            messages: {
                username: {
                    remote: "賬號已存在敦锌！"
                }
            },
            submitHandler: function (form) {
                form.submit();
            }
        });

這里面在rules定義校驗(yàn)規(guī)則，比如長度佳簸、是否為空乙墙、email颖变、數(shù)字、ajax異步校驗(yàn)等等听想。

提示信息

jquery-validator校驗(yàn)表單如果出錯腥刹，默認(rèn)是在該表單后面顯示錯誤信息，但是ACE里面需要設(shè)置一個默認(rèn)的div汉买，來定位錯誤信息的輸出衔峰。
生效代碼是這一段

errorElement: "label",
            errorClass: "valiError",
            errorPlacement: function (error, element) {
                error.appendTo($("#" + element.attr('id') + "Tip"));
            },

錯誤信息的標(biāo)簽用label，樣式class是valiError蛙粘，錯誤的位置是當(dāng)前表單的id+Tip垫卤，比如當(dāng)前表單的id是username，則錯誤提示的顯示位置為usernameTip出牧，所以在每個表單后面加了一句話<label id="usernameTip"></label>

jquery-validator功能非常豐富穴肘，還可以ajax異步校驗(yàn)、自定義校驗(yàn)方法等等舔痕，可以參見網(wǎng)上的教程
http://www.cnblogs.com/linjiqin/p/3431835.html

9评抚、查看登錄歷史

用戶列表里面有一個鏈接，登錄歷史伯复，點(diǎn)擊該鏈接慨代，彈出框，顯示用戶的登錄歷史啸如。

這里需要利用ajax的post的方法鱼响，請求整個頁面，加載進(jìn)來放到bootstrap的model里面组底。
先看看具體代碼實(shí)現(xiàn)：

viewLoginHis

 var viewLoginHis = function (id, title) {
            $.post('searchUserLogin.htm', {
                userId: id
            }, function (html) {
                $("#dialog-viewLogin").html(html);
                var dialog = $("#dialog-viewLogin").removeClass('hide').dialog({
                    title: "【" + title + "】登錄歷史",
                    title_html: false,
                    width: 1000,
                    minHeight: 500,
                    position: {my: "center", at: "center", of: window},
                    modal: true,
                    buttons: [
                        {
                            text: "返回",
                            "class": "btn btn-minier btn-center",
                            click: function () {
                                $(this).dialog("close");
                            }
                        }
                    ]
                });
            });
        }

這是點(diǎn)擊鏈接的js代碼丈积，post請求url

searchUserLogin java方法

/**
     * 用戶登錄信息
     *
     * @param request
     * @param response
     */
    @RequestMapping("/searchUserLogin")
    public ModelAndView searchUserLogin(HttpServletRequest request, HttpServletResponse response, SysUserloginSearchVO sysUserloginSearchVO) {
        ModelAndView mv = new ModelAndView();
        int recordCount = sysUserLoginService.count(sysUserloginSearchVO);// 獲取查詢總數(shù)
        String url = createUserLoginUrl(sysUserloginSearchVO);
        PageNavigate pageNavigate = new PageNavigate(url, sysUserloginSearchVO.getPageIndex(), recordCount);//
        List<SysUserLogin> list = sysUserLoginService.list(sysUserloginSearchVO);
        mv.addObject("pageNavigate", pageNavigate);// 設(shè)置分頁的變量
        mv.addObject("list", list);// 把獲取的記錄放到mv里面
        mv.setViewName("/plat/sys/user/login");// 跳轉(zhuǎn)至指定頁面
        return mv;
    }

這一塊和普通的請求controller代碼沒什么兩樣。

login.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="../../common/taglib.jsp" %>

<c:if test="${empty list}">
    <div class="row">
        <div class="col-xs-12">暫無數(shù)據(jù)</div>
    </div>
</c:if>
<c:if test="${!empty list && list.size() > 0}">
<div class="row">
    <div class="col-xs-12">
        <table id="simple-table" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th width=40>#</th>
                <th width=140>登錄時間</th>
                <th width="120">登錄IP</th>
                <th>終端</th>
                <th>瀏覽器類型</th>
                <th>瀏覽器版本</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${list }" var="sysUserLogin" varStatus="st">
                <tr>
                    <td>${st.index+1 }</td>
                    <td><fmt:formatDate value="${sysUserLogin.loginDate }" pattern="yyyy-MM-dd HH:mm"/></td>
                    <td>${sysUserLogin.loginIp }</td>
                    <td>${sysUserLogin.terminal }</td>
                    <td>${sysUserLogin.explorerType }</td>
                    <td>${sysUserLogin.explorerVersion}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
<div class="row">
    <div class="col-xs-12" id="pageNavForward">${ pageNavigate.pageModel}</div>
</div>
</c:if>
<script type="text/javascript">
    $(function() {
        $("#pageNavForward").on('click', 'a', function(e) {
            var $link = $(this);
            var $container = $link.closest('.ui-dialog-content');
            $container.load( $link.attr('href'));
            return false;
        });
        $("#forward_div").css("max-height", $(window).height() - 300);
    })
</script>

SiteMesh3.xml增加過濾項

searchUserLogin.htm這個請求是不需要被裝飾的债鸡，所以需要過濾掉

    <mapping path="/sys/user/searchUserLogin.htm" exclue="true" />

查看登錄歷史效果

效果.png

最終整體效果圖如下：

用戶管理.png

注意：

這一塊和java開發(fā)還不一樣江滨，需要掌握的技能點(diǎn)比較多，主要是ACE框架的使用厌均，div唬滑、css、html等相關(guān)代碼的編寫都需要了解棺弊，不能把自己僅僅定位于寫java代碼晶密，要全面發(fā)展，前端的技能也都要掌握模她，這樣才能游刃有余稻艰！

源碼下載

本階段詳細(xì)源碼