nutz简单综合实例----通过html网页对数据库进行管理操作（MVC,Ioc,Dao)

程序员文章站 2022-05-30 23:13:58

...

5. GRUD--- NUTZ之MVC综合实例（html,ajax）
功能：
    (1) 加载网页时，从数据库中提取所有资料，显示在网页中
    (2) 在表格第二行输入资料，按新增，加把所录入资料添加到数据库中
    (3) 在其他行的“年龄”中输入资料，按更新，加用所录入资料列新数据库。
    (4) 在其他行按删除，将从数所库中删除相应资料
说明：本人使用的是netbean6.9.1,tomcat6.0.26,nutz 1.a.31

下面是网页界面截图：
nutz简单综合实例----通过html网页对数据库进行管理操作（MVC,Ioc,Dao)

博客分类： nutz DAOIOCMVCHTML配置管理

nutz简单综合实例----通过html网页对数据库进行管理操作（MVC,Ioc,Dao)

博客分类： nutz DAOIOCMVCHTML配置管理

最后附完整源码下载。。

5.1. 准备工作

5.1.1. 安装好mysql，在mydb数据库中，创建一个表t_man
CREATE TABLE `t_man` (
`name` varchar(45) NOT NULL DEFAULT '',
`age` varchar(45) NOT NULL DEFAULT '""',
PRIMARY KEY (`name`)
)

5.1.2. 下载数据源所需要的包，并引用到工程中去

5.1.2.1 配置dbcp所用的包：commons pool、commons-collections.jar
http://commons.apache.org/dbcp/download_dbcp.cgi
http://commons.apache.org/pool/download_pool.cgi
http://commons.apache.org/collections/download_collections.cgi

注：有的需要mysql驱动
http://mysql.cs.pu.edu.tw/Downloads/Connector-J/mysql-connector-java-5.1.6.zip
nutz好像可以不要，但是在配spring security3时，却需要，郁闷

5.1.2.2 下载log4j----便于调试dao
下载地址http://logging.apache.org/log4j/1.2/download.html
log4j的配置文件log4j.properties
#

可以设置级别：debug>info>error
#debug：显示debug、info、error
#info：显示info、error
#error：只error
log4j.rootLogger=debug,appender1
#log4j.rootLogger=info,appender1  
#log4j.rootLogger=error,appender1

#输出到控制台
log4j.appender.appender1=org.apache.log4j.ConsoleAppender
#样式为TTCCLayout
log4j.appender.appender1.layout=org.apache.log4j.TTCCLayout

5.1.2.3 下载nutz
http://code.google.com/p/nutz/downloads/list

5.2. 配置web.xml
完整代码：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
   <filter>
		<filter-name>nutz</filter-name>
		<filter-class>org.nutz.mvc.NutFilter</filter-class>
		<init-param>
			<param-name>modules</param-name>
			<param-value>MainModule</param-value>
		</init-param>
	</filter>

	<filter-mapping>
		<filter-name>nutz</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

5.3. html网页---ajax通讯，据备显示、添加、删除、更新操作
newhtml3.html全部源代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script language="JavaScript">
        //ajax方式，与nutz通讯
        var xmlHttp=false;
        try {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
        try {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) {
            xmlHttp=false;
        }
        }
        if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
            xmlHttp=new XMLHttpRequest();
        }

        function init() {
            
            var url="display";
            xmlHttp.open("POST",url,true);//提交数据
            xmlHttp.onreadystatechange=function(){//服务器返回状态
                //服务成功接收并受回数据
                if(xmlHttp.readyState==4){
                    eval("json=" + xmlHttp.responseText + ";");
                    eval("json=" + json + ";");
                    var len=json.length;

                    //动态创建表
                    var strTbody = ["<table border='1'><tbody>"];//定义数组
                    strTbody.push("<tr>");
                    strTbody.push("<td>姓名</td>");
                    strTbody.push("<td>年龄</td>");
                    strTbody.push("<td>&nbsp;</td>");
                    strTbody.push("<td>&nbsp;</td>");
                    strTbody.push("</tr>");

                    strTbody.push("<tr>");
                    strTbody.push("<td><input name='bs1' type='text'  ></td>");
                    strTbody.push("<td><input name='bs1' type='text'  ></td>");
                    strTbody.push("<td><input name='add' type='button' id='add' value='增加' onClick='addLine(this)'></td>");
                    strTbody.push("<td>&nbsp;</td>");
                    strTbody.push("</tr>");
                    
                    for (var i=0;i<json.length;i++){
                        strTbody.push("<tr>");

                        strTbody.push("<td><input name='bs1' type='text' value='"+json[i].name+"' ></td>");
                        strTbody.push("<td><input name='bs2' type='text' value='"+json[i].age+"' ></td>");
                        strTbody.push("<td>");
                        strTbody.push("<input name='add' type='button' id='add' value='更新' onClick='updata(this)'>");
                        strTbody.push("</td>");
                        strTbody.push("<td>");
                        strTbody.push("<input name='delete' type='button' id='delete' value='删除' onClick='deldata(this)'>");
                        strTbody.push("</td>");

                        strTbody.push("</tr>");

                    }
                    strTbody.push("</tbody></table>");
                    var obj = document.getElementById("tableDiv");
                    obj.innerHTML = strTbody.join("");
                    
                   
                }
            }
            xmlHttp.send(null);
        }

        function addLine(obj){
            var objSourceRow=obj.parentNode.parentNode;
            var objTable=obj.parentNode.parentNode.parentNode.parentNode;
            var row_num=objTable.rows.length;
            var cell_num=objTable.rows[0].cells.length;
            var objRow=objTable.insertRow(row_num);

            var str="?name="+objSourceRow.cells[0].firstChild.value+"";
            str+="&age="+objSourceRow.cells[1].firstChild.value+"";
          
            var url="insert"+str;
            xmlHttp.open("POST",url,true);//提交数据
            xmlHttp.onreadystatechange=function(){//服务器返回状态
                //服务成功接收并返回数据
                if(xmlHttp.readyState==4){
                   init();
                   alert(xmlHttp.responseText);
                }
            }
            xmlHttp.send(null);
        }
        function updata(obj){
            var objSourceRow=obj.parentNode.parentNode;
            var objTable=obj.parentNode.parentNode.parentNode.parentNode;
            var row_num=objTable.rows.length;
            var cell_num=objTable.rows[0].cells.length;
            
            var str="?name="+objSourceRow.cells[0].firstChild.value+"";
            str+="&age="+objSourceRow.cells[1].firstChild.value+"";

            var url="update"+str;
            xmlHttp.open("POST",url,true);//提交数据
            xmlHttp.onreadystatechange=function(){//服务器返回状态
                //服务成功接收并返回数据
                if(xmlHttp.readyState==4){
                   init();
                   alert(xmlHttp.responseText);
                }
            }
            xmlHttp.send(null);
        }
        function deldata(obj){
            var objSourceRow=obj.parentNode.parentNode;
            var objTable=obj.parentNode.parentNode.parentNode.parentNode;
            var row_num=objTable.rows.length;
            var cell_num=objTable.rows[0].cells.length;

            var str="?name="+objSourceRow.cells[0].firstChild.value+"";
            str+="&age="+objSourceRow.cells[1].firstChild.value+"";

            var url="delete"+str;
            xmlHttp.open("POST",url,true);//提交数据
            xmlHttp.onreadystatechange=function(){//服务器返回状态
                //服务成功接收并返回数据
                if(xmlHttp.readyState==4){
                   init();
                   alert(xmlHttp.responseText);
                }
            }
            xmlHttp.send(null);
        }
        //-->
    </script>
  </head>
  <body onload="init();">
    <div id="tableDiv"></div>
  </body>
</html>

5.4. 主模块文件----MainModule.java
位于源代码根目录中。MainModule.java完整代码

import org.nutz.mvc.adaptor.PairAdaptor;
import org.nutz.mvc.annotation.*;
import org.nutz.mvc.ioc.provider.JsonIocProvider;

 @Modules({HelloWorld.class})
 @Fail("json")
@IocBy(type=JsonIocProvider.class, args={"dataSource.js"})
public class MainModule {}

5.5.	数据源配置文件(使用nutz的ioc)--- dataSource.js,
位于源代码根目录中，即与MainModule.java同一位置。在MainModule中调用，
在HelloWorld中通过Ioc按配置使用dataSource。

dataSource.js完整源代码
var ioc={
    dataSource : {
        type :"org.apache.commons.dbcp.BasicDataSource",
        events:{
            depose:'close'
        },
        fields : {
            driverClassName:'com.mysql.jdbc.Driver',
            url:'jdbc:mysql://localhost:3306/mydb',
            username:'root',
            password:'123'
        }
    }
}

5.6. Pojo----Man.java
Man.java源代码,省略了getter and setter

import org.nutz.dao.entity.annotation.Column;
import org.nutz.dao.entity.annotation.Name;
import org.nutz.dao.entity.annotation.Table;

@Table("t_man")   // 声明了Man对象的数据表
public class Man {
    
    public Man() {}
    
    @Column
    @Name    // 表示该字段可以用来标识此对象，或者是字符型主键，或者是唯一性约束
    private String name;
    @Column
    private String age;
    //省略了getter and setter 
}

5.7. 子模块类----接受网页的命令，并完成对数据库的操作
HelloWorld.java完整源代码

import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbcp.BasicDataSource;
import org.apache.log4j.Logger;
import org.nutz.dao.Dao;
import org.nutz.dao.impl.NutDao;
import org.nutz.ioc.Ioc;
import org.nutz.json.Json;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;
import org.nutz.mvc.annotation.Param;

 @Ok("json")
public class HelloWorld {
         private static Logger logger = Logger.getLogger(HelloWorld.class);
        @At("/display")
        public String diplay(
                    Ioc ioc) throws SQLException {
            BasicDataSource ds = ioc.get(BasicDataSource.class,"dataSource");          
            Dao dao = new NutDao(ds);
            Man p = new Man();
            List<Man> list=dao.query(Man.class, null, null);

            String str=Json.toJson(list);
            return str;
        }

        @At("/insert")
        public String insert(@Param("name") String name,
                 @Param("age") String age,
                    Ioc ioc) throws SQLException {
            BasicDataSource ds = ioc.get(BasicDataSource.class,"dataSource");
            
            Dao dao = new NutDao(ds);
            Man p =new Man();
            p.setName(name);
            p.setAge(age);

            dao.insert(p);
//            logger.debug(dao.update(p));
            String str="sucess:'ok'";
            return str;
        }

        @At("/update")
        public String update(@Param("name") String name,
                 @Param("age") String age,
                    Ioc ioc) throws SQLException {
            BasicDataSource ds = ioc.get(BasicDataSource.class,"dataSource");

           
            Dao dao = new NutDao(ds);
            Man p =new Man();
            p.setName(name);
            p.setAge(age);

           // dao.update(p);
            logger.debug(dao.update(p));
            String str="sucess:'ok'";
            return str;
        }

        @At("/delete")
        public String delete(@Param("name") String name,
                 @Param("age") String age,
                    Ioc ioc) throws SQLException {
            BasicDataSource ds = ioc.get(BasicDataSource.class,"dataSource");
            
            Dao dao = new NutDao(ds);
            Man p =new Man();
            p.setName(name);
            p.setAge(age);

            dao.delete(p);
//          logger.debug(dao.update(p));
            String str="sucess:'ok'";
            return str;
        }
}

helloNutz2.rar (6.9 MB)
下载次数: 749

查看图片附件

上一篇： java 之异步套接字编程实例（AIO)

下一篇： nutz 过滤器使用例子