2019高考報名人數達到了 1031 萬的新高，作為一名三年前參考高考的準程式猿，趕在高考前，加班加點從零開始做了一款高考查分小程式，算是一名老學長送給學弟學妹們的高考禮。上線僅 1 個月，使用者數就突破了 1k，關於小程式的介紹就不多說了，可以去搜【歷年高考分數線查詢】體驗，今天主要談談技術原理和實現細節。

資料來源

小程式後臺共收錄近 30w 條資料，包含 2008-2017 年所有重點高校的各個批次的文理分科錄取分數線以及 2008-2018 所有采用新課標一卷、新課標二卷、新課標三卷以及部分自主命題省份的從提前批到高職專科批的錄取分數線，勉強稱得上內容翔實。

所有資料均採集自各大院校和各高考相關網站，由於資料量巨大，為提高速度，使用了 concurrent.futures （需要 Python3.5+) 模組裡的 ThreadPoolExecutor 來構建執行緒池來併發執行多工。

資料庫採用的是 PgSQL,一款號稱世界上最強大的開源資料庫產品，所有資料均存在新建的 gaokao 資料庫中，其下有兩個表，university(院校的錄取分）和 province(省份的批次線）

university 表說明

欄位	解釋
name	院校名稱
stu_loc	生源地
stu_wl	文理科
pc	錄取批次
year	年份
score	錄取平均分

province 表說明

欄位	解釋
year	年份
stu_loc	考生所在地
stu_wl	文理科
pc	批次
control	本批次最低控制線

30w 的資料量，多個站點，併發爬取，資料衝突是不可避免地，在執行插入之前，首先過濾掉殘缺不全的資料，比如在插入 university 表時某條資料缺少 pc 欄位，那麼這條記錄就應該被捨棄，最嚴重的是資料重複，我採用的解決辦法是：先查詢待插入的資料是否已經存在, university 表的主碼是（name,stu,stu_wl,pc,year),因為現實約束一個院校只能在一個年份在一個類別一個批次只能有一個錄取平均分，如果不存在，才執行最後的插入，並 commit 提交事務。

後臺搭建

在 30w 條資料拿到後，我打算後臺採用 Flask+PgSQL 的模式實現，甚至在後臺在阿里雲伺服器部署好，小程式端在開發者工具聯調通過之後，小程式上線遇到到一個大麻煩，因為小程式要求線上執行不能通過 ip 地址訪問後臺，必須通過備案的域名訪問，域名購買一個倒不麻煩，只是域名備案比較耗時間，需要一週多時間，而當時距離高考也就不到 5 天，在手足無措之時，無意間看到小程式雲開發，關於小程式雲開發，官網的介紹是:

開發者可以使用雲開發開發微信小程式、小遊戲，無需搭建伺服器，即可使用雲端能力。

雲開發為開發者提供完整的原生雲端支援和微信服務支援，弱化後端和運維概念，無需搭建伺服器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的雲服務相互相容，並不互斥。

也就是說，只要把資料匯入小程式自帶的後臺，就能通過小程式平臺的 API 訪問到這些資料，以前瞭解過第三方的 LeanCloud雲 和 Bomb 雲,沒想到小程式現在集成了這些功能，不得不佩服一下騰訊。

也就是，接下來的後臺的工作是主要是匯入資料，查詢小程式後臺可知，後臺支援匯入 json 或者 csv 格式的資料。於是我就寫了個指令碼，把資料從本地資料庫匯出到 json 檔案中：

import psycopg2
import json

# 連線 pgsql 資料庫，為保證隱私，密碼已隱藏
conn = psycopg2.connect(database="gaokao", user="postgres", password="*******", host="127.0.0.1", port="5432")
cur = conn.cursor()

cur.execute('select stu_loc,year,stu_wl,pc,control from province')
result = []
query_res = cur.fetchall()
for i in query_res:
    item = {}
    item['stu_loc'] = i[0]
    item['year'] = i[1]
    item['wl'] = i[2]
    item['pc'] = i[3]
    item['score'] = i[4]
    result.append(item)
# indent=2 控制 json 格式的縮排
# ensure_ascii 控制中文的正常顯示
with open("province.json", 'w', encoding="utf-8") as f:
    f.write(json.dumps(result, indent=2, ensure_ascii=False))

這裡還有有個坑需要說明一下，小程式後臺要求的 json 格式和我們平常意義上的 json 格式還有點區別，首先，json 的所有內容不能被 [ 和 ] 包括起來，而且每個被 {} 所包括得資料項之間不能有逗號。

選用 notepad++ 開啟原來的 json 檔案，使用替換功能就能解決，把 [ 和 ] 替換成空格，把 }，替換成 } 即可。

修改之後，在小程式後臺通過匯入該 json 檔案，後臺搭建就基本完成了。

小程式端編寫

關於小程式端的編寫，我主要談談兩點經驗，第一是頁面的編寫，比如下面這個介面。

最開始想實現這樣的效果，完全沒有思路，最後在從自定義模態彈窗那得到了思路，一開始地區院校這個下拉框對應的佈局是隱藏的，在 wxml 檔案中通過 hidden=true 控制，一點選 地區/院校 下拉框，就把 hidden 置為 false，如果開始有其他下拉框對應的佈局的 hidden 屬性是 false 的話，同時要把這些佈局的 hidden 屬性置為 true 來隱藏其他佈局，當然，這裡的 true or false 需要在 js 裡通過 setData() 動態修改，把修改後的資料從資料層渲染到檢視層。

第二是關於小程式雲開發的原生 Bug,查詢後臺時一次只能最多查詢到 20 條資料，要實現一次得到所有匹配的結果，需要解決兩個問題，第一個問題很自然而然就能想到，第一次查到 20 條資料後，第二次跳過前 20 條再取 20 條，第三次跳過前 40 條再取 20 條，以此類推；還有一個更為致命的問題，查詢後臺的 API 獲取結果的回撥函式的 非同步 的，也就是說，為了保證獲得完整資料，第二次查詢需要寫在第一次查詢的回撥裡，第三次查詢需要寫在第二次查詢的回撥裡，而且你還不能顯式地知道要查詢多少次，需要寫多少層這樣的巢狀，以及煩人的同名變數覆蓋問題，這就是所謂的 非同步地獄。為了解決這個問題，需要我們編寫程式碼把這個非同步方法轉成同步的，具體做法是：

先在所要新增功能的js頁面中匯入 runtime.js 檔案，同時把runtime.js檔案放入相應資料夾
；
const regeneratorRuntime = require("../runtime");

runtime.js 下載地址：https://github.com/inspurer/CampusPunchcard/blob/master/runtime.js

同時模仿下例程式碼完成業務邏輯：

// 查詢可能較慢，最好加入載入動畫​
wx.showLoading({
          title: '載入中',
        })
        const countResult = await db.collection('province').where({
          stu_loc: name,
          pc: pici,

        }).count()
        const total = countResult.total
        //計算需分幾次取
        const batchTimes = Math.ceil(total / MAX_LIMIT)
        // 承載所有讀操作的 promise 的陣列
        //初次迴圈獲取雲端資料庫的分次數的promise陣列
        for (let i = 0; i < batchTimes; i++) {
          const promise = await db.collection('province').where({
            stu_loc: name,
            pc: pici,
          }).skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
          //二次迴圈根據​獲取的promise陣列的資料長度獲取全部資料push到newResult陣列中
          for (let j = 0; j < promise.data.length; j++) {
            var item = {};
            item.code = i * MAX_LIMIT + j;
            item.name = promise.data[j].stu_loc;
            item.year = promise.data[j].year;
            item.wl = promise.data[j].wl;
            item.pc = promise.data[j].pc;
            item.score = promise.data[j].score;
            console.table(promise.data)
            newResult.push(item)
          }
        }
        if (newResult.length != 0) {
          that.setData({
            hasdataFlag: true,
            resultData: newResult
          })
        } else {
          that.setData({
            hasdataFlag: false,
            resultData: newResult
          })
        }
        // 隱藏載入動畫
        wx.hideLoading()

以上就是我本次開發的一些心得體會，歡迎批評指正。

課程完整原始碼

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

聯絡我們

更多雲開發使用技巧及 Serverless 行業動態，掃碼關注我們~

相關推薦