第一個web專案-微信小程式后端開發

第一個web專案-微信小程式后端開發

前言

去年暑假一個偶然的機會我和幾位同學加入了學院一位老師主持的教改專案，需求是開發一個基于SPOC與翻轉課堂的計算機組成原理課程的學習app（類似慕課、知到），后來經過討論決定降低難度，先做一個微信小程式，附帶一個后臺管理系統，于是我的第一個web專案就開始了~

需求分析

這里簡單介紹下SPOC和翻轉課堂的意思

• 翻轉課堂

“翻轉課堂”（Flipping Classroom）是一種顛覆傳統教學由“課堂授課聽講 + 課后作業練習”轉變為“課前自主學習 + 課堂協作探究”的新型教學模式，

• SPOC

SPOC（Small Private Online Course）一般被譯為小規模限制性在線課程或者小規模私有型網路課程，音譯為“私播課”，
這次專案的需求是開發一個學習型別的小程式，用戶分為學生和教師，其中學生可以觀看視頻、課件、影片，完成作業、考試以及發布評論、點贊、回復，而教師可以上傳教學視頻、課件、影片和發布作業、考試、通知，以及查看學生的學習情況，也可以查看評論回復，及時解答學生的疑惑，

團隊分工

團隊一共有四個人，總體作業分為產品設計、前端開發、后端開發三部分，然后每部分由兩人負責，其中我是負責后端開發的，同時兼任專案負責人（其實也沒有聽上去那么高大上，只是需要承擔更多決策、協調、溝通的角色），

總體設計

這里分為小程式和管理系統
首先是小程式，放幾張使用墨刀制作的原型圖，這里多說兩句，市面上的小程式基本都是微信授權直接登錄，最多系結手機號，我們這個由于要統計學生的學習情況才設定了注冊和登錄功能



至于管理系統，由于是10月份才開始做的，而且是我和另一位做后端的同學負責的，時間比較緊，我們作為前端小白沒有十分系統的方法去做開發，只是大概確定了需要做哪些模塊，每個模塊對哪些表的增刪改查，這里原型圖就不放了（較簡陋）

開發工具及編碼實作

小程式前端

據我了解，做前端的同學先去微信公眾平臺注冊賬號，然后做一些開發設定，具體步驟自行百度，前端用的是微信開發者工具，有不會的基本上在微信開放檔案都可以找到，包括許多實用的API，

后端

這里分為資料庫、介面代碼兩部分

資料庫

用的是mysql資料庫，之前是跟著學堂在線的一個小程式入門教程做的，它推薦的本地開發環境是phpstudy，里面集成了php、mysql、apache、FTP、Nginx以及資料庫管理工具phpMyAdmin，關于phpMyAdmin使用請看https://blog.csdn.net/u012767761/article/details/78238487
原本的資料庫設計得不好，存在較多冗余資料，后來學習了資料庫系統這門課，我進行了大改，先確定有哪些物體以及物體之間的聯系，然后畫er圖，最后再建模，通過外碼約束大量減少了冗余，也減少了表的數量，

介面代碼

教程使用的是php語言，框架是thinkphp5，開發手冊看https://www.kancloud.cn/manual/thinkphp5/118003，我當時是去b站找視頻學了下php基礎語法，然后就去學原生php以及框架如何操作資料庫，然后根據業務邏輯開始編碼，其實每個介面（或者叫類里面的一個函式）結構都差不多，主要是三部分：接收前端傳來的資料、增/刪/改/查、回傳結果給前端，
順便說下代碼編輯用的是sublime text3，教程看https://blog.csdn.net/sam976/article/details/75333079/，這個不是ide，沒有那么多的功能比如除錯、運行，單純是只有編輯、加注釋、格式化等等，這里吐槽下自帶的格式化代碼功能（先選擇代碼，再Edit -> Line -> Reindent），有點辣雞，而且如果有語法錯誤不會像eclipse那樣自動檢測出來，之前被坑了幾次，肉眼找不到的話只能用postman去測驗了，

管理系統前端1.0

一開始我們是不知道還要做個管理系統的，以為所有功能都放在小程式，后來老師跟我們討論聊到這個問題，我們才知道原來還有這回事，其實就是管理系統應該具有一切功能，即對資料庫所有表的增刪改查，而小程式只需要有些輕量的功能即可，至于上傳大容量檔案、查看學習情況這些不夠輕量的功能全部放在管理系統，好吧，凡事總有第一次，我們就開始學習基本的前端三件套html,css,javascript，
開始做的時候我們希望先實作功能，界面難看點沒有太多關系，于是學了部分三件套的基礎后又學了ajax技術（因為要與后端通信），這里最開始用的是創建XMLHttpRequest 物件，用open()方法設定請求型別和url，用send()方法發送資料到后端，直到遇到了jquery，后面的請求統一都用$.ajax()了，
接下來又遇到了一個難點，因為基本都用表格來展示資料，那獲取資料后如何動態地加入表格呢？查找資料后用每一條資料拼接成由tr標簽包含的字串，然后用jquery獲取表格標簽后呼叫append()方法加入表格中，
除此之外，我們想在每行末尾設定按鈕進行事件處理，于是我們append資料的同時也把button標簽放入剛才的字串中，然后給每個button設定id屬性，比如用于修改資料的就叫fixi，最后這個i是代表表格第幾行，然后添加事件監聽，點擊button時獲取id，然后查看最后一位是多少從而確定是第幾行，
這些做法實作起來是挺繁瑣的，而且感覺在重復造輪子，我們也做得有點郁悶，因為每個頁面基本都要這樣做，但是當時沒有那么多的時間精力去學習框架，只是想先實作功能（u1s1，上學期的課多到我快吐了），
放兩張界面圖

管理系統前端2.0

之前放假，總算有較多空余時間了，我們決定要改下界面，但畢竟自身水平不高，因此需要用一點第三方的東西了，
在跟小程式前端測驗了部分功能后，有一天后端同學找到了一個開源的框架然后我們一起看了下說明檔案，最后決定：就用它了，
有請layui登場，經典模塊化前端框架、低門檻開箱即用，
真正使用之前可以先看看檔案https://www.layui.com/doc/，個人感覺上手還是挺快的，layui提供了許多實用的組件包括彈出層、表格、表單、檔案上傳、流加載等等，
就拿表格來說，之前我們用append動態添加資料，現在直接table.render()，設定好引數就行了；之前我們給button設定id進行事件處理，現在系結工具條，直接table.on()就行了；而且之前我們沒實作的分頁，現在設定分頁引數就行了，然后查詢資料庫時分頁讀取，
另外，layui提供了一個頁面布局的模板，包括logo、用戶名、退出按鈕、導航欄以及一些css影片，我們要做的就是按照它的模板來，頁面元素的樣式也參考它提供的，
有了layui的助攻，我們可以將更多注意力放在業務邏輯上，更多關注用戶體驗，

測驗

后端本地測驗

工具：postman
使用：打開一個新視窗，選擇請求型別，輸入url，設定引數，點擊send
這種測驗我認為是模擬前端發送資料然后運行后端代碼，看結果是否正確，屬于白盒測驗，但是我們不是專業測驗人員，目前這樣測驗不是做得很規范，只能盡可能想到不同的測驗用例，

前后端聯合測驗

由于放假回家了沒辦法面對面，只能借助騰訊會議線上測了，
在部署作業完成之后，一般是我們寫好介面代碼，然后把url和需要的引數告訴前端同學（這里注意下，微信小程式的請求api只允許https開頭的url，而且前端必須在微信公眾平臺配置好合法域名，不然會報錯），前端把這些東西填入那個wx.request的api然后運行，他們會查看回傳的資料是否正確，我們會查看資料庫的情況，如果沒問題會測驗多幾個資料，都可以的話就到下一個功能，這種方式應該是屬于軟工講到的V模型的單元測驗，

部署

用的是新浪云，實名認證、學生認證后會送一些云豆（新浪云的計費單位，1RMB=100云豆）
跟著之前說的教程把整個thinkphp專案部署到新浪云，具體步驟看https://www.kancloud.cn/cnzxo/sae_thinkphp/1423806

• 代碼

在代碼管理那里可上傳壓縮包，或者在線編輯（跟記事本差不多），改動大的最好在本地寫好再貼上去

• 資料庫

開啟共享型mysql服務，目前用了phpmyadmin4.9版本，然后建表或匯入sql檔案

• 快取

開啟memcached服務，設定容量16MB（省點錢），其實這個服務我不是很清楚干什么的，但如果不打開訪問介面時會報致命錯誤？

• 檔案存盤

我們需要保存許多型別的檔案包括視頻、課件、影片、作業、考試、頭像，因此需要存放在服務端，這里開啟storage服務，使用方法看https://www.sinacloud.com/doc/sae/php/storage.html#cyberduck，普通用戶配額5個bucket，每個容量10G，然后直接當作本地磁盤那樣用就行了，控制臺或寫代碼都可上傳檔案，上傳后獲得url，然后就可以通過網路訪問，關于新浪云環境下php如何操作看官方檔案http://apidoc.sinaapp.com/source-class-sinacloud.sae.Storage.html#，

• 域名

應用資訊可查看二級域名，獨立域名需要購買且備案

• 日志

日志中心可查看每次請求的介面、時間、請求方設備等資訊

• 其它

控制臺還可以實時查看流量統計、資源使用情況，以及消費情況

總結

這個專案我也算前后端都做了一遍，感覺前端不太適合自己，可能是對頁面元素樣式、用戶體驗不夠敏感，不過必須承認前端是挺有意思的，至于后端是更加注重邏輯，目前我對后端的了解只停留在資料庫、網路、部署層面，其實如果用戶數量非常多還要考慮高并發的問題，也就要使用多執行緒、負載均衡、訊息佇列等技術了，所以還有很多技術需要學習，
最后感謝老師的支持和幾位隊友的幫助，第一次寫博客，若有描述不當之處歡迎指出，