etmvc+jQuery EasyUI使用教程（一）

来源：互联网发布：2016黄石房地产数据编辑：程序博客网时间：2024/05/25 19:59

最近接到的一个紧急任务，给一个小单位开发一个会员信息管理系统，其实需求什么都已经做得差不多了，就差开发了，最关键问题是对方要求使用JAVA，理由是服务器系统是Linux，容器是Tomcat，还要求界面好看，对于我个人而言，JAVA已经很陌生了，界面好看意味着富客户端的大量JS，思前想后找了一个etmvc+jQuery EasyUI的组合，有人说为什么不用SSH之类的，在此我只能说我有我的理由！

其他的暂且不说，最近我用这套组合做开发，也是边学习边开发，边和大家共享一下学习的过程，有需要的可以参考一下，我会坚持更新到我一直做完这个项目为止！

开发环境：XP系统、eclipse 4.2、MySQL Server 5.5、Tomcat v6.0

这一章先来学习如何上手etmvc。

1、先是下载etmvc

下载地址：http://code.google.com/p/etmvc/downloads/list

2、在eclipse新建一个web project，名字叫myDemo

3、把以下几个包导入项目/WEB-INF/lib中

4、都进去后的项目目录如下

5、配置WEB-INF/web.xml，加入过滤器

  <filter>  <filter-name>etmvc</filter-name>  <filter-class>com.et.mvc.DispatcherFilter</filter-class>  <init-param>  <param-name>controllerBasePackage</param-name>  <param-value>controllers</param-value>  </init-param>  <init-param>  <param-name>viewBasePath</param-name>  <param-value>/views</param-value>  </init-param>  </filter>  <filter-mapping>  <filter-name>etmvc</filter-name>  <url-pattern>/*</url-pattern>  </filter-mapping>

6、在src下追加controllers和models包，在WebContent下追加views目录

7、编写ApplicationController

package controllers;import com.et.mvc.Controller;public class ApplicationController extends Controller{}

8、编写HelloController继承ApplicationController

package controllers;import com.et.mvc.TextView;public class HelloController extends ApplicationController {public TextView say() {return new TextView("hello,world");}}

9、调试运行

10、显示

11、访问：http://localhost:8080/myDemo/hello/say

12、目前为止helloworld已经成功了，接下来再进一步学习，追加一个UserController

package controllers;public class UserController extends ApplicationController {public void login() {}public String handleLogin(String username, String password)throws Exception {return "你输入的用户：" + username + "密码：" + password;}}

13、在views目录下追加user目录，在里面添加一个login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!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><form action="/myDemo/user/handleLogin" method="POST">      <p>用户名：<input type="text" name="username"></p>      <p>密码：<input type="password" name="password"></p>      <p><input type="submit" value="提交"></p>  </form>  </body></html>

14、调试运行，访问：http://localhost:8080/myDemo/user/login

15、填写完内容，点击提交

16、至此第二个例子成功，接下来再在UserController里追加下面的方法并导入对应的包

package controllers;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;//import models.User;import com.et.mvc.JsonView;import com.et.mvc.View;import com.et.mvc.JspView;public class UserController extends ApplicationController {public void login() {}public String handleLogin(String username, String password)throws Exception {return "你输入的用户：" + username + "密码：" + password;}//返回void时将使用JSP视图//返回String时将字符串直接输出至浏览器//返回View或其子类时将使用对应的视图public void test1() {request.setAttribute("hello", "hello,test1");}public String test2() {return "hello,test2";}public JspView test3() {JspView view = new JspView();view.setAttribute("hello", "hello,test3");return view;}public JspView test4() {JspView view = new JspView("/common/other.jsp");view.setAttribute("hello", "hello,test4");return view;}public JsonView test5() {Map<String, Object> result = new HashMap<String, Object>();result.put("success", true);result.put("msg", "hello,test5");JsonView view = new JsonView(result);view.setContentType("text/html;charset=utf-8");// 允许指定ContentTypereturn view;}}

17、然后添加对应的视图

user/test1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!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>test1</title></head><body><h1>test1!</h1>  <p>${hello}</p>  </body></html>

user/test3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!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>test3</title></head><body><h1>test3!</h1>  <p>${hello}</p>  </body></html>

common/other.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!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>other</title></head><body><h1>test4!</h1>  <p>${hello}</p> </body></html>

18、运行后，分别访问对应的地址

这一章先介绍到这，下一章将学习etmvc中访问数据库的事了！