5. GRUD--- NUTZ之MVC综合实例(html,ajax)
功能:
(1) 加载网页时,从数据库中提取所有资料,显示在网页中
(2) 在表格第二行输入资料,按新增,加把所录入资料添加到数据库中
(3) 在其他行的“年龄”中输入资料,按更新,加用所录入资料列新数据库。
(4) 在其他行按删除,将从数所库中删除相应资料
说明:本人使用的是netbean6.9.1,tomcat6.0.26,nutz 1.a.31
下面是网页界面截图:
[img]http://dl.iteye.com/upload/attachment/306898/55d808de-04ed-3181-ad25-36e197047944.jpg[/img]
最后附完整源码下载。。
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
#
5.1.2.3 下载nutz
http://code.google.com/p/nutz/downloads/list
5.2. 配置web.xml
完整代码:
5.3. html网页---ajax通讯,据备显示、添加、删除、更新操作
newhtml3.html全部源代码
5.4. 主模块文件----MainModule.java
位于源代码 根目录中。MainModule.java完整代码
5.6. Pojo----Man.java
Man.java源代码,省略了getter and setter
5.7. 子模块类----接受网页的命令,并完成对数据库的操作
HelloWorld.java完整源代码
功能:
(1) 加载网页时,从数据库中提取所有资料,显示在网页中
(2) 在表格第二行输入资料,按新增,加把所录入资料添加到数据库中
(3) 在其他行的“年龄”中输入资料,按更新,加用所录入资料列新数据库。
(4) 在其他行按删除,将从数所库中删除相应资料
说明:本人使用的是netbean6.9.1,tomcat6.0.26,nutz 1.a.31
下面是网页界面截图:
[img]http://dl.iteye.com/upload/attachment/306898/55d808de-04ed-3181-ad25-36e197047944.jpg[/img]
最后附完整源码下载。。
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> </td>");
strTbody.push("<td> </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> </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;
}
}