您的位置:首页 > 产品设计 > UI/UE

easyui搭建第三课

2015-06-10 23:59 477 查看

easyui搭建第三课

1.增加jstl的jar包依赖:

        <!-- 引入jstl -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>


2.增加jrebel的使用:jrebel实现项目热部署,
2.1 eclipse下载jrebel部署插件:http://update.zeroturnaround.com/update-site-archive/update-site-6.0.3.RELEASE/
2.2 到官网注册激活:http://www.zeroturnaround.com/,,不过只能激活几天。网上还有各种破解版,请自行学习吧。
2.3 maven中加入jrebel的支持:(经测试发现根本不行。。。)

<!-- jerebel maven 插件,用于生成jrebel.xml -->
<plugin>
<groupId>org.zeroturnaround</groupId>
<artifactId>jrebel-maven-plugin</artifactId>
<version>1.1.5</version>
<executions>
<execution>
<id>generate-rebel-xml</id>
<phase>process-resources</phase>
<goals>
<goal>generate</goal>
</goals>
</execution>
</executions>
<configuration>
<rebelXmlDirectory>${basedir}/src/main/webapp/WEB-INF/classes</rebelXmlDirectory>
<!-- 指定生成的jrebel.xml放在哪里, 要求放在web应用的 classpath下 -->
</configuration>
</plugin>


3.重构之前的登录注册页面:

3.1 index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html >
<html>
<title>首页</title>
<script type="text/javascript" src="jslib/jquery-easyui-1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jslib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jslib/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="jslib/syExtEasyUI.js"></script>
<link rel="stylesheet" href="jslib/jquery-easyui-1.4.2/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="jslib/jquery-easyui-1.4.2/themes/icon.css" type="text/css"></link>
<script type="text/javascript">

</script>
<body class="easyui-layout">
<div data-options="region:'north',title:'欢迎访问该系统',split:true" style="height: 100px;"></div>
<div data-options="region:'south',split:true" style="height: 25px;"></div>
<div data-options="region:'east',title:'East',split:true" style="width: 100px;"></div>
<div data-options="region:'west',split:true" style="width: 100px;">
<div class="easyui-panel" data-options="title:'luckyssmm系统',border:false, fit:true"></div>
</div>
<div data-options="region:'center',title:'center title'" style="padding: 5px; background: #eee;"></div>

<jsp:include page="user/login.jsp"></jsp:include>
<jsp:include page="user/reg.jsp"></jsp:include>

</body>
</html>


3.2 user/login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
$(function() {
$('#user_reg_loginDialog').dialog({
title : '登录',
modal : true,
closable : false,
buttons : [ {
text : '注册',
iconCls : 'icon-edit',
handler : function() {
$('#user_reg_regForm input').val('');
$('#user_reg_regDialog').dialog('open');
}
}, {
text : '登录',
iconCls : 'icon-help',
handler : function() {
var result1 = {
'name' : 'jack',
'age' : '23',
'work' : 'IT'
};
var r = eval(result1);
console.info(r);
}
} ]
});
});
</script>
<div id="user_reg_loginDialog" class="easyui-dialog">
<table>
<tr>
<th>登录名</th>
<td><input></td>
</tr>
<tr>
<th>密码</th>
<td><input></td>
</tr>
</table>
</div>


3.3 user/reg.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
$(function() {
$('#user_reg_regDialog').dialog({
title : '登录',
modal : true,
// 			closed : true,
buttons : [ {
text : '注册',
iconCls : 'icon-edit',
handler : function() {
regUser();
}
} ]
}).dialog('close');
});
function regUser() {
if ($('#user_reg_regForm').form('validate')) {
$.ajax({
url : '${pageContext.request.contextPath}/userController/reg.do',
data : $('#user_reg_regForm').serialize(),
dataType : 'json',
success : function(data, textStatus, jqXHR) {
var $data = data;//$.parseJSON(data);
console.info($data.success);
console.info($data.message);
if ($data.success) {
$('#user_reg_regDialog').dialog('close');
}
$.messager.show({
title : '提示',
msg : $data.message,
timeout : 5000,
showType : 'slide'
});
}
});
}
}
</script>
<div id="user_reg_regDialog">
<form id="user_reg_regForm" method="post">
<table>
<tr>
<th>登录名</th>
<td><input name="name" class="easyui-validatebox" data-options="required:true,missingMessage:'*登录名称必填'"></td>
</tr>
<tr>
<th>密码</th>
<td><input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true"></td>
</tr>
<tr>
<th>重复密码</th>
<td><input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" data-options="required:true, validType:'eqPwd[\'#pwd\']'"></td>
</tr>
</table>
</form>
</div>


4.重写controller层。

4.1 抽象出一个父类controller...

实现公用的方法等,,,暂时将JSON回写抽出,,其他后续完成。。

package lucky.ssmm.common.controller;

import com.alibaba.fastjson.JSON;

public class BaseController {

public String writeJson(Object object) {
String json = JSON.toJSONStringWithDateFormat(object, "yyyy-MM-dd HH:mm:ss");
return json;
}
}


4.2 controller层前台参数接入实现方法:

4.2.1 通过request实现:

    @RequestMapping(value = "/reg", method = { RequestMethod.POST, RequestMethod.GET })
    @ResponseBody
    public String reg(HttpServletRequest request, HttpServletResponse response) {
        String name = request.getParameter("name");
        String pwd = request.getParameter("pwd");
        Map<String, Object> result = new HashMap<String, Object>();
        User user = new User();
        user.setId(UUID.randomUUID().toString());
        user.setName(name);
        user.setLoginName(name);
        user.setPassword(pwd);
        try {
            // userService.insert(user);
            result.put("success", true);
            result.put("message", "注册成功!");

        } catch (Exception e) {
            e.printStackTrace();
            logger.info("注册失败" + e.getMessage());
            result.put("success", false);
            result.put("message", "注册失败!");
        }
        request.setAttribute("user", user);
        logger.info(writeJson(user));
        return writeJson(result);
    }
4.2.2 Spring会自动将表单参数注入到方法参数,和表单的name属性保持一致。和Struts2一样

注;// 表单属性是pwd,用变量password接收

@RequestMapping(value = "/reg", method = { RequestMethod.POST, RequestMethod.GET })
@ResponseBody
public String reg(String name, @RequestParam("pwd") String password, HttpServletRequest request,
HttpServletResponse response) {
Map<String, Object> result = new HashMap<String, Object>();
User user = new User();
user.setId(UUID.randomUUID().toString());
user.setName(name);
user.setLoginName(name);
user.setPassword(password);
try {
// userService.insert(user);
result.put("success", true);
result.put("message", "注册成功!");

} catch (Exception e) {
e.printStackTrace();
logger.info("注册失败" + e.getMessage());
result.put("success", false);
result.put("message", "注册失败!");
}
request.setAttribute("user", user);
logger.info(writeJson(user));
return writeJson(result);
}
}


4.2.3自动注入Bean属性

如下User为Mybatis自动生成的实体类。。

@RequestMapping(value = "/reg", method = { RequestMethod.POST, RequestMethod.GET })
@ResponseBody
public String reg(User user, HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> result = new HashMap<String, Object>();
User cuser = new User();
cuser.setId(UUID.randomUUID().toString());
cuser.setName(user.getName());
cuser.setLoginName(user.getName());
cuser.setPassword(user.getPassword());
try {
// userService.insert(cuser);
result.put("success", true);
result.put("message", "注册成功!");

} catch (Exception e) {
e.printStackTrace();
logger.info("注册失败" + e.getMessage());
result.put("success", false);
result.put("message", "注册失败!");
}
request.setAttribute("user", user);
logger.info(writeJson(user));
return writeJson(result);
}


4.3 向页面传值:该部分参考:(点击打开链接

当Controller组件处理后,向jsp页面传值,

1,使用HttpServletRequest 和 Session 然后setAttribute(),就和Servlet中一样

2,使用ModelAndView对象

3,使用ModelMap对象

4,使用@ModelAttribute注解

Model数据会利用HttpServletRequest的Attribute传值到success.jsp中

@RequestMapping("/login.do")
public ModelAndView  login(String name,String pass){
User user = userService.login(name,pwd);
Map<String,Object> data = new HashMap<String,Object>();
data.put("user",user);
return new ModelAndView("success",data);
}


使用ModelMap参数对象示例:

ModelMap数据会利用HttpServletRequest的Attribute传值到success.jsp中
@RequestMapping("/login.do")
public String login(String name,String pass ,ModelMap model){
User user  = userService.login(name,pwd);
model.addAttribute("user",user);
model.put("name",name);
return "success";
}


使用@ModelAttribute示例

在Controller方法的参数部分或Bean属性方法上使用

@ModelAttribute数据会利用HttpServletRequest的Attribute传值到success.jsp中
@RequestMapping("/login.do")
public String login(@ModelAttribute("user") User user){
//TODO
return "success";
}

@ModelAttribute("name")
public String getName(){
return name;
}


Session存储:

可以利用HttpServletReequest的getSession()方法
@RequestMapping("/login.do")
public String login(String name,String pwd
ModelMap model,HttpServletRequest request){
User user = serService.login(name,pwd);
HttpSession session = request.getSession();
session.setAttribute("user",user);
model.addAttribute("user",user);
return "success";
}


Spring MVC 默认采用的是转发来定位视图,如果要使用重定向,可以如下操作

1,使用RedirectView

2,使用redirect:前缀
public ModelAndView login(){
RedirectView view = new RedirectView("regirst.do");
return new ModelAndView(view);
}


或者用如下方法,工作中常用的方法:
public String login(){
//TODO
return "redirect:regirst.do";
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: