用Struts2和jQuery EasyUI实现简单CRUD系统（一）——基础环境搭建



用Struts2和jQuery EasyUI实现简单CRUD系统（一）——基础环境搭建。放羊式的管理其实挺好的，告诉我一个简单的目标是什么，需要用到什么东西，但不会给你任何搭好的框架和封装类，一切从零开始，从框架开始搭起，没学过的知识就是一边学一边现用。不懂就不停地查，最好看官方文档，例如看json的官网，就看到了json在github上的源代码，直接在eclipse中导入json的远程库，也体现了知识可以串联这个道理。

 

看了jQuery一些基础的语法，写了jQuery入门。

JQUERY语法语法 $(selector).action() $定义jquery selector 查找html元素 action 元素操作。最核心的东西。

 

接着上手jQuery EasyUI很快。周围的人简读为ejui。ejui基于jQuery框架，而jQuery又是javascript类库，所以名字这么长，也是js写的东西。

 

首先是界面布局，这样写完感觉还真像ExtJS：

 

要用到布局的东西，首先你要在EasyUI的官网下载包，然后把下面四个引用资源放入webcontent目录。由于用到struts跳转后的路径问题，还有现在不是jsp而是html，所以资源都用上了绝对路径。

总体布局分东西南北中。

 

onclick=”addTab(‘用户列表’,'list’)”，看addTab的代码，#home通过找到id为home的元素，如果不存在title的tab，新建。在center新建。

 

addTab(‘用户列表’,'list’)，list其实url，这时候就用到struts来控制跳转了。

 


index.html。

 

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  5. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
  6. <title>LayOut</title>
  7. <script src=”http://localhost:8080/EasyProject/jquery.min.js”
  8.     type=”text/javascript”></script>
  9. <script src=”http://localhost:8080/EasyProject/jquery.easyui.min.js”
  10.     type=”text/javascript”></script>
  11. <link href=”http://localhost:8080/EasyProject/themes/default/easyui.css”
  12.     rel=”stylesheet” type=”text/css” />
  13. <link href=”http://localhost:8080/EasyProject/themes/icon.css”
  14.     rel=”stylesheet” type=”text/css” />
  15. <script language=”JavaScript”>
  16.     function addTab(title, url) {
  17.         if ($(‘#home’).tabs(‘exists’, title)) {
  18.             $(‘#home’).tabs(‘select’, title);
  19.         } else {
  20.             var content = ’<iframe scrolling=”auto” frameborder=”0″ src=”‘
  21.                     + url + ’” style=”width:100%;height:100%;”></iframe>’;
  22.             $(‘#home’).tabs(‘add’, {
  23.                 title : title,
  24.                 content : content,
  25.                 closable : true
  26.             });
  27.         }
  28.     }
  30.     $(document).ready(function() {
  32.     });
  33. </script>
  34. <style>
  35. .footer {
  36.     width: 100%;
  37.     text-align: center;
  38.     line-height: 35px;
  39. }
  41. .top-bg {
  42.     background-color: #d8e4fe;
  43.     height: 80px;
  44. }
  45. </style>
  46. </head>
  48. <body class=”easyui-layout”>
  50.     <div region=”north” border=”true” split=”true”
  51.         style=”overflow: hidden; height: 80px;”>
  52.         <div class=”footer”>
  53.             简单数据CRUD系统</a>
  54.         </div>
  55.     </div>
  57.     <div region=”south” border=”true” split=”true”
  58.         style=”overflow: hidden; height: 40px;”>
  59.         <div class=”footer”>
  60.             版权所有：<a href=”http://www.ewan.cn/”>益玩平台</a>
  61.         </div>
  62.     </div>
  64.     <div region=”west” split=”true” title=”功能菜单” style=”width: 200px;”>
  66.         <div id=”aa” class=”easyui-accordion”
  67.             style=”position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;”>
  69.             <div title=”查看数据” selected=”true”
  70.                 style=”overflow: auto; padding: 10px;”>
  71.                 <ul class=”easyui-tree”>
  72.                     <li><a href=”#” onclick=”addTab(‘用户列表’,'list’)”>用户玩家</a></li>
  73.                 </ul>
  74.             </div>
  76.             <div title=”添加数据” style=”padding: 10px;”>
  77.                 <ul class=”easyui-tree”>
  79.                     <li><a href=”#” onclick=”addTab(‘添加用户’,'add’)”>添加用户</a></li>
  82.                 </ul>
  83.             </div>
  85.             <div title=”删除数据” style=”padding: 10px;”>
  86.                 <ul class=”easyui-tree”>
  88.                     <li><a href=”#” onclick=”addTab(‘删除用户’,'delete’)”>删除用户</a></li>
  91.                 </ul>
  92.             </div>
  93.             <div title=”修改数据” style=”padding: 10px;”>
  94.                 <ul class=”easyui-tree”>
  96.                     <li><a href=”#” onclick=”addTab(‘修改用户’,'update’)”>修改用户</a></li>
  99.                 </ul>
  100.             </div>
  102.         </div>
  103.     </div>
  104.     </div>
  106.     <div id=”mainPanle” region=”center” style=”overflow: hidden;”>
  108.         <div id=”home” class=”easyui-tabs” style=”width: 1300px; height: 800px;”>
  109.             <div title=”Home”>Hello,welcome to use this system.</div>
  110.         </div>
  111.     </div>
  112. </body>
  113. </html>

struts，从零开始，下jar包，配置。

 

WEB-INF目录添加web.xml文件。忘记配置的时候要想想，url地址访问他会去根据action的东西去访问。那tomcat怎么知道我这些访问要通过struts过滤呢。这就需要web.xml了。

 

  1. <?xml version=”1.0″ encoding=”UTF-8″?>
  2. <web-app xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
  3.    xmlns=”http://java.sun.com/xml/ns/javaee”
  4.    xmlns:web=”http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd”
  5.    xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee
  6.    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd”
  7.    id=”WebApp_ID” version=”3.0″>
  9.    <display-name>Struts 2</display-name>
  10.    <welcome-file-list>
  11.       <welcome-file>/main/index.html</welcome-file>
  12.    </welcome-file-list>
  14.    <filter>
  15.       <filter-name>struts2</filter-name>
  16.       <filter-class>
  17.          org.apache.struts2.dispatcher.FilterDispatcher
  18.       </filter-class>
  19.    </filter>
  21.    <filter-mapping>
  22.       <filter-name>struts2</filter-name>
  23.       <url-pattern>/*</url-pattern>
  24.    </filter-mapping>
  25. </web-app>

然后就是struts本身的配置了——struts.xml根据不同的action进行跳转。丢在src目录里面。

 

 

  1. <?xml version=”1.0″ encoding=”UTF-8″?>
  2. <!DOCTYPE struts PUBLIC
  3.    ”-//Apache Software Foundation//DTD Struts Configuration 2.0//EN”
  4.    ”http://struts.apache.org/dtds/struts-2.0.dtd”>
  5. <struts>
  6.    <constant name=”struts.devMode” value=”true” />
  7.    <package name=”helloworld” extends=”struts-default”>
  9.       <action name=”*”
  10.             class=”action.ControlAction”
  11.             method=”{1}”>
  12.             <result name=”success”>/main/{1}.jsp</result>
  13.       </action>
  14.    </package>
  15. </struts>

直接用通配符跳转。规范好就可以了。

 

 

ControlAction类：

 

  1. public class ControlAction extends ActionSupport{
  2.     public String add(){
  3.         return ”success”;
  4.     }
  5. }

 

这样一个简单的环境就完成了，接下来会用json处理数据库数据并进一步输出到EasyUI的DataGrid中。