zoukankan      html  css  js  c++  java
  • 笔记(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
    ">
    <!--自动注入processor解释器(此行不写)-->
    <context:annotation-config></context:annotation-config>
    <!--自动扫描包-->
    <context:component-scan base-package="com.nf"></context:component-scan>

    <!--加载JDBC的配置文件-->
    <context:property-placeholder location="classpath:jdbc.properties"></context:property-placeholder>

    <bean id="myDataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
    <property name="driverClass" value="${driverClass}"></property>
    <property name="jdbcUrl" value="${jdbcUrl}"></property>
    <property name="user" value="${user}"></property>
    <property name="password" value="${password}"></property>
    <!--几个个性化的信息-->
    <!--每300秒检查所有连接池中空闲的连接-->
    <property name="idleConnectionTestPeriod" value="300"></property>
    <!--最大的空闲时间-->
    <property name="maxIdleTime" value="2000"></property>
    <!--最大连接数-->
    <property name="maxPoolSize" value="5"></property>
    </bean>

    <!--构造SessionFactory,需要3项内容:1.连接 2.配置 3.实体类映射关系-->
    <bean id="sessionFactory" class="org.springframework.orm.hibernate5.LocalSessionFactoryBean">
    <!--1.数据库连接池-->
    <property name="dataSource" ref="myDataSource"></property>
    <!--2.相关hibernate的配置信息-->
    <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>
    <!--3.实体类映射关系-->
    <property name="packagesToScan" value="com.nf"></property>
    </bean>

    <!--事务管理器配置,Hibernate单数据源事务-->
    <bean id="defaultTransactionManager" class="org.springframework.orm.hibernate5.HibernateTransactionManager">
    <property name="sessionFactory" ref="sessionFactory"></property>
    </bean>
    <!--使用注解annotation定义事务-->
    <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</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>
    <!--2个struts的过滤器-->
    <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>
    <!--1个spring的监听器-->
    <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>
    <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">
    var myModel = {bookList:[]};
    var myViewModel = new Vue({
    el:"#myView" ,
    data:myModel

    }) ;
    /*
    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();

    }

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

    最后写模块

    (具体内容如下:)

    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 {

    //姝�sonMap鐢ㄤ簬瀛樺偍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";
    }
    }

    好了,到这里整个案例已经完成了,一来可以作为我以后复习的笔记,二来希望可以帮助到在这方面学习的朋友,做的不够精细,请多多包含,勿喷!!

     
  • 相关阅读:
    Leetcode 349. Intersection of Two Arrays
    hdu 1016 Prime Ring Problem
    map 树木品种
    油田合并
    函数学习
    Leetcode 103. Binary Tree Zigzag Level Order Traversal
    Leetcode 102. Binary Tree Level Order Traversal
    Leetcode 101. Symmetric Tree
    poj 2524 Ubiquitous Religions(宗教信仰)
    pat 1009. 说反话 (20)
  • 原文地址:https://www.cnblogs.com/aa1314/p/7927354.html
Copyright © 2011-2022 走看看