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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
安装APACHE
2007/01/15 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
php 多个变量指向同一个引用($b = &$a)用法分析
2019/11/13 PHP
Javascript表单验证要注意的事项
2014/09/29 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
js实现双色球效果
2020/08/02 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
微信跳一跳python代码实现
2018/01/05 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
如何在sublime编辑器中安装python
2020/05/20 Python
python 5个实用的技巧
2020/09/27 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
什么是接口(Interface)?
2013/02/01 面试题
超市七夕促销活动方案
2014/08/28 职场文书
幼儿园感谢信
2015/01/21 职场文书
冰峪沟导游词
2015/02/09 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis