ssm+vue前后端分離框架整合實現(附源碼)_vue.js

來源:腳本之家  責任編輯:小易  

寫個簡單的吧a.php這是你要提交的數據點擊提交按鈕就跳到b頁面了b.phpecho$_POST['test'];打印a提交過來的數據,如果有數據你就自己寫sql語句存入數據庫就好了www.anxorj.tw防采集請勿采集本網。

前言

本文針對Spring+SpringMVC+Mybatis后臺開發框架(基于maven構建)與vue前端框架(基于webpack構建)的項目整合進行介紹,對于ssm和vue單獨項目的搭建不作為本文的重點,而著重介紹兩者之間交互的要點。

前端權限控制并不是新生事物,早在后端 MVC 時代,web 系統中就已經普遍存在對按鈕和菜單的顯示/隱藏控制,只不過當時它們是由后端程序員在 jsp 或者 php 模板中實現的。隨著前后端分離架構的

SSM

項目結構

說明

項目有service和web兩個子項目組成,web依賴于service,其中web主要是control層內容,service則對應service層,而MyBatis內容放在了service項目中,spring配置文件放在了web項目中。將control層和service層分離成兩個子項目,有利于項目的維護。

前端的基礎知識掌握的不錯,可以嘗試去學習框架,angular、vue、bootstrap、layui等等,難度并不大,可以先從基礎框架入手,參考下圖,一步一步來唄。不說其他,能力滿足了,公司自然沒有拒絕的理由。加油

Vue

2.可以看出,這個是標準的使用webpack搭建的vue項目

150.前后端分離、分布式集群架構、垂直架構 151.SSM(SpringMVC+Spring+MyBatis)整合實戰 152.Git、Maven 私服Nexus 153.第三方接入技術(微信、阿里) 154.MySQL 電商實戰 155.Redis(緩存服務) 156.

前后端交互(重點)

重點來了,前后端交互無非是前端能夠訪問后端接口,并且成功接收到后端返回數據。在配置過程中,需要注意兩個點,一是配置后端接口地址,二是跨域問題。

配置后端接口地址

在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"http://設置全局,每次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修改

測試代碼:

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

配置好之后,運行項目發現前端仍然是無法訪問后臺接口,出現以下報錯?梢钥闯鍪浅霈F跨域問題了。

解決跨域問題

對于跨域問題,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;@[email protected]("/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; }}

重啟項目,返回正確結果。

源碼

后臺代碼:SSMDemo

前端代碼:VueDemo

到此這篇關于ssm+vue前后端分離框架整合實現(附源碼)的文章就介紹到這了,更多相關ssm+vue前后端分離內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持真格學網!

表單屬性的命名還是直接用user.name,user.age。去命名,然后在后臺的話,用user的model去接收,比如User user=this.getModel(User.class,"user");這樣就能接收到整個表單對象,注意屬性的名稱要跟實體類一只,括號中的“user”是你前臺頁面的對象名,就是說,如果你的前臺頁面是appUser.name,那掛號里面的就應該寫成“appUser”,建議你看看文檔,里面都有說明內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • spring boot+vue 的前后端分離與合并方案實例詳解
  • vue2 前后端分離項目ajax跨域session問題解決方法
  • 詳解vuejs前后端分離跨域問題
  • 詳解vue微信授權登錄前后端分離較為優雅的解決方案
  • 詳解前后端分離之vuejs前端
  • springboot+vue前后端分離,使用springsecurity完美處理權限問題的解決方法
  • vue開發之watch監聽數組、對象、變量操作分析
  • 詳解vue組件基礎
  • vue中的 $slot 獲取插槽的節點實例
  • vue+導航錨點聯動-滾動監聽和點擊平滑滾動跳轉實例
  • vue router 通過路由來實現切換頭部標題功能
  • 淺析vue中method與computed的區別
  • vuejs如何配置less
  • axios發送post請求springmvc接收不到參數的解決方法
  • vue.js 2.0實現簡單分頁效果
  • vue基礎知識--axios合并請求和slot
  • 后臺ssm框架 前臺vue 表單提交都有內容的后臺接收為空
  • ssm+vue跨域處理
  • vue+ssm 如何與數據庫交互,讀取所有數據
  • Spring MVC 怎么和vue.js做整合?
  • 如何用 Vue 實現前端
  • 24了,寫了一年的前端,一年的java,一年的服務器硬件,不知道自己究竟想做什么?
  • 課工場課程真的很好嗎?
  • 學了兩年java編程,現在從事的不是開發崗位,但是平時我想鞏固一下以前學的知識,如今一操作發現忘了好多
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全yui.ext相關prototypejqueryangularjsjsonlib_jsjs面向對象extjsmootoolsseajsdojovue.jsbackbone.js其它首頁javascriptjavascript類庫spring boot+vue 的前后端分離與合并方案實例詳解vue2 前后端分離項目ajax跨域session問題解決方法詳解vuejs前后端分離跨域問題詳解vue微信授權登錄前后端分離較為優雅的解決方案詳解前后端分離之vuejs前端springboot+vue前后端分離,使用springsecurity完美處理權限問題的解決方法vue開發之watch監聽數組、對象、變量操作分析詳解vue組件基礎vue中的 $slot 獲取插槽的節點實例vue+導航錨點聯動-滾動監聽和點擊平滑滾動跳轉實例vue router 通過路由來實現切換頭部標題功能淺析vue中method與computed的區別vuejs如何配置lessaxios發送post請求springmvc接收不到參數的解決方法vue.js 2.0實現簡單分頁效果vue基礎知識--axios合并請求和slotvue引用js文件的多種方式(推薦)vue之父子組件間通信實例講解(pr簡單理解vue中props屬性vue props用法詳解(小結)vue元素的隱藏和顯示(v-show指令vue.js常用指令匯總(v-if、v-fovue 進階教程之v-model詳解使用vue實現圖片上傳的三種方式vue.js實戰之利用vue-router實現vue實現文件上傳功能vue過濾器用法實例分析vue mint-ui 實現省市區街道4級聯動示例(element-ui組件 navmenu 導航菜單的具體使結合vue控制字符和字節的顯示個數的示例vue 實現分頁與輸入框關鍵字篩選功能ant-design-vue按需加載的坑的解決vue自動路由-單頁面項目(非build時構建)深入探索vuejs scoped css 實現原理vue.js $refs和$emit 父子組件交互的方法vue實現自定義h5視頻播放器的方法步驟
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载