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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
Apr 28 Javascript
js opener的使用详解
Jan 11 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 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教程 预定义变量
2009/10/23 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
JS删除对象中某一属性案例详解
2020/09/08 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python中防止sql注入的方法详解
2017/02/25 Python
python实现多线程网页下载器
2018/04/15 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
ipad上运行python的方法步骤
2019/10/12 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
公司企业表扬信
2014/01/11 职场文书
高级销售求职信
2014/02/21 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
党性教育心得体会
2014/09/03 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
python热力图实现的完整实例
2022/06/25 Python