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 相关文章推荐
javascript 类型判断代码分析
Mar 28 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 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中redis的用法深入解析
2014/02/20 PHP
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
python实现的一个p2p文件传输实例
2014/06/04 Python
让python在hadoop上跑起来
2016/01/27 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
英语专业推荐信
2013/11/16 职场文书
毕业证丢失证明
2014/01/15 职场文书
运动会通讯稿200字
2014/02/16 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python