在Spring中通过EasyUI的dialog创建登录界面

最新推荐文章于 2021-09-25 19:39:50 发布

RED-GO

最新推荐文章于 2021-09-25 19:39:50 发布

阅读量1.7k

点赞数

分类专栏： --------【JAVA Web】文章标签： EasyUI Spring JSON

本文链接：https://blog.csdn.net/u010137431/article/details/46462409

版权

--------【JAVA Web】专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这里写图片描述

准备工作

EasyUI相关文件都放在WebContent下
将一些必要的Link ，script统一放在一个jsp中，给其他jsp来include

java
<script type="text/javascript" src="${pageContext.request.contextPath}/EasyUI/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/EasyUI/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/EasyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/EasyUI/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/EasyUI/locale/easyui-lang-zh_CN.js"></script>

后台需要的Util

JSONUtils

将java类转为json数据格式

java

public abstract class JSONUtils {

    private static ObjectMapper objectMapper = new ObjectMapper();

    static {

        // 设置日期格式化
        objectMapper.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
        // 设置null不序列化
        objectMapper.setSerializationInclusion(Include.NON_NULL);
    }

    private JSONUtils() {

    }

    public static void writeValue(OutputStream out, Object value) {
        try {
            objectMapper.writeValue(out, value);
        } catch (Exception e) {
            throw new RuntimeException(e.toString(), e);
        }
    }

    public static void writeValue(Writer w, Object value) {
        try {
            objectMapper.writeValue(w, value);
        } catch (Exception e) {
            throw new RuntimeException(e.toString(), e);
        }
    }

    public static String writeValueAsString(Object arg0) {
        try {
            return objectMapper.writeValueAsString(arg0);
        } catch (Exception e) {
            throw new RuntimeException(e.toString(), e);
        }
    }
}

HTMLUtils

将json数据通过response中的writer流输出，返回给Ajax

java
public class HTMLUtils {
    public static void writeJosn(HttpServletResponse response,String jsonStr){

        try {

            response.setContentType("text/html");
            response.setHeader("Pragma", "No-cache");//设置页面不缓存
            response.setHeader("Cache-Control", "no-cache");
            response.setCharacterEncoding("UTF-8");
            PrintWriter out= response.getWriter(); //获取流
            out.print(jsonStr);
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

前台

java
<jsp:include page="/include/include.jsp"/>

<script type="text/javascript">
$(function(){
    $("#dig").dialog({
        title:"login",
        modal:true,  //是否将窗体显示为模式化窗口
        collapsible:true, //是否显示可折叠按钮
        minimizable:true, //是否显示最小化按钮
        buttons:[{
            text:"login",
            handler:function(){
                $.ajax({
                    url:"<%=request.getContextPath()%>/login.do",
                    type:"post",
                    data:$("#loginForm").serialize(),
                    dataType:"json",
                    success:function(data){
                        alert("success"+data.msg);
                        if(data.msg=="登录成功"){
                            $("#dig").dialog("close");
                        }
                    },
                    error:function(data){
                        alert("error"+data.msg);
                    }
                })
            }
        }]
    });
})
</script>

<body>
    <div id="dig" style="width:320px;height:180px">
        <form id="loginForm">
            <table>
                <tr>
                    <td>用户名：</td><td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>密码：</td><td><input type="password" name="pwd"></td>
                </tr>
            </table>
        </form>
    </div>
</body>

后台

java

@Controller
public class TestHello  {

    @RequestMapping("/login")
    public void login(String username,String pwd, HttpServletResponse response){
        System.out.println(username);
        System.out.println(pwd);
        Map<String,String> map = new HashMap<String,String>();
        map.put("msg","登录成功");
        String json = JSONUtils.writeValueAsString(map);  //map对象转为json对象  
        HTMLUtils.writeJosn(response, json);
    }

}