ssm+vue前后端分离框架整合实现（附源码）
前⾔
本⽂针对Spring+SpringMVC+Mybatis后台开发框架（基于maven构建）与vue前端框架（基于webpack构建）的项⽬整合进⾏介绍，对于ssm和vue单独项⽬的搭建不作为本⽂的重点，⽽着重介绍两者之间交互的要点。
SSM
项⽬结构
说明
项⽬有service和web两个⼦项⽬组成，web依赖于service，其中web主要是control层内容，service则对应service层，⽽MyBatis内容放在了service项⽬中，spring配置⽂件放在了web项⽬中。将control 层和service层分离成两个⼦项⽬，有利于项⽬的维护。
Vue
2.可以看出，这个是标准的使⽤webpack搭建的vue项⽬
前后端交互（重点）
重点来了，前后端交互⽆⾮是前端能够访问后端接⼝，并且成功接收到后端返回数据。在配置过程中，需要注意两个点，⼀是配置后端接⼝地址，⼆是跨域问题。
配置后端接⼝地址
在vue中，使⽤的是axios发送ajax请求和后台交互，我们需要main.js中配置axios默认访问地址。
在src/main.js⽂件中增加
// 引⽤axios，并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = "127.0.0.1:8080/blog/api"
//设置全局，每次ajax请求携带cookies
// axios.defaults.withCredentials = true
// 将API⽅法绑定到全局
Vue.prototype.$axios = axios
在config/index.js修改
测试代码：
created:function(){
var data = Qs.stringify({});
this.$axios
.post('/check', data)
.then(successResponse => {
if (de === 200) {
this.$notify({
title: '成功',
message: ssage,
type: 'success'
});
ssm框架实现登录功能}else{
this.$notify({
title:"失败",
message:ssage,
type:'error'
})
}
})
.catch(failResponse => {})
}
配置好之后，运⾏项⽬发现前端仍然是⽆法访问后台接⼝，出现以下报错。可以看出是出现跨域问题了。
解决跨域问题
对于跨域问题，SpringMVC提供了注解@CrossOrigin处理该问题（想知道@CrossOrigin做了什么，请移步），只需要在对应的接⼝中增加@CrossOrigin即可（也可通过全局配置的⽅式设置，这⾥不做介绍）。
MainController.java:
package com.ller;
import com.blogmon.Result;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/blog/api")
public class MainController {
private Logger logger = Logger ( MainController.class );
@RequestMapping ( value = "/check", method = RequestMethod.POST )
@ResponseBody
@CrossOrigin
public Result check () {
logger.info("MainController run");
Result result = new Result();
result.setMessage("SSM vue前后端框架搭建成功");
return result;
}
}
重启项⽬，返回正确结果。
源码
后台代码：
前端代码：
到此这篇关于ssm+vue前后端分离框架整合实现(附源码)的⽂章就介绍到这了，更多相关ssm+vue前后端分离内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。