5. GRUD--- NUTZ之MVC综合实例（html,ajax）
功能：
(1) 加载网页时，从数据库中提取所有资料，显示在网页中
(2) 在表格第二行输入资料，按新增，加把所录入资料添加到数据库中
(3) 在其他行的“年龄”中输入资料，按更新，加用所录入资料列新数据库。
(4) 在其他行按删除，将从数所库中删除相应资料
说明：本人使用的是netbean6.9.1,tomcat6.0.26,nutz 1.a.31
下面是网页界面截图：
最后附完整源码下载。。
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;
}
}
- 大小: 25.8 KB
分享到：
相关推荐
这篇博客“Nutz 例子，从mvc ioc 到数据插入”深入探讨了如何使用Nutz进行MVC架构设计、依赖注入以及数据库操作。 首先，让我们了解一下MVC模式。MVC是一种软件设计模式，将应用程序分为三个主要部分：模型（Model...
- 示例应用：可能会有一个简单的Web应用实例，展示NUTZ的MVC功能和数据库操作。 通过研究这些内容，你可以逐步了解NUTZ框架的工作原理，学习如何使用NUTZ创建自己的Java Web应用。NUTZ的文档和社区也非常活跃，遇到...
Nutz框架由一系列子项目组成，包括Nutz IOC（依赖注入）、Nutz DAO（数据访问对象）、Nutz MVC（模型视图控制器）等，涵盖了Web开发的多个层面，旨在简化开发流程，提高开发效率。 在"nutz框架使用手册.zip"中，...
在`main`函数中，通过`NutDao`实例可以直接进行数据库操作，如`insert()`、`delete()`、`update()`、`fetch()`和`query()`等，这些都是对传统SQL操作的封装，使得代码更加简洁易读。 要深入学习Nutz框架，建议阅读...
3. **数据库操作**：Nutz的Ioc容器和Dao模块提供了方便的数据访问接口，了解如何进行SQL查询、事务管理以及对象与数据表之间的映射。 4. **Web开发**：学习Nutz处理HTTP请求和响应的方式，包括路由配置、参数绑定、...
在Nutz中，我们可以使用`@IocBean`注解标记Service类，告诉Nutz框架这是一个需要被管理的对象。同时，通常还会使用`@Inject`注解来注入依赖，如DAO层的对象。 ```java @IocBean public class UserService { @...