在Vue.js使用配置（SSH框架的附带使用）
在此之前！请在数据库创建一个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>
未完有待编辑！
