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")
@ResponseBody
public 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