springmvc加vue实现前后端数据的跨域访问

User.java文件：

1package com.nf.entity;
2
3import javax.persistence.*;
4
5@Entity
6@Table(name = "user", schema = "lib", catalog = "")
7public class User {
8    private int id;
9    private String name;
10    private String address;
11    private String phone;
12
13    public User(){}
14    public User(int id, String name, String address, String phone) {
15        this.id = id;
16        this.name = name;
17        this.address = address;
18        this.phone = phone;
19    }
20
21    @Id
22    @Column(name = "id")
23    public int getId() {
24        return id;
25    }
26
27    public void setId(int id) {
28        this.id = id;
29    }
30
31    @Basic
32    @Column(name = "name")
33    public String getName() {
34        return name;
35    }
36
37    public void setName(String name) {
38        this.name = name;
39    }
40
41    @Basic
42    @Column(name = "address")
43    public String getAddress() {
44        return address;
45    }
46
47    public void setAddress(String address) {
48        this.address = address;
49    }
50
51    @Basic
52    @Column(name = "phone")
53    public String getPhone() {
54        return phone;
55    }
56
57    public void setPhone(String phone) {
58        this.phone = phone;
59    }
60
61    @Override
62    public boolean equals(Object o) {
63        if (this == o) return true;
64        if (o == null || getClass() != o.getClass()) return false;
65
66        User that = (User) o;
67
68        if (id != that.id) return false;
69        if (name != null ? !name.equals(that.name) : that.name != null) return false;
70        if (address != null ? !address.equals(that.address) : that.address != null) return false;
71        if (phone != null ? !phone.equals(that.phone) : that.phone != null) return false;
72
73        return true;
74    }
75
76    @Override
77    public int hashCode() {
78        int result = id;
79        result = 31 * result + (name != null ? name.hashCode() : 0);
80        result = 31 * result + (address != null ? address.hashCode() : 0);
81        result = 31 * result + (phone != null ? phone.hashCode() : 0);
82        return result;
83    }
84}

UserDao.java

1package com.nf.dao;
2
3import com.nf.entity.User;
4
5import java.util.List;
6
7public interface UserDao {
8
9    public List<User> getAllUsers() ;
10}

UserDaoImpl.java

1package com.nf.dao;
2
3import com.nf.entity.User;
4import org.hibernate.Session;
5import org.hibernate.SessionFactory;
6import org.hibernate.query.Query;
7import org.springframework.beans.factory.annotation.Autowired;
8import org.springframework.stereotype.Repository;
9
10import java.util.List;
11@Repository
12public class UserDaoImpl implements UserDao {
13    @Autowired
14    private SessionFactory sessionFactory;
15    public List<User> getAllUsers() {
16        Session session = sessionFactory.getCurrentSession();
17        Query<User> query = session.createQuery("from User", User.class);
18        return query.getResultList();
19    }
20}

UserService.java

1package com.nf.service;
2
3import com.nf.entity.User;
4
5import java.util.List;
6
7public interface UserService {
8
9    public List<User> getAllUsers() ;
10}

UserServiceImpl.java

1package com.nf.service;
2
3import com.nf.dao.UserDao;
4import com.nf.entity.User;
5import org.springframework.beans.factory.annotation.Autowired;
6import org.springframework.stereotype.Service;
7
8import javax.transaction.Transactional;
9import java.util.List;
10@Service
11public class UserServiceImpl implements UserService {
12    @Autowired
13    private UserDao userDao;
14
15    @Transactional
16    public List<User> getAllUsers() {
17        return userDao.getAllUsers();
18    }
19}

UserAction.java

1package com.nf.action;
2
3import com.nf.service.UserService;
4import org.springframework.beans.factory.annotation.Autowired;
5import org.springframework.stereotype.Controller;
6import org.springframework.web.bind.annotation.RequestMapping;
7import org.springframework.web.bind.annotation.ResponseBody;
8
9import java.util.HashMap;
10import java.util.Map;
11
12@Controller
13@RequestMapping("/user")
14public class UserAction {
15
16    @Autowired
17    private UserService userService ;
18
19    @RequestMapping("/query")
20    public @ResponseBody
21    Map<String,Object> query(){
22
23        Map<String,Object> hashMap = new HashMap<String, Object>();
24        hashMap.put("userList",userService.getAllUsers());
25        return hashMap;
26    }
27}

applicationContext.xml

1<?xml version="1.0" encoding="UTF-8"?>
2<beans xmlns="http://www.springframework.org/schema/beans"
3       xmlns:context="http://www.springframework.org/schema/context"
4       xmlns:tx="http://www.springframework.org/schema/tx"
5       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
6       xsi:schemaLocation="
7       http://www.springframework.org/schema/beans
8       http://www.springframework.org/schema/beans/spring-beans.xsd
9       http://www.springframework.org/schema/context
10       http://www.springframework.org/schema/context/spring-context.xsd
11       http://www.springframework.org/schema/tx
12       http://www.springframework.org/schema/tx/spring-tx.xsd
13">
14    <context:component-scan base-package="com.nf"></context:component-scan>
15    <!--加载JDBC的配置文件-->
16    <context:property-placeholder location="classpath:jdbc.properties"></context:property-placeholder>
17    <bean id="myDataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
18        <property name="driverClass" value="${driverClass}"></property>
19        <property name="jdbcUrl" value="${jdbcUrl}"></property>
20        <property name="user" value="${user}"></property>
21        <property name="password" value="${password}"></property>
22        <!--几个个性化的信息-->
23        <!--每300秒检查所有连接池中空闲的连接-->
24        <property name="idleConnectionTestPeriod" value="300"></property>
25        <!--最大的空闲时间-->
26        <property name="maxIdleTime" value="2000"></property>
27        <!--最大连接数-->
28        <property name="maxPoolSize" value="5"></property>
29    </bean>
30
31    <bean id="sessionFactory" class="org.springframework.orm.hibernate5.LocalSessionFactoryBean">
32        <!--1.数据库连接池-->
33        <property name="dataSource" ref="myDataSource"></property>
34        <!--2.相关hibernate的配置信息-->
35        <property name="hibernateProperties">
36            <props>
37                <prop key="hibernate.dialect">org.hibernate.dialect.MySQL57InnoDBDialect</prop>
38                <prop key="hibernate.show_sql">true</prop>
39                <prop key="hibernate.format_sql">true</prop>
40                <prop key="hibernate.connection.autocommit">false</prop>
41               <!-- <prop key="hibernate.hbm2ddl.auto">update</prop>-->
42            </props>
43        </property>
44        <!--3.实体类映射关系-->
45        <property name="packagesToScan" value="com.nf"></property>
46    </bean>
47
48    <!--事务管理器配置，Hibernate单数据源事务-->
49    <bean id="defaultTransactionManager" class="org.springframework.orm.hibernate5.HibernateTransactionManager">
50        <property name="sessionFactory" ref="sessionFactory"></property>
51    </bean>
52    <!--使用注解annotation定义事务-->
53    <tx:annotation-driven transaction-manager="defaultTransactionManager" ></tx:annotation-driven>
54
55</beans>

jdbc.properties//数据库配置文件

1driverClass=com.mysql.cj.jdbc.Driver
2jdbcUrl=jdbc:mysql://localhost:3306/lib?serverTimezone=UTC
3user=root
4password=123456

spring-servlet.xml

1<?xml version="1.0" encoding="UTF-8"?>
2<beans xmlns="http://www.springframework.org/schema/beans"
3       xmlns:context="http://www.springframework.org/schema/context"
4       xmlns:mvc="http://www.springframework.org/schema/mvc"
5       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
6       xsi:schemaLocation="
7       http://www.springframework.org/schema/beans
8       http://www.springframework.org/schema/beans/spring-beans.xsd
9       http://www.springframework.org/schema/context
10       http://www.springframework.org/schema/context/spring-context.xsd
11       http://www.springframework.org/schema/mvc
12       http://www.springframework.org/schema/mvc/spring-mvc.xsd
13">
14    <!--扫描包-->
15    <context:component-scan base-package="com.nf"></context:component-scan>
16    <!--注解驱动-->
17    <mvc:annotation-driven></mvc:annotation-driven>
18    <!--启动视图解析器-->
19    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
20        <property name="prefix" value="/WEB-INF/view/"></property>
21        <property name="suffix" value=".jsp"></property>
22    </bean>
23    <!--静态资源（不用SpringMVC解释）-->
24    <mvc:resources mapping="/js/**" location="/js/"></mvc:resources>
25    <mvc:cors>
26        <!--实现跨域的配置代码-->
27        <mvc:mapping path="/**"
28                     allowed-origins="http://127.0.0.1:8020,http://192.168.191.1:8020"
29                     allowed-methods="POST,GET, OPTIONS,DELETE,PUT"
30                     allowed-headers="Content-Type,ContentType,Access-Control-Allow-Headers, Authorization, X-Requested-With"
31                     allow-credentials="true"/>
32    </mvc:cors>
33</beans>

web.xml

1<?xml version="1.0" encoding="UTF-8"?>
2<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3         xmlns="http://xmlns.jcp.org/xml/ns/javaee"
4         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
5         id="WebApp_ID" version="3.1">
6
7    <filter>
8        <filter-name>OpenSessionInViewFilter</filter-name>
9        <filter-class>org.springframework.orm.hibernate5.support.OpenSessionInViewFilter</filter-class>
10        <init-param>
11            <param-name>flushMode</param-name>
12            <param-value>AUTO</param-value>
13        </init-param>
14    </filter>
15    <filter-mapping>
16        <filter-name>OpenSessionInViewFilter</filter-name>
17        <url-pattern>/*</url-pattern>
18    </filter-mapping>
19
20    <!--SpringMVC的配置信息-->
21    <servlet>
22        <servlet-name>spring</servlet-name>
23        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
24        <init-param>
25            <param-name>contextConfigLocation</param-name>
26            <param-value>classpath:spring-servlet.xml</param-value>
27        </init-param>
28        <load-on-startup>1</load-on-startup>
29    </servlet>
30    <servlet-mapping>
31        <servlet-name>spring</servlet-name>
32        <url-pattern>/</url-pattern>
33    </servlet-mapping>
34
35    <!-- 配置编码方式过滤器 -->
36    <filter>
37        <filter-name>characterEncodingFilter</filter-name>
38        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
39        <init-param>
40            <param-name>encoding</param-name>
41            <param-value>UTF-8</param-value>
42        </init-param>
43    </filter>
44    <filter-mapping>
45        <filter-name>characterEncodingFilter</filter-name>
46        <url-pattern>/*</url-pattern>
47    </filter-mapping>
48
49    <!--Spring的监听器-->
50    <context-param>
51        <param-name>contextConfigLocation</param-name>
52        <param-value>classpath:applicationContext.xml</param-value>
53    </context-param>
54    <listener>
55        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
56    </listener>
57</web-app>

pom.xml

1<?xml version="1.0" encoding="UTF-8"?>
2<project xmlns="http://maven.apache.org/POM/4.0.0"
3         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
5    <modelVersion>4.0.0</modelVersion>
6
7    <groupId>com.nf</groupId>
8    <artifactId>SpringMvc</artifactId>
9    <version>1.0-SNAPSHOT</version>
10    <packaging>war</packaging>
11    <name>SpringMvc Maven Webapp</name>
12    <url>http://maven.apache.org</url>
13    <properties>
14        <spring-version>5.0.1.RELEASE</spring-version>
15        <jackson-version>2.9.3</jackson-version>
16        <mysql-version>6.0.6</mysql-version>
17        <c3p0-version>0.9.5.1</c3p0-version>
18        <hibernate-version>5.2.12.Final</hibernate-version>
19    </properties>
20    <dependencies>
21
22        <dependency>
23            <groupId>junit</groupId>
24            <artifactId>junit</artifactId>
25            <version>3.8.1</version>
26            <scope>test</scope>
27        </dependency>
28        <!--SpringMVC的依赖包，全面取代struts的-->
29        <!--SpringMVC中的 @ResponseBody需要JSON解释器：jackson-->
30        <dependency>
31            <groupId>org.springframework</groupId>
32            <artifactId>spring-webmvc</artifactId>
33            <version>${spring-version}</version>
34        </dependency>
35        <dependency>
36            <groupId>com.fasterxml.jackson.core</groupId>
37            <artifactId>jackson-databind</artifactId>
38            <version>${jackson-version}</version>
39        </dependency>
40        <dependency>
41            <groupId>com.fasterxml.jackson.core</groupId>
42            <artifactId>jackson-core</artifactId>
43            <version>${jackson-version}</version>
44        </dependency>
45        <dependency>
46            <groupId>com.fasterxml.jackson.core</groupId>
47            <artifactId>jackson-annotations</artifactId>
48            <version>${jackson-version}</version>
49        </dependency>
50        <!--Spring框架的依赖包-->
51        <dependency>
52            <groupId>org.springframework</groupId>
53            <artifactId>spring-context</artifactId>
54            <version>${spring-version}</version>
55        </dependency>
56        <dependency>
57            <groupId>org.springframework</groupId>
58            <artifactId>spring-core</artifactId>
59            <version>${spring-version}</version>
60        </dependency>
61        <dependency>
62            <groupId>org.springframework</groupId>
63            <artifactId>spring-beans</artifactId>
64            <version>${spring-version}</version>
65        </dependency>
66        <dependency>
67            <groupId>org.springframework</groupId>
68            <artifactId>spring-web</artifactId>
69            <version>${spring-version}</version>
70        </dependency>
71        <dependency>
72            <groupId>org.springframework</groupId>
73            <artifactId>spring-aop</artifactId>
74            <version>${spring-version}</version>
75        </dependency>
76        <dependency>
77            <groupId>org.springframework</groupId>
78            <artifactId>spring-orm</artifactId>
79            <version>${spring-version}</version>
80        </dependency>
81        <!--接入hibernate（前置任务）-->
82        <!--mysql_jdbc-->
83       <dependency>
84            <groupId>mysql</groupId>
85            <artifactId>mysql-connector-java</artifactId>
86            <version>${mysql-version}</version>
87        </dependency>
88        <!--c3p0-->
89
90        <dependency>
91            <groupId>com.mchange</groupId>
92            <artifactId>c3p0</artifactId>
93            <version>${c3p0-version}</version>
94        </dependency>
95        <!--hibernate-->
96        <dependency>
97            <groupId>org.hibernate</groupId>
98            <artifactId>hibernate-core</artifactId>
99            <version>${hibernate-version}</version>
100        </dependency>
101
102
103
104    </dependencies>
105    <build>
106        <finalName>SpringMvc</finalName>
107    </build>
108
109</project>

HBuilder开发工具的index.html文件

1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8" />
5        <title></title>
6    </head>
7    <body>
8        <div id="app">
9            
10                <div v-for="art in userList">
11                         <span>{{art.id}}</span>
12                        <span>{{art.name}}</span>
13                        <span>{{art.address}}</span>
14                        <span>{{art.phone}}</span>
15                </div>
16            
17        </div>
18        
19        <!--<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>-->
20    <script type="text/javascript" src="js/vue.js" ></script>
21    <script src="js/jquery-3.2.1.min.js"></script>
22    <script language="JavaScript">
23    var myModel = {"userList":[]};
24    var myViewModel = new Vue({
25        el:'#app',
26        data:myModel
27    });
28    $.ajax({
29        url:'http://localhost:8080/user/query',//实现跨域的URL路径
30        type:'GET',
31
32        dataType:'json',
33        timeout:3000,
34        success:function(result){
35            alert(result);
36            myModel.userList = result.userList;
37        },
38        error:function(XMLHttpRequest, textStatus, errorThrown){
39            alert('服务器忙，请不要说脏话，理论上大家都是文明人');
40            alert(textStatus+XMLHttpRequest.status);
41        }
42    });
43</script>
44    </body>
45</html>

HardDream!!