ssm+vue前后端分离框架整合实现(附源码)


Posted in Javascript onJuly 08, 2020

前言

本文针对Spring+SpringMVC+Mybatis后台开发框架(基于maven构建)与vue前端框架(基于webpack构建)的项目整合进行介绍,对于ssm和vue单独项目的搭建不作为本文的重点,而着重介绍两者之间交互的要点。

SSM

项目结构

ssm+vue前后端分离框架整合实现(附源码)

说明
项目有service和web两个子项目组成,web依赖于service,其中web主要是control层内容,service则对应service层,而MyBatis内容放在了service项目中,spring配置文件放在了web项目中。将control层和service层分离成两个子项目,有利于项目的维护。

Vue

ssm+vue前后端分离框架整合实现(附源码)

2.可以看出,这个是标准的使用webpack搭建的vue项目

前后端交互(重点)

重点来了,前后端交互无非是前端能够访问后端接口,并且成功接收到后端返回数据。在配置过程中,需要注意两个点,一是配置后端接口地址,二是跨域问题。

配置后端接口地址

在vue中,使用的是axios发送ajax请求和后台交互,我们需要main.js中配置axios默认访问地址。

在src/main.js文件中增加

// 引用axios,并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = "http://127.0.0.1:8080/blog/api"
//设置全局,每次ajax请求携带cookies
// axios.defaults.withCredentials = true
// 将API方法绑定到全局
Vue.prototype.$axios = axios

我们配置http://127.0.0.1:8080/blog/api为所有axios的默认请求地址,其中后台端口号为8080,而vue项目默认的端口号也为8080,所有需要修改vue项目中的默认访问端口号,改为8090(不与后台端口冲突即可)。

在config/index.js修改

ssm+vue前后端分离框架整合实现(附源码)

测试代码:

created:function(){
  var data = Qs.stringify({});
  this.$axios
  .post('/check', data)
  .then(successResponse => {
   this.responseResult = JSON.stringify(successResponse.data)
   if (successResponse.data.code === 200) {
    this.$notify({
     title: '成功',
     message: successResponse.data.message,
     type: 'success'
    });
   }else{
    this.$notify({
     title:"失败",
     message:successResponse.data.message,
     type:'error'
    })
   }
  })
  .catch(failResponse => {})
 }

配置好之后,运行项目发现前端仍然是无法访问后台接口,出现以下报错。可以看出是出现跨域问题了。

ssm+vue前后端分离框架整合实现(附源码)

解决跨域问题

对于跨域问题,SpringMVC提供了注解@CrossOrigin处理该问题(想知道@CrossOrigin做了什么,请移步Spring @CrossOrigin 注解原理),只需要在对应的接口中增加@CrossOrigin即可(也可通过全局配置的方式设置,这里不做介绍)。

MainController.java:

package com.blog.web.controller;


import com.blog.common.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.getLogger ( 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前后端分离框架整合实现(附源码)

源码

后台代码:SSMDemo
前端代码:VueDemo

到此这篇关于ssm+vue前后端分离框架整合实现(附源码)的文章就介绍到这了,更多相关ssm+vue前后端分离内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 #Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 #Javascript
实例讲解React 组件生命周期
Jul 08 #Javascript
详细分析React 表单与事件
Jul 08 #Javascript
详解JavaScript之ES5的继承
Jul 08 #Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 #jQuery
微信小程序拖拽排序列表的示例代码
Jul 08 #Javascript
You might like
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
js function使用心得
2010/05/10 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
Python三元运算实现方法
2015/01/12 Python
python中的__slots__使用示例
2015/02/26 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
Django如何重置migration的几种情景
2021/02/24 Python
初中三年毕业生的自我评价分享
2014/02/14 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
销售助理岗位职责
2015/02/11 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP