个人笔记之json实现模糊查询

1：首先创建一个项目如：（说明：此项目是在eclipse创建的）

2.在创建相对应的包如：

3.创建写好相对应的配置文件如：

applicationContext.xml具体内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.0.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
">

<context:annotation-config></context:annotation-config>

<context:component-scan base-package="com.nf"></context:component-scan>

<context:property-placeholder location="classpath:jdbc.properties"></context:property-placeholder>

<bean id="sessionFactory" class="org.springframework.orm.hibernate5.LocalSessionFactoryBean">

<property name="dataSource" ref="myDataSource"></property>

<property name="hibernateProperties">
<props>
<prop key="hibernate.dialect">org.hibernate.dialect.MySQL57InnoDBDialect</prop>
<prop key="hibernate.show_sql">true</prop>
<prop key="hibernate.format_sql">true</prop>
<prop key="hibernate.connection.autocommit">false</prop>
<prop key="hibernate.hbm2ddl.auto">update</prop>
</props>
</property>

<property name="packagesToScan" value="com.nf"></property>
</bean>

<bean id="defaultTransactionManager" class="org.springframework.orm.hibernate5.HibernateTransactionManager">
<property name="sessionFactory" ref="sessionFactory"></property>
</bean>

<tx:annotation-driven transaction-manager="defaultTransactionManager" ></tx:annotation-driven>

</beans>

具体内容如下：（这是与MySQL数据库连接的配置）

#database information
driverClass=com.mysql.cj.jdbc.Driver
jdbcUrl=jdbc:mysql://localhost:3306/lib?serverTimezone=UTC
user=root
password=

struts.xml配置文件如下：

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
"http://struts.apache.org/dtds/struts-2.5.dtd">

<struts>
<constant name="struts.objectFactory" value="spring"></constant>
<package name="myPackage" extends="struts-default,json-default">
<action name="bookAction_*" class="bookAction" method="{1}">
<result type="json" name="jsonOK">
<param name="root">jsonMap</param>
</result>
<allowed-methods>getAllBook，getLikeBook</allowed-methods>
</action>

</package>
</struts>

配置web.xml过滤文件

web.xml具体内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
id="WebApp_ID" version="3.1">
<display-name>Archetype Created Web Application</display-name>

<filter>
<filter-name>struts-prepare</filter-name>
<filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareFilter</filter-class>
</filter>
<filter>
<filter-name>struts-execute</filter-name>
<filter-class>org.apache.struts2.dispatcher.filter.StrutsExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts-prepare</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>struts-execute</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

<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>

</web-app>

4.在web目录下创建个js文件夹来存放这俩个js文件（注：这俩个文件是第三方的js文件）：

在webContext目录下建个jsp文件，如：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>
<table border="1px" id="myView">

<tr>
<td colspan="3">
<span>请输入书名：</span>
<input name="bookName" id="bookName"/>
<img src="img/se.png" v-on:click="queryBook">
</td>
</tr>

<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 clientInput = {bookName:''};//此JSON目的用于提交给服务器查询用的
var myModel = {bookList:[]};

var myViewModel = new Vue({
el:"#myView" ,
data:myModel,

methods{

　　queryBook : function(){

　　clientInput.bookName = $("#bookName").val() ;

　　$.ajax({

　　　　url:bookAction_getListBook,//url路径

　　　　type:"GET",//传送方式

　　　　data:clientInput,//传送给后台的数据

　　　　dataType:json,

　　　　timeout:2000,//响应时间，这里是2秒

　　　　success:funtion(result){//成功会执行，并把结果响应给后台

　　　　myModel.bookList = result.bookList ;

　　}，

　　　　error: funtion(){

　　　　　　alert("服务器忙，请稍后再试") ;

　　　　}

　　});

}

}

}) ;
/*
var myViewModel = new Vue({
el:'#myView',
data:myModel
});
*/
//写成函数的目的，为了【复用】
function getData(){
$.ajax({
url:"bookAction_getAllBook", //后端的API地址
type:'GET', //http:POST/GET
//data:postData, //指客户端提交给后台的参数
dataType:'json', //服务端返回类型text,json
timeout:3000,
success:function(result){
//alert(result);
//$.extend(true, result, myModel);
//失败
//myViewModel.data = result;
//失败
//myModel = result;
myModel.bookList = result.bookList ;

},
error:function(){
alert('服务器忙，请不要说脏话，理论上大家都是文明人');
}
});
}
getData();

</script>
</html>

6.开始在src目录下写后台代码了

先从开始：

创建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;
}

}

然后在创建dao模层，

先创建个BookDao接口，具体内容如下：

package com.nf.dao;

import com.nf.entity.Book;

import java.util.List;

public interface BookDao {

public List<Book> getAllBook();//查询全部数据

pulblic List<Book> getLikeBook(String bookName) ;

}

在创建个BookDaoImpl类并实现BookDao接口，内容如下：

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;
}

　public List<Book> getLikeBook(String bookName){

　　Session session = sessionFactory.getCurrentSession() ;

　　　Query<Book> q = 　session.createQuery("from Book where name like : name",Book.class) ;

　　q.setParameter("name","%"+bookName+"%") ;

　　List<Book> bookList = q.getResultList() ;

　　return bookList ;

}
}

最后写模块

（具体内容如下：）

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 {

private String bookName = null ;

public String getBookName() {
return bookName;
}
public void setBookName(String bookName) {
this.bookName = bookName;
}

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";
}

public String getListBook(){

　　List<Book> bookList = bookService.getListBook(bookName) ;
　　jsonMap.put("bookList",bookList) ;

　　return "jsonOk" ;

}

当查询全部是效果图：

(当根据模糊查询来查的)也就是输入书名来查找效果图：

//根据书名的来查询（如：输入‘’的‘’字，就会根据的字来查询到有‘’的‘’的书名的书）

//坚持比努力可拍，一天一天的坚持，会迎来结果的那一天！

//个人的理解笔记，请勿喷！

}