从零搭建项目开发框架-15用户管理界面设计与开发

这一节讲用户管理界面设计。先想想用户管理都要做什么,新增、修改、删除、查询用户基本信息,密码重置、加锁、解锁用户,查询用户登录记录,姑且这么多,如果还有额外的要求,后期都可以加进去。

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" %>

页面开发中肯定要用到各种表达式语言,所以就用公共的jsp引进来,包括JSTL里面的C标签,ftm函数标签,还有Spring的form标签,后续还会用到自定义标签。

2、各页面的编写

这里面一共包括四个页面:
1、index.jsp,管理页面
2、add.jsp,新增页面
3、update.jsp,修改页面
4、login.jsp,用户的登录信息

都不是很复杂,下面主要讲特殊一点的知识点。

3、自定义函数式标签

开发中有些页面的引用可能用在好多地方,这时候就需要自定义一些函数式标签,常用的功能提前写好,用到的时候以标签的形式展示。比如用户管理界面用户状态字段,数据库存储的是1正常,2锁定,页面展示的时候就需要显示为汉字,更好看一些的话,正常是绿色,锁定是红色,加一些样式,这时候标签的好处就能体现出来了。

webtag.tld

在/webapp/WEB-INF/下面新建标签配置文件webtag.tld




    1.0
    critc
    http://www.critc.com/jsp/jstl/tags

    
        系统管理-用户管理获取用户状态
        getUserStatus
        com.critc.plat.util.web.WebTag
        java.lang.String getUserStatus(java.lang.Integer)
    
    

这里面首先定义标签的版本号,缩写名,及URI,这样在jsp页面里面就可以引用该标签了。

这里面定义了一个function,里面四个配置项,标签的描述,函数名,函数对应的类,需要写全路径,函数签名,需要写清楚调用的是类里面的哪个方法,返回值是什么,这里面返回值和参数都需要时包装类型,不能是原生类型。

WebTag.java

public class WebTag {

    /**
     * 获取用户状态,系统管理-用户管理用到
     *
     * @param user_status
     * @return
     */
    public static String getUserStatus(Integer user_status) {
        if (user_status == 1)
            return "正常";
        else if (user_status == 2)
            return "已锁定";
        else
            return "";
    }

}

taglib.jsp增加引用

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

index.jsp中的具体使用

${critc:getUserStatus(sysUser.status)}

很简单吧,而且可以重复使用。

4、SiteMesh中自定义Tag

实际开发中页面会有自定义的JS和CSS,这些JS和CSS需要按照格式要求放到指定位置,比如CSS放到header中,JS放到公共引用js的后面,这时候就需要自定义Tag了。

SiteMesh3.xml

 
    
        
        
    

增加这样两句话,自定义位置包括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) {
    }
}

这一段的代码非常简单,实现TagRuleBundle接口,增加一个Tag 规则即可,这里定义为critc-script

decorator.jsp

<%@include file="../common/scripts.jspf" %>

这里就和定位body和header一样,这句话就可以页面定义的javascript放到最后。

index.jsp


    

这里就和普通javascript定义一样,只不过在最外层包了一下,原理一看就明白了。

5、自定义操作成功界面和失败界面

每个按钮操作成功后,比如新增、修改,需要告诉用户操作成功了,然后跳转回原先界面。一版这种场景有以下几种方式:
1、alert以下或页面上方、下方弹出一个tip,提示操作成功了,然后列表页面刷新一下,常用于页面无刷新的架构,比如easyUI、ext等
2、跳转至成功页面,提示操作成功,3秒后返回列表页面,常用于互联网界面。
这里选择第二种方式。

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("用户信息新增成功");
    }

操作成功或失败,跳往对应界面,同时把操作结果,以msg的形式带过去了。

更好的方式是以代码或数字码的方式传过去,在SccessController或ErrorController再解析这些代码具体对应的中文是什么。

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;
    }
}

这一块代码很简单啊,就是获取msgbackUrl,并跳转success.jsp界面

success.jsp

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

    ${webTitle }-操作成功




${msg }

如果你的浏览器没有自动跳转,请点击此链接

具体效果

从零搭建项目开发框架-15用户管理界面设计与开发_第1张图片
具体效果.png

6、弹出框提示

从零搭建项目开发框架-15用户管理界面设计与开发_第2张图片
效果如图

在删除用户、锁定等操作时,一定要提示用户,这种情况下就需要提示框了。

bootbox.confirm("你确定要删除该用户吗?", function (result) {
                if (result) {
                    window.location = "delete.htm?id=" + id + "&backUrl=${backUrl}";
                }
            })

这里整合了bootbox,只需要一句话即可,还是很方便的。

7、SysUserSearchVO.java的作用域

写java代码的时候定义SysUserSearchVO这个类,用于获取查询条件,具体怎么用的呢,很多人会有疑问。

index请求方法

 /**
     * 进入用户管理界面
     *
     * @return
     */
    @RequestMapping("/index")
    public ModelAndView index(HttpServletRequest request, HttpServletResponse response, SysUserSearchVO sysUserSearchVO) {
        ModelAndView mv = new ModelAndView();
        int recordCount = sysUserService.count(sysUserSearchVO);// 获取查询总数
        String url = createUrl(sysUserSearchVO);
        PageNavigate pageNavigate = new PageNavigate(url, sysUserSearchVO.getPageIndex(), recordCount);//定义分页对象
        List list = sysUserService.list(sysUserSearchVO);
        mv.addObject("pageNavigate", pageNavigate);// 设置分页的变量
        mv.addObject("list", list);// 把获取的记录放到mv里面
        mv.addObject("listRole", sysRoleService.list());// 角色列表
        mv.setViewName("/plat/sys/user/index");// 跳转至指定页面
        BackUrlUtil.createBackUrl(mv, request, url);// 设置返回url
        return mv;
    }

这里面SysUserSearchVO作为一个参数,由SpringMVC自动进行参数的包装,就是说进入这个方法,SysUserSearchVO的各个参数都已经赋值了。

页面传值

 // 查询方法
        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,来实现的。包括分页的链接也都是这种写法。原理就是不管是查询还是分页,把所有参数都写到url的参数里面,这样不管怎么跳转,参数是不会变的。一定要牢记,页面查询一定不要用用form的post方法,这样分页就无法post了。

8、表单校验

这里表单校验用的是jquery-validator,用起来还是比较简单的。

引用jquery-validator

页面校验对应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", //数据发送方式
                        //dataType: "json", //接受数据格式
                        data: { //要传递的数据
                            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定义校验规则,比如长度、是否为空、email、数字、ajax异步校验等等。

提示信息

jquery-validator校验表单如果出错,默认是在该表单后面显示错误信息,但是ACE里面需要设置一个默认的div,来定位错误信息的输出。
生效代码是这一段

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

错误信息的标签用label,样式class是valiError,错误的位置是当前表单的id+Tip,比如当前表单的id是username,则错误提示的显示位置为usernameTip,所以在每个表单后面加了一句话

jquery-validator功能非常丰富,还可以ajax异步校验、自定义校验方法等等,可以参见网上的教程
http://www.cnblogs.com/linjiqin/p/3431835.html

9、查看登录历史

用户列表里面有一个链接,登录历史,点击该链接,弹出框,显示用户的登录历史。

这里需要利用ajax的post的方法,请求整个页面,加载进来放到bootstrap的model里面。
先看看具体代码实现:

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");
                            }
                        }
                    ]
                });
            });
        }

这是点击链接的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);// 获取查询总数
        String url = createUserLoginUrl(sysUserloginSearchVO);
        PageNavigate pageNavigate = new PageNavigate(url, sysUserloginSearchVO.getPageIndex(), recordCount);//
        List list = sysUserLoginService.list(sysUserloginSearchVO);
        mv.addObject("pageNavigate", pageNavigate);// 设置分页的变量
        mv.addObject("list", list);// 把获取的记录放到mv里面
        mv.setViewName("/plat/sys/user/login");// 跳转至指定页面
        return mv;
    }

这一块和普通的请求controller代码没什么两样。

login.jsp

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


    
暂无数据
# 登录时间 登录IP 终端 浏览器类型 浏览器版本
${st.index+1 } ${sysUserLogin.loginIp } ${sysUserLogin.terminal } ${sysUserLogin.explorerType } ${sysUserLogin.explorerVersion}

SiteMesh3.xml增加过滤项

searchUserLogin.htm这个请求是不需要被装饰的,所以需要过滤掉

    

查看登录历史效果


从零搭建项目开发框架-15用户管理界面设计与开发_第3张图片
效果.png

最终整体效果图如下:

从零搭建项目开发框架-15用户管理界面设计与开发_第4张图片
用户管理.png

注意:

这一块和java开发还不一样,需要掌握的技能点比较多,主要是ACE框架的使用,div、css、html等相关代码的编写都需要了解,不能把自己仅仅定位于写java代码,要全面发展,前端的技能也都要掌握,这样才能游刃有余!

源码下载

本阶段详细源码

你可能感兴趣的:(从零搭建项目开发框架-15用户管理界面设计与开发)