vue+springMVC
1、搭建vue开发环境,参考http://www.jianshu.com/p/5ba253651c3b2、因为前后端分离需要解决跨域问题,使用nginx反向代理实现安装nginx,参考http://blog.csdn.net/dracotianlong/article/details/21817097注意:nginx -s reload|reopen|stop|quit需要加sudo
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
更多推荐
所有评论(0)