在此之前！請在數據庫創建一個lib的數據庫！
+++++++++++++++++++++++++++++++++++++++++++++++++++++
--------------------------------------------------------------------------------------------
【包名com.nf.action】
（文件名BookAction.java）
package com.nf.action;
import com.nf.entity.Book;
import com.nf.service.BookService;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
@Scope("prototype")
public class BookAction extends ActionSupport {
//此jsonMap用於存儲JSON格式的數據
private Map<String,Object> jsonMap = new HashMap();
public Map<String, Object> getJsonMap() {
return jsonMap;
}
public void setJsonMap(Map<String, Object> jsonMap) {
this.jsonMap = jsonMap;
}
@Autowired
private BookService bookService;
public String getAllBook(){
List<Book> bookList = bookService.getAllBook();
jsonMap.put("bookList", bookList);
return "jsonOK";
}
}
==============================================
----------------------------------------------------------------------------------
【包名com.nf.dao】
{接口名BookDao.java}
package com.nf.dao;
import com.nf.entity.Book;
import java.util.List;
public interface BookDao {
public List<Book> getAllBook();
}
----------------------------------------------------------------------------------
【包名com.nf.dao】
（文件名BookDaoImpl.java）
package com.nf.dao;
import com.nf.entity.Book;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.query.Query;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
@Scope("prototype")
public class BookDaoImpl implements BookDao {
@Autowired
private SessionFactory sessionFactory;
public List<Book> getAllBook() {
Session session = sessionFactory.getCurrentSession();
Query<Book> query = session.createQuery("from Book", Book.class);
List<Book> bookList = query.getResultList();
return bookList;
}
}
==============================================
----------------------------------------------------------------------------------
【com.nf.entity】
（Book.java）
package com.nf.entity;
import javax.persistence.*;
@Entity
@Table(name = "book")
public class Book {
private Integer id;
private String name;
private Integer price;
@Id
@GeneratedValue(strategy= GenerationType.IDENTITY)
@Column(name="id")
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
@Column(name = "name",length = 50,nullable = false)
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Column(name = "price",nullable = false)
public Integer getPrice() {
return price;
}
public void setPrice(Integer price) {
this.price = price;
}
}
==============================================
----------------------------------------------------------------------------------
【com.nf.service】
{BookService.java}
package com.nf.service;
import com.nf.entity.Book;
import java.util.List;
public interface BookService {
public List<Book> getAllBook();
}
--------------------------------------------------------------------------------
【com.nf.service】
（BookServiceImpl.java）
package com.nf.service;
import com.nf.dao.BookDao;
import com.nf.entity.Book;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
@Scope("prototype")
public class BookServiceImpl implements BookService {
@Autowired
private BookDao bookDao;
@Transactional
public List<Book> getAllBook() {
List<Book> bookList = bookDao.getAllBook();
//編寫游戲規則（業務邏輯代碼：沒有任何數據庫操作）
return bookList;
}
}
////////////////////////////////////////////////////////////////////////
數據庫配置（mysql）自己改！
#database information
driverClass=com.mysql.cj.jdbc.Driver
jdbcUrl=jdbc:mysql://localhost:3306/lib?serverTimezone=UTC
user=root
password=root
///////////////////////////////////////////////////////////////////////
*****************************************************
記得在WebContent文件下創建js和img的文件夾！
1.把（jquery-3.2.1.min.js）和（vue.js）放入js文件夾下（注意：沒有的朋友可以自己到網下載）
2.把一張名叫：ting.jpg的圖片放在文件夾img里面
******************************************************
在WebContent目錄下面新建一個test.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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="img/timg.jpg" onclick="javascript:getData()">
<table border="1px" id="myView">
<tr>
<th>ID</th>
<th>書名</th>
<th>價格</th>
</tr>
<tr v-for="book in bookList">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.price}}</td>
</tr>
</table>
</body>
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//bookList不能為空，否則會跟view綁定失敗
var myModel = {bookList:[]};
var myViewModel = new Vue({
el:'#myView',
data:myModel
});
//寫成函數的目的，為了【復用】
function getData(){
//alert(11);
$.ajax({
url:"bookAction_getAllBook", //后端的API地址
type:'GET', //http:POST/GET
//data:postData, //指客戶端提交給后台的參數
dataType:'json', //服務端返回類型text,json
timeout:3000,
success:function(result){
myModel.bookList = result.bookList;
},
error:function(){
alert('服務器忙，請不要說臟話，理論上大家都是文明人');
}
});
}
getData();
</script>
</html>
未完有待編輯！