JSON数据交换

案例 1：项目框架搭建

1.1. 项目结构图

1.2. 步骤

1.2.1. 创建动态 web 工程

1.2.2. 定义在 web.xml

1.  添加 spring  监听 器 ， 用 来 加载 载 applicationContext.xml

<!-- 加载spring容器 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

</listener>

2.  添加 springmvc

<!-- springmvc的前端控制器 -->

<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc-config.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>

1.2.3. 定义 springmvc-config.xml

<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.3.xsd">
<!-- 定义组件扫描器，指定需要扫描的包 -->
<context:component-scan base-package="cn.icloudit.web.controller" />
<!-- 配置注解驱动 -->
<mvc:annotation-driven />
<!--配置静态资源的访问映射，此配置中的文件，将不被前端控制器拦截 -->
<mvc:resources location="/js/" mapping="/js/**" />
<!-- 配置视图解析器 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">

<property name="prefix" value="/WEB-INF/jsp/" />

<property name="suffix" value=".jsp" />
</bean>

</beans>

1.2.4. 定义 applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-4.3.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.3.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-4.3.xsd">
<!-- 开启spring注解支持 -->
<context:annotation-config/>
<!-- 配置包扫描器 -->
<context:component-scan base-package="cn.icloudit"/>
<!-- 1.配置数据源 -->
<bean id="dataSource"
class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<!--数据库驱动 -->
<property name="driverClassName" value="com.mysql.jdbc.Driver" />
<!--连接数据库的url -->
<property name="url" value="jdbc:mysql://localhost/spring" />
<!--连接数据库的用户名 -->
<property name="username" value="root" />
<!--连接数据库的密码 -->
<property name="password" value="123456" />
</bean>
<!-- 2.配置JDBC模板 -->
<bean id="jdbcTemplate"
class="org.springframework.jdbc.core.JdbcTemplate">

<!-- 默认必须使用数据源 -->

<property name="dataSource" ref="dataSource" />
</bean>
<!-- 4.事务管理器，依赖于数据源 -->
<bean id="transactionManager" class=
"org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>
<!-- 5.编写通知：对事务进行增强(通知),需要编写对切入点和具体执行事务细节 -->
<tx:advice id="txAdvice" transaction-manager="transactionManager">
<tx:attributes>
<!-- name：*表示任意方法名称 -->
<tx:method name="*" propagation="REQUIRED"
isolation="DEFAULT" read-only="false" />
</tx:attributes>
</tx:advice>
<!-- 6.编写aop，让spring自动对目标生成代理，需要使用AspectJ的表达式 -->
<aop:config>
<!-- 切入点 -->
<aop:pointcut expression="execution(*
cn.icloudit.service.*.*(..))"
id="txPointCut" />
<!-- 切面：将切入点与通知整合 -->
<aop:advisor advice-ref="txAdvice" pointcut-ref="txPointCut" />
</aop:config>

</beans>

1.2.5. 定义实体类

创建包 cn.icloudit.entity 包用来存放实体类（Account）
package cn.icloudit.entity;
public class Account {
private Integer id; // 账户id
private String username; // 用户名
private Double balance; // 账户余额
public Integer getId() {
return id;
}
public void setId(Integer id) {

this.id = id;

}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public Double getBalance() {
return balance;
}
public void setBalance(Double balance) {
this.balance = balance;
}
public String toString() {
return "Account [id=" + id + ", "
+ "username=" + username +
", balance=" + balance + "]";
}

}

1.2.6. 定义 DAO 接口（AccountDao）

package cn.icloudit.dao;
import java.util.List;
import cn.icloudit.entity.Account;
public interface AccountDao {
// 添加
public int addAccount(Account account);
// 更新
public int updateAccount(Account account);
// 删除
public int deleteAccount(int id);
// 通过id查询
public Account findAccountById(int id);
// 查询所有账户

public List<Account> findAllAccount();

public void transfer(String outUser,String inUser,Double money);

}

1.2.7. 定义 DAO 实现类(AccountDaoImpl)

package cn.icloudit.dao.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Isolation;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import cn.icloudit.dao.AccountDao;
import cn.icloudit.entity.Account;
@Repository
public class AccountDaoImpl implements AccountDao {
@Autowired
private JdbcTemplate jdbcTemplate;
// 添加账户
public int addAccount(Account account) {
// 定义SQL
String sql = "insert into account(username,balance) value(?,?)";
// 定义数组来存放SQL语句中的参数
Object[] obj = new Object[] { account.getUsername(),
account.getBalance() };
// 执行添加操作，返回的是受SQL语句影响的记录条数
int num = this.jdbcTemplate.update(sql, obj);
return num;
}
// 更新账户

public int updateAccount(Account account) {

// 定义SQL
String sql = "update account set username=?,balance=? where id = ?";
// 定义数组来存放SQL语句中的参数
Object[] params = new Object[] { account.getUsername(),
account.getBalance(), account.getId() };
// 执行添加操作，返回的是受SQL语句影响的记录条数
int num = this.jdbcTemplate.update(sql, params);
return num;
}
// 删除账户
public int deleteAccount(int id) {
// 定义SQL
String sql = "delete from account where id = ? ";
// 执行添加操作，返回的是受SQL语句影响的记录条数
int num = this.jdbcTemplate.update(sql, id);
return num;
}
// 通过id查询账户数据信息
public Account findAccountById(int id) {
// 定义SQL语句
String sql = "select * from account where id = ?";
// 创建一个新的BeanPropertyRowMapper对象
RowMapper<Account> rowMapper = new
BeanPropertyRowMapper<Account>(Account.class);
// 将id绑定到SQL语句中，并通过RowMapper返回一个Object类型的单行记录
return this.jdbcTemplate.queryForObject(sql, rowMapper, id);
}
// 查询所有账户信息
public List<Account> findAllAccount() {
// 定义SQL语句
String sql = "select * from account";
// 创建一个新的BeanPropertyRowMapper对象
RowMapper<Account> rowMapper = new
BeanPropertyRowMapper<Account>(Account.class);
// 执行静态的SQL查询，并通过RowMapper返回结果
return this.jdbcTemplate.query(sql, rowMapper);
}
@Transactional(propagation = Propagation.REQUIRED,
isolation = Isolation.DEFAULT, readOnly = false)
public void transfer(String outUser, String inUser, Double money) {
// 收款时，收款用户的余额=现有余额+所汇金额
this.jdbcTemplate.update("update account set balance = balance +?
"
+ "where username = ?",money, inUser);
// 模拟系统运行时的突发性问题
int i = 1/0;
// 汇款时，汇款用户的余额=现有余额-所汇金额
this.jdbcTemplate.update("update account set balance = balance-? "
+ "where username = ?",money, outUser);
}

}

1.2.8. 定义 Service 接口

package cn.icloudit.service;
import java.util.List;
import cn.icloudit.entity.Account;
public interface IAccountService {
public List<Account> queryAll();

}

1.2.9. 定义 Service 实现类

package cn.icloudit.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import cn.icloudit.dao.AccountDao;
import cn.icloudit.entity.Account;
import cn.icloudit.service.IAccountService;
@Service
public class AccountServiceImpl implements IAccountService{
@Autowired
private AccountDao accountDao;
@Override
public List<Account> queryAll() {
return accountDao.findAllAccount();
}
}

1.2.10. 定义 Controller 控制器

package cn.icloudit.web.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.icloudit.entity.Account;
import cn.icloudit.service.IAccountService;
@Controller
public class AccountController {
@Autowired
private IAccountService accountService;
@RequestMapping("/queryall")
@ResponseBody
public List<Account> queryAll(){
List<Account> list = accountService.queryAll();
return list;
}
}

1.2.11. 定义视图 index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>测试JSON交互</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$(function(){
loadAccount();
})
function loadAccount(){
$.ajax({
url : "${pageContext.request.contextPath }/queryall",
type : "post",
//定义回调响应的数据格式为JSON字符串,该属性可以省略
dataType : "json",
//成功响应的结果
success : function(data){
var tableElement = $("<table><thead id='th'><tr><th>序号
</th><th>用户名</th><th>余额</th></tr></thead></table>");
var tbodyElement = $("<tbody id='tb'></tbody>");
if(data != null){
$.each(data,function(i,d){
var trElement = $("<tr></tr>");
trElement.append("<td>"+ (i+1) +"</td>");
trElement.append("<td>"+ d.username +"</td>");
trElement.append("<td>"+ d.balance +"</td>");
tbodyElement.append(trElement);
});
tableElement.append(tbodyElement);
$("#contentDiv").html(tableElement);
}
}
});
}
</script>
</head>
<body>
<div align="center">
会员账户
<div id="contentDiv">
</div>
</div>
</body>
</html>