先搭建一個DAO和MVC結合的基本Spring環境
a.搭建 DAO 環境
1.建立表和對應的序列
2.建立一個項目 導入jar包(ioc aop dao 數據庫驅動 連接池) 拷貝配置文件到src下
3.根據表設計一個實體類
4.設計DAO 接口
5.實現DAO 接口 不繼承JdbcDaoSupport
開啓組件掃描 把dao放入容器 注入JdbcTemplate
在容器中創建JdbcTemplate --- 創建DataSource
使用API 完成 查詢 --- RowMapper //直接複製
6.包裝一個Service 測試
b.搭建MVC環境
1.建項目 導入jar (mvc) 拷貝配置文件 WEB-INF下建立頁面
2.在web.xml 中配置DispatcherServlet
3.開啓組件掃描 和 開啓標註形式mvc
4.編寫控制器類 設計方法 使用@Controller 和 @RequestMapping
5.配置視圖處理器
c.DAO 和 MVC 結合
配置實現一個返回一個銀行列表!!注意配置信息和實體類和原來實體類一摸一樣。
DAO接口方法
public interface XdlBankAccountDAO {
List<XdlBankAccount> getAccountList();
}
DAO接口方法的實現
@Repository("accountDao")
public class XdlBankAccountDAOImpl implements XdlBankAccountDAO {
@Resource
private JdbcTemplate jdbcTemplate;
@Override
public List<XdlBankAccount> getAccountList() {
String sql = "select * from xdl_bank_account";
return jdbcTemplate.query(sql,new XdlBankAccountMapper());
}
}
XdlBankAcoountController.java
@Controller
public class XdlBankAccountController {
@Autowired
private XdlBankAccountService accountService;
@RequestMapping("/toAccountList.do")
public String toAccountList(){
return "account_list";
}
@RequestMapping("/accountList.do")
@ResponseBody
public List<XdlBankAccount> accountList(){
return accountService.accountList();
}
}
account_list.jsp
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript">
$(function(){
$.ajax({
url:"accountList.do",
type:"post",
success:function(accounts){
var $datas = $("#datas");
for(var i=0;i<accounts.length;i++){
var obj = accounts[i];
var trStr = "<tr><td>"+obj.id+"</td><td>"+obj.acc_no+"</td><td>"+
obj.acc_password+"</td><td>"+obj.acc_money+"</td></tr>";
$datas.append($(trStr));
}
},
dataType:"json"
});
});
</script>
</head>
<body>
<table id="datas" class="table table-striped table-bordered">
<tr><td>ID</td><td>ACC_NO</td><td>ACC_PASSWORD</td><td>ACC_MONEY</td></tr>
</table>
</body>
2.REST代碼架構的簡介
REST即表述性狀態傳遞(英文:Representational State Transfer,簡稱REST)
它是一種抽象的軟件架構風格
這種軟件設計風格 主要針對兩個方面 做了規範
對URL 風格 的設計 由原來的基於操作的設計 轉換成了基於 資源的設計
對HTTP 協議請求方式做了規範 get 請求對應 查詢 post 請求添加 put 對應修改 delete 請求刪除
3.restful
符合rest 約束風格的應用程序就是restful架構
4.Spring MVC 對 restful 做了哪些支持呢?
4.1 在@RequestMapping 上做了支持
@RequestMapping(value="/account/{id}",method=RequestMethod.POST)
public String add(@PathVariable("路徑變量名") int id){
}
@PathVariable作用是將URI請求模板中的變量解析出來映射到處理方法的參數上
4.2 請求路徑 沒有後綴了 ***
需要改變 DispatcherServlet 的<url-parttern> 爲 /
這樣的話 問題是 靜態資源被攔截 需要一套規範 對靜態資源放行
<mvc:default-servlet-handler/>
@ResponseBody
@RequestMapping(value="/account/{id}",method=RequestMethod.GET)
public XdlBankAccount getXdlBankAccount(@PathVariable("id")int id) {
System.out.println("id:"+id);
return null;
}
請求:http://localhost:8080/spring-mvc-day07/account/123 頁面一片空白不往123.jsp跑就不會報404錯誤。若id存在則
查詢 並在輸入框中顯示查詢到的信息。
1.現在dao接口中添加查詢的方法。 //根據id查詢銀行賬戶 XdlBankAccount getAccountById(int id);
2.在實現類中實現添加的方法。這兩步完成dao編程。
//根據銀行id查信息
@Override
public XdlBankAccount getAccountById(int id) {
String sql = "select * from xdl_bank_account where id=?";
List<XdlBankAccount> accounts = jdbcTemplate.query(sql, new XdlBankAccountMapper(),id);
return accounts.isEmpty()?null:accounts.get(0);
}
3.包裝service,再寫控制器。
service中添加
public XdlBankAccount accountById(int id) {
return accountDao.getAccountById(id);
}
控制器中添加
@ResponseBody
@RequestMapping(value="/account/{id}",method=RequestMethod.GET)
public XdlBankAccount getXdlBankAccount(@PathVariable("id")int id) {
System.out.println("id:"+id);
return accountService.accountById(id);
}
4.寫jsp頁面發送ajax請求實現前端頁面的顯示。jQuery val() 方法val() 方法返回或設置被選元素的 value 屬性。遺忘知識。
<script type="text/javascript">
function getAccount(){
var id = $("#id").val();
// 清空原來的數據
$("#acc_no").val("");
$("#acc_password").val("");
$("#acc_money").val("");
$.ajax({
url:"account/"+id,
type:"get",
success:function(account){
$("#acc_no").val(account.acc_no);
$("#acc_password").val(account.acc_password);
$("#acc_money").val(account.acc_money);
},
dataType:"json",
cache:false
});
}
</script>
<body>
ID:<input type="text" id="id"><br>
NO:<input type="text" id="acc_no"><br>
PW:<input type="password" id="acc_password"><br>
MN:<input type="text" id="acc_money"><br>
<input type="button" value="增加">
<input type="button" value="刪除">
<input type="button" value="修改">
<input type="button" value="查詢" onclick="getAccount()">
<table id="datas" class="table table-striped table-bordered">
<tr><td>ID</td><td>ACC_NO</td><td>ACC_PASSWORD</td><td>ACC_MONEY</td></tr>
</table>
</body>
增加
1。在DAO接口中增加方法
//實現增加。
int insertAccount(XdlBankAccount account);
2。DAO的實現類中實現增加的方法
@Override
public int insertAccount(XdlBankAccount account) {
String sql = "insert into xdl_bank_account values(?,?,?,?)";
try {
return jdbcTemplate.update(sql,account.getId(),account.getAcc_no(),
account.getAcc_password(),account.getAcc_money());
} catch (DataAccessException e) {
e.printStackTrace();
}
return 0;
}
3.包裝service和控制器
service中
public Boolean regisetr(XdlBankAccount account) {
return accountDao.insertAccount(account)==0?false:true;
}
控制器中
@ResponseBody
@RequestMapping(value="/account/{id}",method=RequestMethod.POST)
public boolean addBankAccount(XdlBankAccount account) {
return accountService.regisetr(account);
}
4.jsp頁面實現ajax加載
<script type="text/javascript">
function addAccount() {
var id = $("#id").val();
var acc_no = $("#acc_no").val();
var acc_password = $("#acc_password").val();
var acc_money = $("#acc_money").val();
$.ajax({
url : "account/" + id,
type : "post",
success : function(f) {
if (f) {
var trStr = "<tr id='"+id+"'> <td>" + id + "</td><td>"
+ acc_no + "</td><td>" + acc_password + "</td><td>"
+ acc_money + "</td></tr>";
$("#datas").append($(trStr));
} else {
alert('增加失敗');
}
},
dataType : "json",
cache : false,
data : {
id : id,
acc_no : acc_no,
acc_password : acc_password,
acc_money : acc_money
}
});
}
</script>
刪除
1.在DAO中添加根據id刪除的方法 int deleteAccountByid(int id);
2.在DAO的實現類中實現此方法
@Override
public int deleteAccountByid(int id) {
// TODO Auto-generated method stub
String sql = "delete from xdl_bank_account where id=?";
try {
return jdbcTemplate.update(sql,id);
} catch (DataAccessException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return 0;
}
3.包裝service 和 控制器
service中
public Boolean remove(int id) {
return accountDao.deleteAccountByid(id)==0?false:true;
}
控制器中,需要處理這個id
@ResponseBody
@RequestMapping(value="/account/{id}",method=RequestMethod.DELETE)
public boolean removeBankAccount(@PathVariable("id")int id) {
return accountService.remove(id);
}
4.jsp頁面實現ajax請求
<script type="text/javascript">
function deleteAccount() {
var id = $("#id").val();
$.ajax({
url : "account/" + id,
type : "delete",
success : function(f) {
if (f) {
$("#datas tr[id='" + id + "']").remove();
}
},
dataType : "json",
cache : false
});
}
</script>
更新 注意更新是增刪查改中最難的一點
1.在dao中新增根據對象更新的方法。 int updateAccount(XdlBankAccount account);
2.在dao的實現類中實現此方法
@Override
public int updateAccount(XdlBankAccount account) {
// TODO Auto-generated method stub
String sql = "update xdl_bank_account set acc_no=?,acc_password=?,"
+ "acc_money=? where id=?";
try {
return jdbcTemplate.update(sql,account.getAcc_no(),account.getAcc_password(),
account.getAcc_money(),account.getId());
} catch (DataAccessException e) {
e.printStackTrace();
}
return 0;
}
3.包裝service和控制器
service中
public boolean update(XdlBankAccount account) {
return accountDao.updateAccount(account)==0?false:true;
}
控制器中
@RequestMapping(value="/account/{id}",method=RequestMethod.PUT)
@ResponseBody
public boolean removeBankAccount(@RequestBody XdlBankAccount account) {
System.out.println("account="+account);
return accountService.update(account);
}
注意: @RequestBody 把json字符串 解析成java對象 put請求必須要注意
4.jsp中實現ajax請求
<script type="text/javascript">
function updateAccount() {
var id = $("#id").val();
var acc_no = $("#acc_no").val();
var acc_password = $("#acc_password").val();
var acc_money = $("#acc_money").val();
$.ajax({
url : "account/" + id,
type : "put",
success : function(f) {
if (f) {
/* var trStr = " <td>"+id+"</td><td>"+acc_no+"</td><td>"+
acc_password+"</td><td>"+acc_money+"</td>";
$("#datas tr[id='"+id+"']").html(trStr); */
var trStr = "<tr id='"+id+"'> <td>" + id + "</td><td>"
+ acc_no + "</td><td>" + acc_password + "</td><td>"
+ acc_money + "</td></tr>";
$("#datas tr[id='" + id + "']").replaceWith($(trStr));
} else {
alert('更新失敗');
}
},
dataType : "json",
cache : false,
data : JSON.stringify({
id : id,
acc_no : acc_no,
acc_password : acc_password,
acc_money : acc_money
}),
contentType : "application/json"
});
}
</script>
注意: 完成更新請求發送put請求 要求ajax的參數必須以 json字符串傳遞
把json對象轉換成 json字符串 JSON.stringify(json對象) 並告知 ajax引擎 contentType:"application/json"
開發順序就如下圖順序所示: