擁抱開源 | 快速生成二維碼開源組件

快速添加二維碼開源組件

這是一個方便Java-web快速開發的一個小工具,咱們僅需兩個參數就能夠向前端返回對應的二維碼。前端

前言

這個組件來源於項目中有一個這樣的功能:掃碼添加好友。(下圖爲組件Demo實現)git

圖片描述

這是一個很常見的功能,大部分朋友也均可以實現,就是將相似Token這樣的用戶隨機生成且惟一的標籤轉換爲二維碼,再掃碼的時候由前端獲取並向後臺請求,藉助Token顯示好友信息,並由用戶決定是否添加好友。程序員

在作項目架構設計的時候,臨近週五,因此抽了時間,敲敲代碼,實現了這個功能,可是爲了之後的便捷使用,本身也將功能模塊抽成一個小組件。github

在這裏忽然提一下(題外話),週末看書時忽然以爲這句話頗有道理,可以減小架構師與程序員之間的溝通成本將會大大縮短項目的開發週期,一個懂得底層代碼實現的架構師,他或許對項目的程序員更瞭解,甚至在設計的時候就已經在構思如何寫底層代碼,本着這個思路,也硬是把模塊抽出來。web

流程與功能

流程大體上面已經說過了,並且也比較簡單,主要時如何考慮到之後的複用。若是是一個工具組件的話,那麼必定不能僅僅針對於個人業務來講。小程序

我儘量的加了一層封裝,讓咱們在業務層使用的時候方便一點。架構

咱們僅須要在控制層或者服務層,經過Autowired注入這個工具Bean,並調用create方法,你僅須要專一於你想要傳入的內容與對這個二維碼的命名。app

而相應的配置我都放在了application.yml函數

qrcode:
  handler: "/upload/**" #前端資源監聽路徑
  location: "file:E:/img/" #資源存放父目錄
  parents: "E:\\img/" #資源存放父目錄
  suffixname: ".png" #生成圖片的後綴名稱 默認
  format: "png" #生成圖片的格式 默認
  width: 300 #二維碼的寬 默認
  height: 300 #二維碼的高 默認

如上配置是你須要在application.yml中去配置,不過你可能只須要添加前三項,後面的都作了默認參數設定,這裏須要注意的是二維碼格式默認爲QRCode。工具

而對於業務層就僅僅須要調用就行了。

/**
 * 獲取我的二維碼
 * @param name
 * @return
 */
@PostMapping("/code")
public ResultVO code(@RequestParam("name") String name){
    String path = createQRCodeUtil.create(name,name);
    log.info(path);
    return ResultVoUtil.success(path);
}

工具將會自動返回圖片路徑,而前端僅須要在路徑前綴加一開始在application.yml中的handler。以下是小程序中的圖片請求加載js

/**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log(options);
    code.code(options.name,(res)=>{
      this.setData({
        img:'http://192.168.1.121:8080/upload/'+res.data
      })
    })
  }

擴展與升級

這是一個很簡單的版本,若是業務增長,它應該具有更加豐富的API,甚至符合各類各樣的業務。可是你的第一個版本已經完成了,甚至你能夠在項目中使用這樣一個組件。開發幾小時,可是發佈到Maven中央倉庫卻是花了我一天時間,以前沒有相似的經驗,因此提交的時候出了些問題,一直沒有提交上去,索性整改後就成功了,如今也能夠在Maven搜索中看到這個工具組件。
圖片描述
這裏更多想說的是,你不須要作到很好的一個項目,可是若是你想要開源一個小組件,主要一兩天就能夠了。
圖片描述

GitHub

項目地址:add-code
你能夠這樣使用:

<dependency>
    <groupId>com.github.UncleCatMySelf</groupId>
    <artifactId>add-code</artifactId>
    <version>1.0</version>
</dependency>

圖片描述


圖片描述

相關文章
相關標籤/搜索