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实战_读书笔记2 选择器
Jan 22 Javascript
javascript表单验证大全
Aug 12 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 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
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python实现抖音点赞功能
2019/04/07 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
竞职演讲稿范文
2014/01/11 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
python中if和elif的区别介绍
2021/11/07 Python