編寫第一個GET、POST介面[renren-fast框架系列(1)]

冰以東發表於2022-03-13

配置好 renren-fast 腳手架,學習完 Spring MVC 架構後,我需要具體除錯 renren-fast 的介面,比如要新增某個介面。

什麼是前後端分離

執行 renren-fast 專案時,我們訪問 http://localhost:8080/renren-fast/ 的結果:

可以看到,介面給出了相應的回應,狀態碼 401 Unauthorized 代表客戶端錯誤,指的是由於缺乏目標資源要求的身份驗證憑證,傳送的請求未得到滿足。

執行 renren-fast-vue 專案時,我們訪問 http://localhost:8001/#/login

接著使用Chrome自帶的網路工具:

點選 Headers 可以檢視 Request URL:

以此,我們確認訪問 後臺介面為:http://localhost:8080/renren-fast/captcha.jpg?uuid=11e75e91-f584-4e38-804b-d6776535eed9

同時還可以看到如下獲取頁面資訊的 headers:

請求的訪問介面是:http://localhost:8001/static/config/index.js

至此,我們便搞清楚了 renren-fast 前後端分離的業務是在說什麼,即:後端邏輯使用 renren-fast 實現,前端請求獲取的頁面資料,使用 renren-fast-vue 實現。

寫一個無需鑑權的GET介面

接下來我們基於 renren-fast 框架仿照 "/captcha.jpg" 寫第一個介面, "/captcha.jpg"介面程式碼:

	/**
	 * 驗證碼
	 */
	@GetMapping("captcha.jpg")
	public void captcha(HttpServletResponse response, String uuid)throws IOException {
		response.setHeader("Cache-Control", "no-store, no-cache");
		response.setContentType("image/jpeg");

		//獲取圖片驗證碼
		BufferedImage image = sysCaptchaService.getCaptcha(uuid);

		ServletOutputStream out = response.getOutputStream();
		ImageIO.write(image, "jpg", out);
		IOUtils.closeQuietly(out);
	}

我們寫一個 /testInterface 介面,在沒寫介面之前,我們訪問: http://localhost:8080/renren-fast/testInterface ,返回如下樣式:

我們編寫介面:

	/**
	 * 測試介面
	 */
	@GetMapping("/testInterface")
	public String testInterface() {
		return "hello";
	}

部署完之後訪問: http://localhost:8080/renren-fast/testInterface ,仍舊是展示:

那問題來了,我們這個介面部署的有問題嗎? 顯然是沒有問題的,只是一個簡單示例,接著我們在程式碼中搜尋 "{"msg":"![invalid token]","code":401}" ,可以發現有這麼一句:

這意味著即使我們部署了介面,如果token不存在,也依舊會返回 401,但我們這個介面不需要 token 鑑權,所以要配置無需鑑權的邏輯。

我們從哪裡可以知道怎麼配置如需鑑權呢? 還記得我們上面發現的一個無需鑑權的介面嗎?

http://localhost:8080/renren-fast/captcha.jpg?uuid=11e75e91-f584-4e38-804b-d6776535eed9

/captcha.jpg 這個介面無需登入,只要任意修改uuid就能獲取驗證碼,所以我們全域性搜尋 /captcha.jpg,可以發現有3處地方:

一處是配置 filterMap,也就是無需鑑權的介面,我們在同樣的地方加上我們自己的 testInterface 介面:

另一處是配置介面引數、描述、回包資料等,我們也簡單配置一下:

配置完畢後重新部署,重新訪問 http://localhost:8080/renren-fast/testInterface ,可以發現頁面展示:

介面部署成功!

除錯一個需要鑑權的GET介面

GET 介面可以簡單理解為從伺服器獲取資料,只是讀資料;而POST介面允許通過請求讓伺服器做一些事情:比如寫資料、刪資料等等。

當我們登入時,是向 http://localhost:8080/renren-fast/sys/login 傳送 POST 請求,我們來使用 Postman 模擬傳送 post請求,

首先,我們要獲取 驗證碼,我們請求: http://localhost:8080/renren-fast/captcha.jpg?uuid=11e75e93 ,獲取驗證碼:b676b

接著我們檢視 /sys/login 介面程式碼得知:

登入介面所必須的引數有:

  • uuid
  • captcha
  • username
  • password

使用Postman傳送Post請求成功:

我們獲取 token 為 5d68f7779618adba8a1fb37df4bbe8e6 ,那是不是意味著我們可以通過 token 訪問那些有許可權的介面了呢?我們試試:

我們使用 Postman 傳送 GET 請求: http://localhost:8080/renren-fast/sys/menu/nav?t=1647101933260&token=5d68f7779618adba8a1fb37df4bbe8e6

果然回包成功了:

小結

通過本篇文章的學習,我們明確瞭如下的內容:

  • renren-fast 前後端分離的設計理念
  • 學會配置一個無需鑑權的簡單介面
  • 通過postman除錯了鑑權post邏輯和get邏輯

至此我們可以自由編寫 鑑權介面 和 非鑑權介面。


文章首發:問我社群

相關文章