springmvc加vue实现前后端数据的跨域访问
User.java文件：
package com.nf.entity; import javax.persistence.*; @Entity @Table(name = "user", schema = "lib", catalog = "") public class User { private int id; private String name; private String address; private String phone; public User(){} public User(int id, String name, String address, String phone) { this.id = id; this.name = name; this.address = address; this.phone = phone; } @Id @Column(name = "id") public int getId() { return id; } public void setId(int id) { this.id = id; } @Basic @Column(name = "name") public String getName() { return name; } public void setName(String name) { this.name = name; } @Basic @Column(name = "address") public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } @Basic @Column(name = "phone") public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } @Override public boolean equals(Object o) { if (this == o) return true; if (o == null || getClass() != o.getClass()) return false; User that = (User) o; if (id != that.id) return false; if (name != null ? !name.equals(that.name) : that.name != null) return false; if (address != null ? !address.equals(that.address) : that.address != null) return false; if (phone != null ? !phone.equals(that.phone) : that.phone != null) return false; return true; } @Override public int hashCode() { int result = id; result = 31 * result + (name != null ? name.hashCode() : 0); result = 31 * result + (address != null ? address.hashCode() : 0); result = 31 * result + (phone != null ? phone.hashCode() : 0); return result; } }
UserDao.java
package com.nf.dao; import com.nf.entity.User; import java.util.List; public interface UserDao { public List<User> getAllUsers() ; }
UserDaoImpl.java
package com.nf.dao; import com.nf.entity.User; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.query.Query; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import java.util.List; @Repository public class UserDaoImpl implements UserDao { @Autowired private SessionFactory sessionFactory; public List<User> getAllUsers() { Session session = sessionFactory.getCurrentSession(); Query<User> query = session.createQuery("from User", User.class); return query.getResultList(); } }
UserService.java
package com.nf.service; import com.nf.entity.User; import java.util.List; public interface UserService { public List<User> getAllUsers() ; }
UserServiceImpl.java
package com.nf.service; import com.nf.dao.UserDao; import com.nf.entity.User; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import javax.transaction.Transactional; import java.util.List; @Service public class UserServiceImpl implements UserService { @Autowired private UserDao userDao; @Transactional public List<User> getAllUsers() { return userDao.getAllUsers(); } }
UserAction.java
package com.nf.action; import com.nf.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.HashMap; import java.util.Map; @Controller @RequestMapping("/user") public class UserAction { @Autowired private UserService userService ; @RequestMapping("/query") public @ResponseBody Map<String,Object> query(){ Map<String,Object> hashMap = new HashMap<String, Object>(); hashMap.put("userList",userService.getAllUsers()); return hashMap; } }
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.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd "> <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> <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>
jdbc.properties//数据库配置文件
driverClass=com.mysql.cj.jdbc.Driver jdbcUrl=jdbc:mysql://localhost:3306/lib?serverTimezone=UTC user=root password=123456
spring-servlet.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:mvc="http://www.springframework.org/schema/mvc" 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.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd "> <!--扫描包--> <context:component-scan base-package="com.nf"></context:component-scan> <!--注解驱动--> <mvc:annotation-driven></mvc:annotation-driven> <!--启动视图解析器--> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/view/"></property> <property name="suffix" value=".jsp"></property> </bean> <!--静态资源（不用SpringMVC解释）--> <mvc:resources mapping="/js/**" location="/js/"></mvc:resources> <mvc:cors> <!--实现跨域的配置代码--> <mvc:mapping path="/**" allowed-origins="http://127.0.0.1:8020,http://192.168.191.1:8020" allowed-methods="POST,GET, OPTIONS,DELETE,PUT" allowed-headers="Content-Type,ContentType,Access-Control-Allow-Headers, Authorization, X-Requested-With" allow-credentials="true"/> </mvc:cors> </beans>
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"> <filter> <filter-name>OpenSessionInViewFilter</filter-name> <filter-class>org.springframework.orm.hibernate5.support.OpenSessionInViewFilter</filter-class> <init-param> <param-name>flushMode</param-name> <param-value>AUTO</param-value> </init-param> </filter> <filter-mapping> <filter-name>OpenSessionInViewFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!--SpringMVC的配置信息--> <servlet> <servlet-name>spring</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring-servlet.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>spring</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> <!-- 配置编码方式过滤器 --> <filter> <filter-name>characterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> </filter> <filter-mapping> <filter-name>characterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!--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>
pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.nf</groupId> <artifactId>SpringMvc</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>SpringMvc Maven Webapp</name> <url>http://maven.apache.org</url> <properties> <spring-version>5.0.1.RELEASE</spring-version> <jackson-version>2.9.3</jackson-version> <mysql-version>6.0.6</mysql-version> <c3p0-version>0.9.5.1</c3p0-version> <hibernate-version>5.2.12.Final</hibernate-version> </properties> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!--SpringMVC的依赖包，全面取代struts的--> <!--SpringMVC中的 @ResponseBody需要JSON解释器：jackson--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring-version}</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>${jackson-version}</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>${jackson-version}</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>${jackson-version}</version> </dependency> <!--Spring框架的依赖包--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring-version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${spring-version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>${spring-version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring-version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>${spring-version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>${spring-version}</version> </dependency> <!--接入hibernate（前置任务）--> <!--mysql_jdbc--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql-version}</version> </dependency> <!--c3p0--> <dependency> <groupId>com.mchange</groupId> <artifactId>c3p0</artifactId> <version>${c3p0-version}</version> </dependency> <!--hibernate--> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>${hibernate-version}</version> </dependency> </dependencies> <build> <finalName>SpringMvc</finalName> </build> </project>
HBuilder开发工具的index.html文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app"> <div v-for="art in userList"> <span>{{art.id}}</span> <span>{{art.name}}</span> <span>{{art.address}}</span> <span>{{art.phone}}</span> </div> </div> <!--<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>--> <script type="text/javascript" src="js/vue.js" ></script> <script src="js/jquery-3.2.1.min.js"></script> <script language="JavaScript"> var myModel = {"userList":[]}; var myViewModel = new Vue({ el:'#app', data:myModel }); $.ajax({ url:'http://localhost:8080/user/query',//实现跨域的URL路径 type:'GET', dataType:'json', timeout:3000, success:function(result){ alert(result); myModel.userList = result.userList; }, error:function(XMLHttpRequest, textStatus, errorThrown){ alert('服务器忙，请不要说脏话，理论上大家都是文明人'); alert(textStatus+XMLHttpRequest.status); } }); </script> </body> </html>
HardDream!!
