欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)

 更新時(shí)間:2020年07月08日 15:19:45   作者:北嶺山下  
這篇文章主要介紹了ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文針對(duì)Spring+SpringMVC+Mybatis后臺(tái)開(kāi)發(fā)框架(基于maven構(gòu)建)與vue前端框架(基于webpack構(gòu)建)的項(xiàng)目整合進(jìn)行介紹,對(duì)于ssm和vue單獨(dú)項(xiàng)目的搭建不作為本文的重點(diǎn),而著重介紹兩者之間交互的要點(diǎn)。

SSM

項(xiàng)目結(jié)構(gòu)

說(shuō)明
項(xiàng)目有service和web兩個(gè)子項(xiàng)目組成,web依賴于service,其中web主要是control層內(nèi)容,service則對(duì)應(yīng)service層,而MyBatis內(nèi)容放在了service項(xiàng)目中,spring配置文件放在了web項(xiàng)目中。將control層和service層分離成兩個(gè)子項(xiàng)目,有利于項(xiàng)目的維護(hù)。

Vue


2.可以看出,這個(gè)是標(biāo)準(zhǔn)的使用webpack搭建的vue項(xiàng)目

前后端交互(重點(diǎn))

重點(diǎn)來(lái)了,前后端交互無(wú)非是前端能夠訪問(wèn)后端接口,并且成功接收到后端返回?cái)?shù)據(jù)。在配置過(guò)程中,需要注意兩個(gè)點(diǎn),一是配置后端接口地址,二是跨域問(wèn)題。

配置后端接口地址

在vue中,使用的是axios發(fā)送ajax請(qǐng)求和后臺(tái)交互,我們需要main.js中配置axios默認(rèn)訪問(wèn)地址。

在src/main.js文件中增加

// 引用axios,并設(shè)置基礎(chǔ)URL為后端服務(wù)api地址
var axios = require('axios')
axios.defaults.baseURL = "http://127.0.0.1:8080/blog/api"
//設(shè)置全局,每次ajax請(qǐng)求攜帶cookies
// axios.defaults.withCredentials = true
// 將API方法綁定到全局
Vue.prototype.$axios = axios

我們配置http://127.0.0.1:8080/blog/api為所有axios的默認(rèn)請(qǐng)求地址,其中后臺(tái)端口號(hào)為8080,而vue項(xiàng)目默認(rèn)的端口號(hào)也為8080,所有需要修改vue項(xiàng)目中的默認(rèn)訪問(wèn)端口號(hào),改為8090(不與后臺(tái)端口沖突即可)。

在config/index.js修改


測(cè)試代碼:

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 => {})
 }

配置好之后,運(yùn)行項(xiàng)目發(fā)現(xiàn)前端仍然是無(wú)法訪問(wèn)后臺(tái)接口,出現(xiàn)以下報(bào)錯(cuò)??梢钥闯鍪浅霈F(xiàn)跨域問(wèn)題了。

解決跨域問(wèn)題

對(duì)于跨域問(wèn)題,SpringMVC提供了注解@CrossOrigin處理該問(wèn)題(想知道@CrossOrigin做了什么,請(qǐng)移步Spring @CrossOrigin 注解原理),只需要在對(duì)應(yīng)的接口中增加@CrossOrigin即可(也可通過(guò)全局配置的方式設(shè)置,這里不做介紹)。

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;
  }

}

重啟項(xiàng)目,返回正確結(jié)果。

源碼

后臺(tái)代碼:SSMDemo
前端代碼:VueDemo

到此這篇關(guān)于ssm+vue前后端分離框架整合實(shí)現(xiàn)(附源碼)的文章就介紹到這了,更多相關(guān)ssm+vue前后端分離內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼

    關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼

    這篇文章主要介紹了關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • Vue Components 數(shù)字鍵盤的實(shí)現(xiàn)

    Vue Components 數(shù)字鍵盤的實(shí)現(xiàn)

    這篇文章主要介紹了Vue Components 數(shù)字鍵盤的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • vue?導(dǎo)入js中的兩種方法(示例詳解)

    vue?導(dǎo)入js中的兩種方法(示例詳解)

    這篇文章主要介紹了vue?導(dǎo)入js中的方法,本文通過(guò)兩種方法結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • 淺談Vue的組件間傳值(包括Vuex)

    淺談Vue的組件間傳值(包括Vuex)

    這篇文章主要介紹了Vue的組件間傳值(包括Vuex),全文通過(guò)舉例子及代碼的形式進(jìn)行了一個(gè)簡(jiǎn)單的介紹,希望大家能夠理解并且學(xué)習(xí)到其中知識(shí)
    2021-08-08
  • 通過(guò)cordova將vue項(xiàng)目打包為webapp的方法

    通過(guò)cordova將vue項(xiàng)目打包為webapp的方法

    這篇文章主要介紹了通過(guò)cordova將vue項(xiàng)目打包為webapp的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-02-02
  • vue-resource 攔截器使用詳解

    vue-resource 攔截器使用詳解

    本篇文章主要介紹了vue-resource 攔截器使用詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-02-02
  • Thymeleaf?+?Vue組件化開(kāi)發(fā)方式

    Thymeleaf?+?Vue組件化開(kāi)發(fā)方式

    這篇文章主要介紹了Thymeleaf?+?Vue組件化開(kāi)發(fā)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • 關(guān)于element同時(shí)使用Drawer和Dialog出現(xiàn)多個(gè)遮罩問(wèn)題

    關(guān)于element同時(shí)使用Drawer和Dialog出現(xiàn)多個(gè)遮罩問(wèn)題

    這篇文章主要介紹了關(guān)于element同時(shí)使用Drawer和Dialog出現(xiàn)多個(gè)遮罩問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • Element Table 自適應(yīng)高度的實(shí)現(xiàn)示例

    Element Table 自適應(yīng)高度的實(shí)現(xiàn)示例

    el-table的高度不能適應(yīng)不同電腦的分辨率,也不能跟隨瀏覽器的高度變化而變化的問(wèn)題,本文就來(lái)解決一下Element Table 自適應(yīng)高度,感興趣的可以了解一下
    2024-07-07
  • element實(shí)現(xiàn)合并單元格通用方法

    element實(shí)現(xiàn)合并單元格通用方法

    這篇文章主要介紹了element實(shí)現(xiàn)合并單元格通用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11

最新評(píng)論