vue+springMVC

1、搭建vue开发环境，参考
http://www.jianshu.com/p/5ba253651c3b
2、因为前后端分离需要解决跨域问题，使用nginx反向代理实现
安装nginx，参考http://blog.csdn.net/dracotianlong/article/details/21817097
注意：nginx -s reload|reopen|stop|quit需要加sudo才能执行

修改nginx配置文件，参考：
http://www.jianshu.com/p/46b083bfd5e0
主要修改端口号，域名，前段需要请求的路径信息，样例如下：
说明：前段vue项目是8080端口，后端springmvc项目是8082端口，具体替换成自己的地址即可
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
#root html;
#index index.html index.htm;
proxy_pass http://localhost:8080; 此处必须加这个代理，请求localhsot时会自动代理到这个地址，请求localhost相当于一个域名，该域名即vue项目的域名，如果直接请求localhost:8080么有走nginx反向代理，会找不到对应的后端请求地址，通过域名请求能代理到对应后端服务器上，见location /apis部分
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location /apis {
rewrite ^/apis/(.*)/1 break;
proxy_pass http://127.0.0.1:8082;
}
3、安装jquery插件，使用全局安装即可：
全局安装
首先在package.json里加入，
dependencies:{
“jquery” : “^2.2.3”
}
然后 nmp install

在webpack.base.conf.js或者webpack.config.js里加入
var webpack = require(“webpack”)…其实已经有了，在文件开头处，不用重新引用

在module.exports的最后加入
plugins: [
new webpack.ProvidePlugin({
$: “jquery”,
jQuery: “jquery”
})
],
然后一定要重新 run dev
在main.js 或者App.vue引入即可，引入方式如下：import $ from ‘jquery’

4、搭建简单springmvc环境：
创建maven webapp项目
main目录下创建java目录，并标记为source root
pom配置：

---

<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/maven-v4_0_0.xsd">  <modelVersion>4.0.0</modelVersion>  <groupId>lili</groupId>  <artifactId>springVue</artifactId>  <packaging>war</packaging>  <version>1.0-SNAPSHOT</version>  <name>springVue Maven Webapp</name>  <url>http://maven.apache.org</url>  <properties>    <spring.version>4.3.7.RELEASE</spring.version>    <vue.version>2.1.3</vue.version>    <log4j.version>2.8.2</log4j.version>  </properties>  <dependencies>    <dependency>      <groupId>junit</groupId>      <artifactId>junit</artifactId>      <version>3.8.1</version>      <scope>test</scope>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-webmvc</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>        <groupId>org.webjars</groupId>      <artifactId>vue</artifactId>      <version>${vue.version}</version>    </dependency><dependency>  <groupId>javax.servlet</groupId>  <artifactId>jstl</artifactId>  <version>1.2</version></dependency><dependency>  <groupId>taglibs</groupId>  <artifactId>standard</artifactId>  <version>1.1.2</version></dependency><!--<dependency>  <groupId>org.apache.logging.log4j</groupId>  <artifactId>log4j-core</artifactId>  <version>${log4j.version}</version></dependency>-->  </dependencies>  <build><finalName>springVue</finalName>  </build></project>

web.xml配置：

---

<!DOCTYPE web-app PUBLIC

“-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN”
“http://java.sun.com/dtd/web-app_2_3.dtd” >

<web-app>  <display-name>Archetype Created Web Application</display-name>  <!--spring监听器，指定容器初始化的方法-->  <listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  </listener>  <!--指定bean配置文件所在目录，默认在WEB-INF下-->  <context-param><param-name>contextConfigLocation</param-name><param-value>/WEB-INF/applicationContext.xml</param-value>  </context-param>  <!--定义mvc的相关内容，并配置拦截的url-->  <servlet><servlet-name>springVue</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param>  <param-name>contextConfigLocation</param-name>  <!-- 可以自定义servlet.xml配置文件的位置和名称，默认为WEB-INF目录下，名称为[<servlet-name>]-servlet.xml，如spring-servlet.xml --> <param-value>/WEB-INF/springVue-servlet.xml</param-value>   </init-param>   <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping>   <servlet-name>springVue</servlet-name>   <url-pattern>/</url-pattern> </servlet-mapping></web-app>

WEB-INF下创建
applicationContext.xml

---

<beans xmlns="http://www.springframework.org/schema/beans"   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"   xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"   xsi:schemaLocation="http://www.springframework.org/schema/beans                       http://www.springframework.org/schema/beans/spring-beans-4.0.xsd                       http://www.springframework.org/schema/tx                       http://www.springframework.org/schema/tx/spring-tx-4.0.xsd                       http://www.springframework.org/schema/aop                       http://www.springframework.org/schema/aop/spring-aop-4.0.xsd                       http://www.springframework.org/schema/context                       http://www.springframework.org/schema/context/spring-context-4.0.xsd"></beans>

WEB-INF下创建servletname-servlet.xml本人是springVue-servlet.xml

---

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xmlns:mvc="http://www.springframework.org/schema/mvc"   xmlns:context="http://www.springframework.org/schema/context"   xmlns:aop="http://www.springframework.org/schema/aop"   xmlns:tx="http://www.springframework.org/schema/tx"   xsi:schemaLocation="http://www.springframework.org/schema/beans                    http://www.springframework.org/schema/beans/spring-beans-4.0.xsd                    http://www.springframework.org/schema/mvc                    http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd                    http://www.springframework.org/schema/context                    http://www.springframework.org/schema/context/spring-context-4.0.xsd                    http://www.springframework.org/schema/aop                    http://www.springframework.org/schema/aop/spring-aop-4.0.xsd                    http://www.springframework.org/schema/tx                    http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">    <!-- 设置使用注解的类所在的jar包 -->        <context:component-scan base-package="controller"/>    <!-- 启用spring mvc 注解 -->    <context:annotation-config/>    <!-- 对转向页面的路径解析。prefix：前缀， suffix：后缀 -->    <!-- 对模型视图名称的解析，在请求时模型视图名称添加前后缀,如果采用前后端分离的框架，该部分其实无用-->      <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">    <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>    <property name="prefix" value="/WEB-INF/views/"/>    <property name="suffix" value=".jsp"/>      <property name="order" value="0"/>  </bean><!-- html视图解析器 必须先配置freemarkerConfig,注意html是没有prefix前缀属性的<bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">    <property name="templateLoaderPath">        <value>/WEB-INF/views/</value>    </property></bean><bean id="htmlviewResolver"      class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">    <property name="suffix" value=".html" />    <property name="order" value="1"></property>    <property name="contentType" value="text/html;charset=UTF-8"></property></bean>--></beans>

src同级创建log4j.properties

设置

log4j.rootLogger = debug,stdout,D,E

输出信息到控制抬

log4j.appender.stdout = org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target = System.out
log4j.appender.stdout.layout = org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern = [%-5p] %d{yyyy-MM-dd HH:mm:ss,SSS} method:%l%n%m%n

输出DEBUG 级别以上的日志到=E://logs/error.log

log4j.appender.D = org.apache.log4j.DailyRollingFileAppender
log4j.appender.D.File = E://logs/log.log
log4j.appender.D.Append = true
log4j.appender.D.Threshold = DEBUG
log4j.appender.D.layout = org.apache.log4j.PatternLayout
log4j.appender.D.layout.ConversionPattern = %-d{yyyy-MM-dd HH:mm:ss} [ %t:%r ] - [ %p ] %m%n

输出ERROR 级别以上的日志到=E://logs/error.log

log4j.appender.E = org.apache.log4j.DailyRollingFileAppender
log4j.appender.E.File =E://logs/error.log
log4j.appender.E.Append = true
log4j.appender.E.Threshold = ERROR
log4j.appender.E.layout = org.apache.log4j.PatternLayout
log4j.appender.E.layout.ConversionPattern = %-d{yyyy-MM-dd HH:mm:ss} [ %t:%r ] - [ %p ] %m%n

5、参考样例后端代码：
package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

/**
* Created by lili on 2017/4/18.
*/
@Controller
public class SayHello {
@RequestMapping(“hello1”)
public ModelAndView sayHello(){
System.out.println(“test”);
ModelAndView view = new ModelAndView();
view.setViewName(“test”);
return view;

}@RequestMapping("hello")@ResponseBodypublic String say(){    System.out.println("hello world");    return "hello world";}

}
6、App.vue

---

<template>  <div id="app">    <img src="./assets/logo.png">    <h1></h1>    <h1>{{ msg }}</h1>  </div></template><script>import $ from 'jquery'export default {name: 'app',data: function () {    return {        msg: ''    }},methods: {    getlist: function () {        var self = this        $.ajax({            url: '/apis/hello',            type: 'post',            success: function (data) {                self.msg = data                console.log(data)                console.log(this.msg)            },            error: function (data) {                console.log(data)            }        })    }},mounted: function () {    this.getlist()}

}

<style lang="scss">

#app {
font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}

h1, h2 {
font-weight: normal;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 10px;
}

a {
color: #42b983;
}

7、启动后端程序，启动前段程序，访问localhost或者localhost:80