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

来源：互联网发布：qq远程控制不了软件编辑：程序博客网时间：2024/05/07 09:52

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。

[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>LayOut</title>  
<script src="http://localhost:8080/EasyProject/jquery.min.js"  
    type="text/javascript"></script>  
<script src="http://localhost:8080/EasyProject/jquery.easyui.min.js"  
    type="text/javascript"></script>  
<link href="http://localhost:8080/EasyProject/themes/default/easyui.css"  
    rel="stylesheet" type="text/css" />  
<link href="http://localhost:8080/EasyProject/themes/icon.css"  
    rel="stylesheet" type="text/css" />  
<script language="JavaScript">  
    function addTab(title, url) {  
        if ($('#home').tabs('exists', title)) {  
            $('#home').tabs('select', title);  
        } else {  
            var content = '<iframe scrolling="auto" frameborder="0" src="'  
                    + url + '" style="width:100%;height:100%;"></iframe>';  
            $('#home').tabs('add', {  
                title : title,  
                content : content,  
                closable : true  
            });  
        }  
    }  
  
    $(document).ready(function() {  
  
    });  
</script>  
<style>  
.footer {  
    width: 100%;  
    text-align: center;  
    line-height: 35px;  
}  
  
.top-bg {  
    background-color: #d8e4fe;  
    height: 80px;  
}  
</style>  
</head>  
  
<body class="easyui-layout">  
  
    <div region="north" border="true" split="true"  
        style="overflow: hidden; height: 80px;">  
        <div class="footer">  
            简单数据CRUD系统</a>  
        </div>  
    </div>  
  
    <div region="south" border="true" split="true"  
        style="overflow: hidden; height: 40px;">  
        <div class="footer">  
            版权所有：<a href="http://www.ewan.cn/">益玩平台</a>  
        </div>  
    </div>  
  
    <div region="west" split="true" title="功能菜单" style="width: 200px;">  
  
        <div id="aa" class="easyui-accordion"  
            style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">  
  
            <div title="查看数据" selected="true"  
                style="overflow: auto; padding: 10px;">  
                <ul class="easyui-tree">  
                    <li><a href="#" onclick="addTab('用户列表','list')">用户玩家</a></li>  
                </ul>  
            </div>  
  
            <div title="添加数据" style="padding: 10px;">  
                <ul class="easyui-tree">  
  
                    <li><a href="#" onclick="addTab('添加用户','add')">添加用户</a></li>  
  
  
                </ul>  
            </div>  
  
            <div title="删除数据" style="padding: 10px;">  
                <ul class="easyui-tree">  
  
                    <li><a href="#" onclick="addTab('删除用户','delete')">删除用户</a></li>  
  
  
                </ul>  
            </div>  
            <div title="修改数据" style="padding: 10px;">  
                <ul class="easyui-tree">  
  
                    <li><a href="#" onclick="addTab('修改用户','update')">修改用户</a></li>  
  
  
                </ul>  
            </div>  
  
        </div>  
    </div>  
    </div>  
  
    <div id="mainPanle" region="center" style="overflow: hidden;">  
  
        <div id="home" class="easyui-tabs" style="width: 1300px; height: 800px;">  
            <div title="Home">Hello,welcome to use this system.</div>  
        </div>  
    </div>  
</body>  
</html>  

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

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

[html] view plaincopy
<?xml version="1.0" encoding="UTF-8"?>  
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
   xmlns="http://java.sun.com/xml/ns/javaee"   
   xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
   http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"  
   id="WebApp_ID" version="3.0">  
     
   <display-name>Struts 2</display-name>  
   <welcome-file-list>  
      <welcome-file>/main/index.html</welcome-file>  
   </welcome-file-list>  
     
   <filter>  
      <filter-name>struts2</filter-name>  
      <filter-class>  
         org.apache.struts2.dispatcher.FilterDispatcher  
      </filter-class>  
   </filter>  
  
   <filter-mapping>  
      <filter-name>struts2</filter-name>  
      <url-pattern>/*</url-pattern>  
   </filter-mapping>  
</web-app>  

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

[html] view plaincopy
<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE struts PUBLIC  
   "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
   "http://struts.apache.org/dtds/struts-2.0.dtd">  
<struts>  
   <constant name="struts.devMode" value="true" />  
   <package name="helloworld" extends="struts-default">  
       
      <action name="*"   
            class="action.ControlAction"   
            method="{1}">  
            <result name="success">/main/{1}.jsp</result>  
      </action>  
   </package>  
</struts>  

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

ControlAction类：

[java] view plaincopy
public class ControlAction extends ActionSupport{     
    public String add(){  
        return "success";  
    }  
}  

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