在此之前！请在数据库创建一个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.DriverjdbcUrl=jdbc:mysql://localhost:3306/lib?serverTimezone=UTCuser=rootpassword=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" οnclick="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>未完有待编辑！