前后端分离项目实战（vue2.0 + SSM）

介绍

前端：vue.js、elementUI、axios、vue-router

后端：SSM（Spring+SpringMVC+MyBatis）

数据库：MySql

运行界面

后端

登录界面

首页以及其他页面（部分展示）

 

前端

首页

详情页 

登录

核心代码 

这边只展示核心代码（跨域问题），普通的SSM框架项目，没有使用maven工程，源码已放在Github上，地址在文章末。

后端配置跨域

 新建一个CorsFilter.java文件

import org.springframework.web.filter.OncePerRequestFilter;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CorsFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        response.addHeader("Access-Control-Allow-Origin", "*");                                      //允许所有网址发来的请求
        response.addHeader("Access-Control-Allow-Methods", "REQUEST,GET,POST,PUT,DELETE,PATCH,HEAD");//允许的请求方法
        response.addHeader("Access-Control-Allow-Headers", "Content-Type");                          //,X-Requested-With,auth_token
        response.addHeader("Access-Control-Max-Age", "1800");//30 min

        filterChain.doFilter(request, response);
    }
}

在web.xml中进行配置，注意文件路径位置要正确。注意在调用接口时，加上注解@ResponseBody

   <filter>
        <filter-name>cors</filter-name>
        <filter-class>cn.smbms.interceptor.CorsFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>cors</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

前端配置

在config/index.js中

        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: '', // 后端地址
                changeOrigin: true, //是否跨域
                https: true,
                pathRewrite: {
                    '^/api': '' //需要rewrite的,
                }
            }
        },

项目源码地址：https://github.com/dragon-lee-add/JavaEE-Vue