當前位置:首頁 » 網頁前端 » 保存樹形結構數據前端怎麼傳參
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

保存樹形結構數據前端怎麼傳參

發布時間: 2023-07-06 09:40:51

① SpringMVC前後端分離交互傳參詳細教程-

溫故而知新,本文為一時興起寫出,如有錯誤還請指正

本文後台基於SpringBoot2.5.6編寫,前端基於Vue2 + axios和微信小程序JS版分別編寫進行聯調測試,用於理解前後端分離式開發的交互流程,如果沒用過axios可以點我看之前的帖子

如果你沒有學過SpringBoot也不要緊,把他看做成SpringMVC即可,寫法完全一致(其實我不說你也發現不了)

本文主要講前後端交互流程,力求幫助新人快速入門前後端分離式開發,不會講關於數胡環境搭建部分的內容

在文章開頭快速的過一遍SpringMVC接收參數的幾種方式,一定要記住這幾種方式,看不懂或不理解都沒關系,後續會結合前端代碼過一遍,這里就不過多解釋了,直接上代碼

細心的人應該留意到了,最後使用變數接收參數的時候只接收了 username 這一個值,並沒有接收 password ,作為擴展在這里解釋一下, 不看也可以,看了不理解也沒關系,知道這個事兒就夠了,以後接觸多了就理解了

如果請求參數放在了請求體中,只有參數列表第一個變數能接收到值,這里需要站在Servlet的角度來看:

可以看到請求體內容是存到了 InputStream 輸入流對象中,想要知道請求體中的內容是什麼必須讀流中的數據,讀取到數據後會將值給第一個變數,而流中的數據讀取一次之後就沒了,當第二個變數讀流時發現流已經被關閉了,自然就接收不到

SpringMVC回顧到此為止,只需要記住那三種方式即可,在前後端交互之前先在Controller中寫個測試介面

這個介面對應的是GET類型的請求,這里直接在瀏覽器地址欄訪問測試一下:

這里推薦一個Chrome瀏覽器的插件 JSONView ,它可以對瀏覽器顯示的JSON數據進行格式化顯示,推薦的同時也提個醒,安裝需謹慎,如果JSON數據量太大的話頁面會很卡

之前已經寫好一個GET請求的測試介面了,這里就在前端寫代碼訪問一下試試看

代碼已經寫完了,接下來打開頁面試一下能不能調通:州凳

可以看到請求代碼報錯了,查看報錯信息找到重點關鍵詞 CORS ,表示該請求屬於 跨域請求

什麼是跨域請求?跨域請求主要體現在跨域兩個字上,當發起請求的客戶端和接收請求的服務端他們的【協議、域名、埠號】有任意一項不一致的情況都屬於跨域請求,拿剛剛訪問的地址舉例,VUE頁面運行在9000埠上,後台介面運行在8080埠上,埠號沒有對上所以該請求為跨域請求

如果在調試的時候仔細一點就會發現,雖然前端提示請求報錯了,但是後端還是接收到請求了,那為什麼會報錯呢?是因為後端返回數據後,瀏覽器接收到響應結果發現該請求跨域,然後給我們提示錯誤信息,也就是說問題在瀏覽器這里

怎樣才能讓瀏覽器允許該請求呢?我們需要在後端動點手腳,在返回結果的時候設置允許前端訪問即可

首先配置一個過濾器,配置過濾器有很多種實現的方法,我這里是實現Filter介面

過濾器創建完成了,回來看前端提示的報錯信息為 Access-Control-Allow-Origin ,意思是允許訪問的地址中並不包含當前VUE的地址,那麼我們就在響應結果時將VUE的地址追加上

添加完成後重啟項目後台就會發現請求已經成功並且拿到了返回值

再次冊畢旅進行測試,將後台的GetMapping修改為PostMapping,修改前端請求代碼後重新發起請求進行測試

可以看到POST請求還是提示跨域請求,對應的錯誤信息則是 Access-Control-Allow-Headers ,也就是說請求頭中包含了不被允許的信息,這里圖省事兒用 * 通配符把所有請求頭都放行

這樣處理之後,請求就可以正常訪問啦

路徑佔位參數,就是將參數作為請求路徑的一部分,例如你現在正在看的這篇博客使用的就是路徑佔位傳參

這種傳參方法很簡單,就不細講了,可以效仿他這種方法寫個測試案例

這里需要注意區分【路徑佔位傳參】和【路徑傳參】兩個概念,不要記混

什麼是路徑傳參?發起一個請求 http://localhost:8080/index?a=1&b=2 ,在路徑 ? 後面的都屬於路徑傳參,路徑傳參就是將參數以明文方式拼接在請求地址後面

路徑傳參使用【正常接收參數】中的實例代碼即可接收到值

除了自己手動拼接請求參數之外,axios在config中提供了params屬性,也可以實現該功能

表單類型參數,就是通過form表單提交的參數,通常用在例如HTML、JSP頁面的form標簽上,但如果是前後端分離的話就不能使用form表單提交了,這里可以手動創建表單對象進行傳值

需要注意,GET請求一般只用於路徑傳參,其他類型傳參需要使用POST或其他類型的請求

表單類型參數也是【正常接收參數】中的實例代碼接收值

小程序刪除了FormData對象,不能發起表單類型參數的請求,如果非要寫的話可以試著使用 wx.uploadFile 實現,這里就不嘗試了

請求體傳參,是在發起請求時將參數放在請求體中

表單類型參數需要使用上面【請求體接收參數】中的實例代碼接收值

axios如果發起的為POST類型請求,默認會將參數放在請求體中,這里直接寫即可

小程序代碼也是一樣的,當發起的時POST類型的請求時,默認會把參數放在請求體中

在實際開發中大概率不用寫前端代碼,只負責編寫後台介面,但怎樣才能知道前端請求是什麼類型參數?

關於這點可以通過瀏覽器開發者工具的【網路】面板可以看出來,網路面板打開時會錄制網頁發起的所有請求

路徑佔位傳參就不解釋了,沒啥好說的,這里介紹一下路徑傳參、表單傳參和請求體傳參

編寫好路徑傳參的請求代碼後切換到網路面板,點擊發起請求:

編寫好請求體傳參的請求代碼後切換到網路面板,點擊發起請求:

編寫好表單類型傳參的請求代碼後切換到網路面板,點擊發起請求:

掌握了前後端交互的流程就可以正常開發網站了,這里推薦後端返回一套規定好的模板數據,否則某些情況可能會比較難處理,例如這個查詢用戶列表的介面:

該介面乍一看沒毛病,拿到用戶列表數據後返回給前端用於渲染,合情合理,可是如果後端業務邏輯有BUG可能會導致前端接收到的結果為空,這種情況下前端就需要判斷,如果接收到的值為空,就提示請求出錯,問題貌似已經解決,但是如果表中本來就沒有任何數據的話有應該怎麼處理

上述的就是最常見的一種比較頭疼的情況,所以針對這種情況最好指定一套標準的返回模板進行處理

根據剛剛的舉例來看,返回結果中應該有一個標識來判斷該請求是否執行成功,如果執行失敗的話還應該返回失敗原因,響應給前端的數據會被轉換為JSON數據,使用Map集合來返回最合適不過了

在後台介面編寫完成後,一般情況下我們都需要進行測試,GET請求還好,瀏覽器直接就訪問呢了,如果是POST請求還要去寫前端代碼就很煩,這里介紹一款介面調試工具ApiPost

你可能沒聽過ApiPost,但是你大概率聽說過Postman,他們的用法幾乎一致,且ApiPost是國人開發的免費的介面調試工具,界面中文很友好

這里也可以看出來,form表單傳參其實也算在了請求體裡面,只不過使用的是 multipart/form-data 類型的參數而已,而之前提到的請求體傳參對應的就是 application/json

② ssm框架怎麼一次保存多條數據(往資料庫一次增加多條),前端怎麼傳參數到後端,後端怎麼接收數組

將後端資料庫的某個表連同其結構數據和數據重新分別導入所有的前端ACCESS資料庫後再刪除後端資料庫那個表就好了。當然最快捷的方法是只對一個前端這么做然後再分發那個前端給各個終端用戶。 記得導回後端表前先刪除前端資料庫對後端資料庫那張表的鏈接(鏈接表)。

③ js前台頁面與後台如何傳參

實現前端和後端的參數傳遞,其實就是前端(頁面)向伺服器發起一個請求,在請求中附帶了一些我們需要的參數。當伺服器端接收到這個請求後,通過解析得要我們要傳遞的參數,這要就達到了我們的目的了。

舉兩個例子

java我們可以通過:

request.getParameter("xxxx");//xxxx表示參數名稱來獲取請求參數名稱

C#我們可以通過:
GET請求參數用Request.QueryString,獲取POST請求參數用Request.Form

下面講下POST和GET請求的主要區別:

1、GET請求的數據會附在URL之後(就是 把數據放置在HTTP協議頭中),以?分割URL和傳輸數據,參數之間以&相連。POST把提交的數據則放置在是HTTP包的包體中。

2、GET方式提交的數據最多隻能是1024位元組,理論上POST沒有限制。

3、POST的安全性要比GET的安全性高。安全的含義是真正的Security的含義,比如:通過GET提交數據,用戶名和密碼將明文出現在URL上,因為(1)登錄頁面有可能被瀏覽器緩存,(2)其他人查看瀏覽器的歷史紀錄,那麼 別人就可以拿到你的賬號和密碼了。


④ 前端ajax非同步傳值以及後端接收參數的幾種方式

前台往後台傳值呢,有很多種方式,大家聽我細野猜細道來。

第一種呢,也是最簡單的一種,通過get提交方式,將參數在鏈接中以問頌襲型號的形式進行傳遞。

後台往前台傳值就要簡單一些,單個數據或者封裝數據可以直接使用return返回json數據給前台,如果是多個數據,可以使用```
PrintWriter進行傳值,具體操作如下

非非同步方式傳值
非非同步方式前台傳遞參數
1.與非同步方式類似,使用form直接提交或者在鏈接中拼接參數即可。

2.後台接受參數方式不變,與非同步方式完全相同。禪野
非非同步方式後台向前台傳遞數據

⑤ 前端傳遞數據給後台的幾種方式

1、通過表單傳遞

前端使用表單時,為name屬性賦值,後台controller層方法的參數只要與name的值相同,即可獲取到該屬性的值。

2、ajax

js中將值取出來,通過data這個key傳值,數據的值裡面也是以key、value的方式,即JSON格式。

data: {key:value},

3、session域或request域

後台將值存入request域裡面,使用request.getsession.setAttribute("名字","值")

前台使用sessionScope.名字取值即可。

⑥ 前後端分類,數據傳輸問題

目前我所知道的項目開發中,基本上都是前後端分離的。這就出現了數據傳輸的問題,前端傳給伺服器 或者 伺服器傳給前端的數據都是容易被別人竊取的。這里就要對傳輸的數據進行加解密,以保證數據安全。

下面介紹兩種前後端數據傳輸的方式

前後端約定一個key,將請求參數按照字母排序拼接成一個字元串(通常都是ASCll排序),然後拼接上key,最後用MD5或者SHA進行加密,得到一個加密的簽名sign,再把sign作為最後一個參數傳到服務端。

服務端拿到前端傳過來的結果之後,也將參數(排除sign)按照順序拼接成一個字元串,再拼接上key,再用MD5或者SHA進行加密,也得到了一個新的sign,服務端比較這兩個sign,如果相同就說明傳回來的數據沒有問題,如果不相同,說明數據被串改了。

例如:
傳遞的參數是

id=5&age=10

現在通過加簽 應該傳遞的參數為

id=5&age=10&sign=MD5(age=10&id=5)

服務端拿到的就是

id=5&age=10&sign=MD5(age=10&id=5)

服務端經過篩選參數,得到 id=5&age=10 ,然後進行排序得到 age=10&id=5 ,再MD5得到sign,兩個sign進行比較

目前我知道的根據秘鑰的使用方法,可以將密碼分為兩種

在對稱密碼中,加密、解密時使用的是同一個密鑰,我們常用的AES演算法就是對稱密碼演算法。具體AES演算法大家自己網路就好了

但是通常使用對稱密碼時,就會有秘鑰配送問題。

例:發送者A將使用對稱密碼加密過得信息發送給接收者B,只有將秘鑰發送給接收者B,B才能進行解密,這里A發送秘鑰給B的過程中,就容易被別人竊取秘鑰,別人拿著秘鑰也能進行解密。

如何解決秘鑰配送問題

我知道的幾種解決方法

公鑰密碼

公鑰密碼中,密鑰分為加密密鑰、解密密鑰2種,它們並不是同一個密鑰。

目前使用最廣泛的公鑰密碼演算法是RSA

加密密鑰,一般是公開的,因此該密鑰稱為公鑰(public key)

解密密鑰,由消息接收者自己保管的,不能公開,因此也稱為私鑰(private key)

公鑰和私鑰是一 一對應的,是不能單獨生成的,一對公鑰和密鑰統稱為密鑰對(key pair)

由公鑰加密的密文,必須使用與該公鑰對應的私鑰才能解密

由私鑰加密的密文,必須使用與該私鑰對應的公鑰才能解密

1.由消息的接收者,生成一對公鑰、私鑰

2.將公鑰發給消息的發送者

3.消息的發送者使用公鑰加密消息

混合密碼系統

不能很好地解決密鑰配送問題

加密解密速度比較慢

混合密碼系統,是將對稱密碼和公鑰密碼的優勢相結合的方法,解決了公鑰密碼速度慢的問題,並通過公鑰密碼解決了對稱密碼的密鑰配送問題

會話密鑰(session key)為本次通信隨機生成的臨時密鑰,作為對稱密碼的密鑰,用於加密信息,提高速度

發送出去的內容包括

前端A >>>>> 伺服器端B

發送過程,加密過程

接收過程,解密過程

文章參考了 猿天地的再談前後端API簽名安全? 和李明傑的底層原理iOS簽名機制

⑦ 前端與spring交互數據的處理和接收基礎方式

query params就是最簡單的問號傳參方式,而spring接受參數方式有以下幾種不需要額外第三方包。

前端傳參:

後台接收:

統一資源定位符(又稱URL)是一種資源命名或定位格式,用於指定或定址資源。 URL在Web上非常流行,在Web上使用URL格式定址或標識網站和Web資源。
2000年Roy Fielding博士在其博士論文中提出REST(Representational State Transfer)風格的軟體架構模式後,REST就基本上迅速取代了復雜而笨重的SOAP,成為Web API的標准了。
RESTful作為目前最流行的 API 設計規范,一定有著它獨有的魅力:強大、簡介、易上手。

前端傳參:

後台接收:

以前的form表單和formData是ajax2.0( XMLHttpRequest Level2)新提出的介面,利用FormData對象可以將form表單元素的name與value進行組合,實現表單數據的序列化。
而x- www.form-urlencoded 是post默認數據傳輸格式,跟Query Params傳參方式一樣。

前端傳參:

後端接收:

前端傳參:

後端接收:

前端傳參:

後端接收:

前端傳參:

ajax/axios傳輸json對象,適用於GET和POST請求,且此時contentType必須為application/x-www-form-urlencoded; charset=UTF-8,ajax會自動將json對象轉化為&連接的key=value格式的數據。axios需要指定傳參params,而GET請求就跟Query Params傳參方式一樣的,POST請求就放入post請求體中。

前端傳參:

      ajax/axios傳輸json字元串,是前端js把json對象字元串序列化到內存然後以http協議通過網路傳輸到後台,而spring使用網路套接字把傳過來的序列化的json對象進行反序列化轉換為java對象使用註解@RequestBoydy。而以前使用java原生HttpServlet 需要通過request.getInputStream()獲取數據然後使用JSONObject來反序列化。

ajax需要自己轉字元串,asios使用data傳參會默認給轉成json字元串

Servlet的框架是由兩個Java包組成:javax.servlet和javax.servlet.http。 在javax.servlet包中定義了所有的Servlet類都必須實現或擴展的的通用介面和類,在javax.servlet.http包中定義了採用HTTP[通信協議]的HttpServlet類。spring也是基於Servlet的框架的

什麼是序列化和反序列化
對象的序列化就是把對象轉化成位元組序列進行發送、存儲,反序列化在接收和讀取的時候把位元組序列轉化成對象。

前端傳參:

後台接收:這是json字元串用對象接收,也可以使用Map等。springboot項目添加spring-boot-starter-web依賴,默認提供了Jackson用於解析json,da大部分人使用om.alibaba.fastjson

通過關鍵欄位@RequestBody,標明這個對象接收json字元串,然後自己使用Gson、fastjson等自己解析轉對象