微信小程式存取mysql資料庫流程詳解

2022-08-02 14:03:37

1 開通雲上的mysql

經過詢價，我發現阿里雲的資料庫是比較便宜的，新人購買非常划算。對於愛學習的博主來說，果斷購買一個。

按照操作指引購買後，雲會幫你建立一系列的環境，在控制檯就可以看到屬於自己的範例

點選操作列上的管理，就可以建立我們自己的資料庫。設定的步驟是先建立資料庫的賬號

然後建立一個資料庫

都設定好之後就可以登入資料庫，建立表，加資料了

剛建立好的資料庫只能內網使用，我們如果希望在小程式裡存取還需要開通外網，這裡加入白名單即可

2 建立自定義聯結器

資料庫準備好了之後，我們就可以建立自定義聯結器來存取資料庫了。登入微搭的控制檯，點選新建自定義聯結器

輸入聯結器的名稱和標識

點選立即建立，建立自定義聯結器方法

意圖選擇查詢列表，型別選擇雲開發雲函數

3 建立雲函數

點選新建雲函數

錄入函數名稱

點選確定就可以完成雲函數的建立

4 安裝依賴

我們建立好雲函數後，從列表上點選函數名稱進入

進入後切換到函數程式碼

如果我們點選儲存並安裝依賴會提示缺失package.json

把內容複製一下，點導覽列的檔案，建立一個檔案，命名為package.json

將我們的內容複製到檔案裡，賦值好之後選中index.js，貼入如下程式碼

const mysql = require("mysql2/promise");
exports.main = async (event, context) => {
    try {
        const connection = await mysql.createConnection({
            host: '你的資料庫的公網ip',
            user: '資料庫的使用者名稱',
            password: '資料庫的密碼',
            port: 3306,
            database: '資料庫名',
        });
        console.log('已連線')
        const [rows, fields] = await connection.execute('SELECT * FROM `user`;');
                // 這裡可以對返回資料做加工
        return rows;
    } catch(err) {
        console.log('錯誤連線', err);
        return err;
    }
};

需要替換成你自己的資料庫的對應資訊，替換好之後，因為我們引入了mysql的庫，先需要安裝依賴，在package.json裡重新錄入如下程式碼

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@cloudbase/node-sdk": "latest",
    "mysql2":"latest"
  }
}

依賴裡我們多了一個mysql2的依賴，替換好之後再點選底部的儲存並安裝依賴按鈕，安裝對應的庫。安裝成功之後我們可以在node_modules資料夾下找到mysql2的資料夾

這樣依賴就安裝好了，依賴安裝好之後我們可以點選方法測試，看看是否連線上資料庫，資料有沒有正確的返回

如果看到成功之後就說明一切都做好了。

5 出參對映

雲函數建立好之後，我們回到微搭的自定義聯結器介面，選擇我們剛剛建立好的雲函數

點選方法測試，看一下雲函數能否正常呼叫，如果返回成功，就可以點選出參對映了

這樣一個自定義聯結器就建立好了

6 在小程式中使用聯結器

聯結器相當於我們的後臺方法，還需要在前端進行呼叫，可以建立一個變數，用來接收聯結器呼叫的返回值

在頁面的生命週期函數裡我們通過api的形式來呼叫聯結器來獲取資料

export default {
  async onPageLoad(query) {
    //console.log('---------> LifeCycle onPageLoad', query)
    const result = await app.cloud.callConnector({
        name: 'ljmysql_xi2ad3x',
        methodName: 'ljmysql',
        params: {}, // 方法入參
    });
    console.log(result)
    $page.dataset.state.list = result
  },
  onPageShow() {
    //console.log('---------> LifeCycle onPageShow')
  },
  onPageReady() {
    //console.log('---------> LifeCycle onPageReady')
  },
  onPageHide() {
    //console.log('---------> LifeCycle onPageHide')
  },
  onPageUnload() {
    //console.log('---------> LifeCycle onPageUnload')
  },
}

資料獲取到之後，我們就新增元件，並且給元件繫結值就可以