摘要：由于最近在幫學(xué)校做開(kāi)發(fā)一個(gè)基于微信小程序的投票系統(tǒng)項(xiàng)目，開(kāi)發(fā)時(shí)也遇到很多坑，有一些心得，所以想分享給大家，一起討論和進(jìn)步。用戶進(jìn)入微信小程序后不需登錄即可直接投票。

**

**
第一次在社區(qū)發(fā)文章，作為一個(gè)大學(xué)未畢業(yè)的前端菜鳥(niǎo)，自己平常也經(jīng)常逛各種技術(shù)社區(qū)，今天終于要發(fā)表自己的處女文章了，還是有點(diǎn)小激動(dòng)的。由于最近在幫學(xué)校做開(kāi)發(fā)一個(gè)基于微信小程序的投票系統(tǒng)項(xiàng)目，開(kāi)發(fā)時(shí)也遇到很多坑，有一些心得，所以想分享給大家，一起討論和進(jìn)步。（個(gè)人開(kāi)發(fā)技術(shù)有限，不好勿噴--）。

程序能夠發(fā)布各類主題活動(dòng)進(jìn)行投票。

各類主題活動(dòng)下能夠支持作品的展示及參與投票活動(dòng)。

用戶進(jìn)入微信小程序后不需登錄即可直接投票。

每天每個(gè)用戶只能對(duì)同一個(gè)作品投一票，第二天方可繼續(xù)投票。

顯示投票時(shí)間的截止時(shí)間，通過(guò)倒計(jì)時(shí)展示。

每個(gè)作品自動(dòng)生成一個(gè)二維碼，掃描該二維碼可進(jìn)入該作品投票介紹界面。

其他：作品篩選、作品搜索、作品排名等。

服務(wù)器環(huán)境：Ubuntu 16.04+Node.js+Express
數(shù)據(jù)庫(kù)環(huán)境：普惠大眾的MySQL
前端及測(cè)試：微信小程序開(kāi)發(fā)工具
技術(shù)：Javascript+HTML+CSS+Node

排名這些界面就不展示了，由于還在測(cè)試階段，界面還是比較學(xué)院派的，后期還會(huì)增加功能和修改界面。

其實(shí)整個(gè)項(xiàng)目難點(diǎn)不多，大部分是數(shù)據(jù)的展示和一些簡(jiǎn)單的交互而已。而要做一個(gè)比較完善的投票系統(tǒng)，重頭戲必然是投票這個(gè)功能是否能完美的實(shí)現(xiàn)并展現(xiàn)在用戶的眼前。本項(xiàng)目中涉及到的難點(diǎn)就是如何使用戶在不進(jìn)行注冊(cè)登錄賬號(hào)，甚至不用獲取微信登錄權(quán)限的情況下進(jìn)行投票，同時(shí)系統(tǒng)能準(zhǔn)確地記錄下每個(gè)用戶的投票行為，這里就要說(shuō)說(shuō)數(shù)據(jù)庫(kù)的設(shè)計(jì)、小程序登錄機(jī)制以及Node的應(yīng)用了。

由于要實(shí)現(xiàn)每個(gè)用戶每天只能為同一個(gè)作品投一票的限制，大概想到的3鐘方案：

1. 每一個(gè)用戶都有一個(gè)對(duì)應(yīng)的投票表，每投一個(gè)作品就增加該作品的id，第二天刪除該id，查詢到不存在時(shí)即可再次投票。
2. 同理也可以每個(gè)作品有一個(gè)對(duì)應(yīng)的投票表，一個(gè)用戶投一票，就增加該用戶的id。
3. 在作品表中添加一個(gè)投票用戶字段，一個(gè)用戶投一票則將該用戶的id加進(jìn)去，通過(guò)查詢?cè)搃d是否存在來(lái)識(shí)別是否已經(jīng)投過(guò)票。

前兩種方案無(wú)形之中就會(huì)生成很多個(gè)表，并且其實(shí)這些表其實(shí)都是同一性質(zhì)的。所以最終選擇了第三種方案，作品表中添加一個(gè)字段，在該字段中添加每個(gè)投票用戶的id（如果用戶量很大的情況下應(yīng)該會(huì)使用前面的或其他更好的方案）。但是一般字段所用的類型varchar最大長(zhǎng)度只有255，當(dāng)數(shù)據(jù)多一些的時(shí)候不能滿足需要。而Mysql的text類型能夠滿足，最大的LONGTEXT能有4GB的存儲(chǔ)，對(duì)于一個(gè)校園使用人數(shù)來(lái)說(shuō)也是足夠了（比如一個(gè)用戶的openid有28個(gè)英文字符，也能存儲(chǔ)千萬(wàn)級(jí)別的用戶了。不過(guò)據(jù)說(shuō)text類型的性能是不如varchar等類型的，至于影響有多大本人沒(méi)有測(cè)試過(guò)）。但是同一個(gè)字段中增加字符，需要做一下處理，用符號(hào)將添加的數(shù)據(jù)分隔開(kāi)來(lái)，方便后面的查詢。

那么如何識(shí)別每個(gè)投票用戶的身份呢？如果不授權(quán)獲取微信用戶的信息，那么可以直接獲取微信用戶的openid，這個(gè)openid是用戶唯一的標(biāo)識(shí)。小程序官方的介紹是：小程序可以通過(guò)微信官方提供的登錄能力方便地獲取微信提供的用戶身份標(biāo)識(shí)，快速建立小程序內(nèi)的用戶體系。

小程序的API中有個(gè)wx.login方法，通過(guò)提供小程序的Appid和AppSecret以及每次登錄生成的一個(gè)不同的用戶登錄憑證，然后在服務(wù)器端通過(guò)微信官方接口獲取到用戶的openid等數(shù)據(jù)。具體官方文檔和API等鏈接：https://developers.weixin.qq....
微信端請(qǐng)求：

 wx.login({
      success: res => {
        console.log(res.code)
        wx.request({
          url: "http://localhost:8080/data",
          data: {
            code: res.code,
            Appid: "wxXXX",
            AppSecret: "XXX",
          },
          header: {
            "content-type": "application/json"
          },
          success: function (next) {
            console.log(next.data)
            that.setData({
              showlist: next.data
            })
          }
        })
      }
    });

服務(wù)器端獲取openid(Node)

//定義微信小程序發(fā)送到服務(wù)器的參數(shù)
var code = req.query.code;
var appid = req.query.Appid;
var appsecret = req.query.AppSecret;
var index = req.query.id;
console.log(appid);
//請(qǐng)求外部url,傳參返回用戶ID等數(shù)據(jù)
request("https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+appsecret+"&js_code="+code+"&grant_type=authorization_code", function (error, response, data) {
    if (!error && res.statusCode == 200) {
        const connection = mysql.createConnection({
            //鏈接數(shù)據(jù)庫(kù)的配置信息
            host: "localhost",
            user: "root",
            password: "XXX",
            port: 3306,
            database: "display",
            multipleStatements: true
        });
        // 打開(kāi)鏈接
        connection.connect();
        //將data返回字符串形式轉(zhuǎn)換成JSON格式.
        var id = JSON.parse(data)
        var newid = id.openid
     }
})

接著就是往數(shù)據(jù)庫(kù)中對(duì)應(yīng)字段添加用戶id就行了。但是這里有兩個(gè)細(xì)節(jié)，也可以說(shuō)是兩個(gè)坑吧，由于自己菜，搞了半天才弄好...

1.如果該用戶沒(méi)有投過(guò)票，那么就向字段中添加該用戶的openid，如果投過(guò)票說(shuō)明字段中已經(jīng)存在該用戶id，返回提示信息。text類型是沒(méi)有默認(rèn)值的，所以初始沒(méi)有投票用戶時(shí)為Null。這里我在Node中直接用JS的indexOf函數(shù)是否包含該id字符串的方式來(lái)查詢，于是就造成了一旦該字段為Null時(shí)查詢就報(bào)錯(cuò)的情況。

解決辦法：在查詢之前，先將該字段為Null的都轉(zhuǎn)換為空字符串。剛開(kāi)始想用JS判斷該字段是否為空再進(jìn)行操作，但是后來(lái)認(rèn)為更好的解決方案是在查詢之前直接用update將該字段的null值修改為空字符串，相比用JS判斷清爽了許多。

 connection.query( "update display set d_user="" where d_user is null ",[],
             function (queError,queData){
                ...
                ...
        })

2.插入用戶id數(shù)據(jù)時(shí)，通過(guò)","將每個(gè)用戶的openid分隔開(kāi)，使用到concat函數(shù)拼接字符串。但是由于拼接的是前面獲取的id變量和一個(gè)字符串","，所以寫(xiě)法比較坑。concat的第二個(gè)參數(shù)是字符串，用引號(hào)" "包裹，天真以為里面直接寫(xiě)變量，外面有括號(hào)，那出來(lái)不就直接是字符串了嗎？但是卻會(huì)報(bào)錯(cuò)，顯示的并不是字符串。

解決辦法：如果里面直接用ES6語(yǔ)法寫(xiě)`${newid}`是不行的，得像下面這樣寫(xiě)：

connection.query( "update display set d_user = concat(d_user, "+`"${newid},"`+") where d_id = "+index,[],
            function (err, data) {
                console.log(err)  //null
                console.log(data)  // object
            });

解決了這兩個(gè)問(wèn)題之后，其他就是同時(shí)增加票數(shù)等代碼，不再贅述。

這是能實(shí)現(xiàn)用戶每天都能投票的關(guān)鍵，指定時(shí)間清除掉字段中的openid信息，就能達(dá)到第二天用戶能夠繼續(xù)投票的功能。這里有多種方法實(shí)現(xiàn)，第一種是直接在數(shù)據(jù)庫(kù)層操作，通過(guò)存儲(chǔ)過(guò)程或者代碼的方式將該字段的內(nèi)容賦為空值即可。第二種是在Node里用定時(shí)器或者其他方法在指定時(shí)間將數(shù)據(jù)庫(kù)該字段內(nèi)容重新賦值。

我采用的是用JS定時(shí)器來(lái)解決，當(dāng)每天00：00：00時(shí)，就重新賦值。但是要注意定時(shí)器的啟動(dòng)和清除，否則一直開(kāi)啟肯定會(huì)有性能影響。

var timer = setInterval(function(){
        var date = new Date();
        var hours=new Date().getHours();
        var minutes=new Date().getMinutes();
        var seconds=new Date().getSeconds();
        
        if(hours == 23 && minutes == 59 && seconds == 59){
        connection.query("update display set d_user = "" ",[],
        function (err, data) {
            console.log(data)
        })
    }
 },1000)

后面有時(shí)間會(huì)更新活動(dòng)倒計(jì)時(shí)的寫(xiě)法，每個(gè)頁(yè)面生成二維碼的方法等。

由于數(shù)據(jù)庫(kù)并不是很在行，不合理的地方肯定還有很多，希望得到大佬們的指點(diǎn)。同時(shí)，小程序前端還是有很多細(xì)節(jié)的地方遇到過(guò)坑，后面我會(huì)多帶帶寫(xiě)文來(lái)分享。如果大家覺(jué)得還算有點(diǎn)看頭的話，希望點(diǎn)個(gè)贊啥的，給菜鳥(niǎo)新人一點(diǎn)鼓勵(lì)哈哈哈哈。