技术介绍
前端：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
