前言
有段時間比較閑就嘗試着做了一個微信小程序，一是為了鍛煉自己獨立部署一個前后端全鏈路系統的能力，二是想做一個自己都想用的小程序出來。方向是讓用戶可以集中獲取優質的電影、音樂、書籍、游戲等信息的推薦，那什么是優質的信息呢？我這里假設的是排行榜里越靠前的信息就越是優質的信息，於是就做了一個這幾類信息的排行榜小程序，當然排行的信息不是我隨便瞎編的，數據來源主要是豆瓣以及其他一些排行網站，希望排行數據是權威和客觀的，能最大化的減少用戶獲取優質資源的成本。
————————————————
版權聲明：本文為CSDN博主「JackieLee」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/jackieleewelas/article/details/89303306
准備工作
- 小程序賬號 + 微信開發者工具 + 前端代碼 + 后端數據 = 微信小程序
- 豆瓣公共API + 參數 = 實時的排行榜數據及詳情數據
- PyCharm + Python + 爬蟲代碼 = 爬取的排行榜數據
- Idea + Java + SpringBoot = 后端接口定義
- 騰訊雲服務器 + Tomcat + 后端接口定義 = 可訪問的后端服務接口
- 域名 + IP + SSL證書 + 備案 = 合法后端接口訪問路徑
前端
1. 注冊微信小程序賬號
進入：微信公眾平台, 選擇小程序的賬號類型按照流程進行注冊。注意每個郵箱只能注冊一個賬號。
2. 下載開發工具
有了賬號后，我們就可以使用這個賬號進行開發了，開發用的IDE是騰訊出品的微信開發者工具，進入：小程序開發工具，下載對應的版本安裝即可。
3. 開始進入小程序前端開發
打開剛下載好的微信開發者工具，掃碼登錄、創建小程序項目。登錄微信公眾號平台，在開發->開發設置->開發者ID中找到你小程序的AppID並填入到項目設置里。
接着開始真正具體頁面的開發了，開發過程參考開發文檔：微信小程序接入指南
4. 前端開發過程
小程序前端開發其實就是在騰訊的開發工具里，使用js語言，遵循騰訊小程序的開發文檔規范進行代碼編寫。開發過程中可以編譯、預覽、真機調試等，可以使用各種插件，可以調用一些公共的api或者自己定義的后端接口，也可以使用騰訊提供的雲函數。
調用的后端接口需要是https開頭的，並且需要在微信公眾平台的開發->開發設置->服務器域名里配置好。
5. 打包上線
開發完成后就可以准備上線了，首先在開發者工具里將寫好的代碼上傳，點擊上傳，定義版本號和注釋，再到微信公眾平台的版本管理提交審核，待審核通過了就表示上線成功了，就可以在微信中搜索到你的小程序進行訪問了。
小結
到這里，前端的工作就算是完成了，其實一般如果不涉及復雜數據處理的話，后端不是必需的，直接所有簡單數據都存放在前端就行了。如果你的小程序是這樣的話，那本文到這里就可以結束了。后面的你也不需要看了。如果你需要更靈活的交互，更復雜的邏輯，那后端接口則必不可少了。那更復雜的后端數據接口又是怎么完成的呢，跟着我繼續往下走你就知道了。
后端
后端主要是提供給小程序數據接口，讓小程序各個頁面都能有排行榜數據展示，這里我提供的是http接口，返回的Json格式的字符串。使用的語言是Java，使用的框架是SpringBoot，將最終的java代碼打包成war包部署在雲主機上的web服務器Tomcat中，Tomcat就可以自動的將通過url過來的請求分發到我的程序代碼的處理邏輯中，處理完請求拿到相應的數據則以Json字符串的格式返回。
主要流程如下圖：
服務器搭建
1. 購買雲服務器
首先要存放后端程序代碼，需要一台機器，自己的電腦雖然也可以，但是自己的電腦可不能保證24小時都開機且讓外網能訪問到，所以需要購買一台雲服務器；其次，外網能訪問到意味着需要一個公網IP，購買的雲服務器會配套一個對應的IP地址。
這里我使用的是騰訊雲服務器，進入官網購買：騰訊雲，選擇服務器的配置，付款即可。
基於經費預算以及實際需要（其實還是因為舍不得花錢）的考慮，我這里選擇的是比較低配的機器：
- CPU：1 核
- 內存：1 GB
- 公網帶寬：1 Mbps
- 操作系統：CentOS 7.5 64位
- 系統盤：高性能雲硬盤，共 50 GB
- 數據盤：高性能雲硬盤，共 50 GB
2. 購買域名
域名是用來映射到IP上，便於直接使用域名訪問其綁定IP所在的服務器。雖然直接用IP和端口的形式也可以訪問到我們購買的雲服務器，但是一來IP不好記，二來微信不允許使用IP加端口形式的url。所以只能“慷慨解囊”購買一個域名了。
域名可以在任意域名服務商購買，我為了方便也是直接在騰訊雲上買的，購買鏈接：域名注冊
3. 域名解析
買好了域名，那這個域名怎么用呢，不和IP配套使用的域名是沒有任何意義的域名。這里我們需要將這個域名或者其子域名綁定在我們需要對外提供服務的服務器所對應的IP上，也就是我剛剛購買的雲服務器的IP上。
在騰訊雲后台的雲解析里，點擊你的域名添加記錄，一般主要是添加A記錄，也就是將域名綁定到IPv4地址上，可以添加多條，以主機記錄區分各級的域名，@表示直接使用二級域名xxx.com，其他的則表示使用三級或更多級的域名，掛在你自己二級域名以下的多級域名都歸你管。
4. 域名備案
為什么要域名備案呢？這個，普天之下莫非王土，互聯網這塊一畝三分地自然也是屬於國家的，不能隨隨便便讓你接入服務。要想在這塊地開墾拓荒，不是不可以，只是需要向國家報備，接受監管。
整個小程序的搭建過程，域名備案花的時間是最長的，花了十幾二十天。進入備案頁面：備案管理開始備案，詳細的我就不多說了， 備案過程詳情參考：網站備案 主要流程包括下面幾個：
(1) 辦理幕布拍照 (2) 驗證備案信息 (3) 填寫主體信息 (4) 填寫網站信息 (5) 上傳材料 (6) 確認備案信息，提交初審 (7) 通過審核，完成備案
5. 購買SSL證書
為什么需要SSL證書呢？因為配置了SSL證書后可以讓我們的url以https開頭，這是微信小程序中要求的域名訪問方式，以加密傳輸的方式更加安全。
說是購買，其實你可以選擇免費的證書“購買”，一樣可以達到目的，只是沒有付費的加密功能強，安全性自然弱了一等。不過這也阻攔不了我選擇免費的，畢竟窮字當頭。
進入購買頁面：SSL證書, 選擇你要購買的證書的配置，下單付錢即可，將證書下載下來，后續配置web服務器用得着。
小結
經過了前面5個大步驟，這時我們的服務器具備了使用https協議通過域名訪問的能力。接下來的工作就剩下開發我們的后端接口以及把后端程序代碼部署到這台服務器上供小程序訪問。
后端程序開發
環境：
開發語言：Java 8
開發集成環境：IntelliJ IDEA Ultimate 2017
web框架：Springboot
構建工具：Maven
安裝這些工具就不細講了，網上一大堆教程，而且要是不懂后端開發的，安裝了這一套環境也沒用，這里姑且假設讀者也是懂一定的后端開發知識。
下面列出最主要的一部分Java代碼來說明后端程序是怎么提供的http接口：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
@RestController
@RequestMapping
(value =
"/movie"
)
public
class
MovieListController
extends
MovieBaseController{
private
static
final
Logger log = org.slf4j.LoggerFactory.getLogger(MovieListController.
class
);
/**
* 豆瓣top250電影
*/
@RequestMapping
(value =
"/top250"
)
public
CommonRespVo<List<ListCommonVo>> getMovieTop250() {
try
{
HttpServletRequest request =
this
.getHttpServletRequest();
String start = request.getParameter(
"start"
);
String limit = request.getParameter(
"limit"
);
String url = String.format(
"https://api.douban.com/v2/movie/top250?start=%s&count=%s"
,start,limit);
JSONObject jsonObject = HttpUtil.getInfoFromHttpApi(url);
List<ListCommonVo> listCommonVos =
this
.movieListDataTrans(jsonObject);
if
(CollectionUtils.isNotEmpty(listCommonVos)) {
return
new
CommonRespVo(listCommonVos, CommonRespVoCode.SUCCESS);
}
}
catch
(Exception e) {
log.error(
"獲取豆瓣top250電影信息異常"
,e);
}
return
new
CommonRespVo(CommonRespVoCode.FAILED.code,
"未獲取到數據"
);
}
/**
* 華語top100電影
*/
@RequestMapping
(value =
"/chinaTopMovie"
)
public
CommonRespVo<List<JSONObject>> getChinaTopMovie() {
try
{
List<JSONObject> result =
this
.getSubList(Lists.newArrayList(ChinaTopMovieData.chinaTopMovieData));
if
(CollectionUtils.isNotEmpty(result)) {
return
new
CommonRespVo(result, CommonRespVoCode.SUCCESS);
}
}
catch
(Exception e) {
log.error(
"獲取華語Top電影信息異常"
,e);
}
return
new
CommonRespVo(CommonRespVoCode.FAILED.code,
"未獲取到數據"
);
}
//省略后續代碼
}
|
上面這段代碼，就是其中的兩個接口，一個是通過公共API獲取豆瓣top250電影信息，一個是通過爬蟲數據獲取的華語top100電影信息。可以看到SpringBoot使用RestController注解表明此類處理http請求，並在每個RequestMapping對應的方法上都返回json格式的數據。
RequestMapping注解的作用是為每個方法映射一個url。@RequestMapping注解可以作用在控制器類上，也可以作用在其下的某個方法上。當在類級別上添加@RequestMapping注解時，這個注解會應用到控制器的所有方法上。而方法上的@RequestMapping注解會對類級別上的@RequestMapping的聲明進行補充。這就是上面最終的url是類加方法上的路徑的原因，在本地測試的時候在瀏覽器里通過url： http://localhost:8080/movie/chinaTopMovie?start=0&limit=10 就可以獲取到返回的數據。
程序代碼開發完成后，使用Maven構建項目並將代碼打包成一個war包形式的文件，在target目錄中可以找到該war包，后面會講到這個war包的用途。
數據來源
排行榜數據是要具有一定的權威性，客觀性的，所以當然不能我隨便拿一些數據排列一下就成的，我自己又沒有能力去統計這幾類信息的相關排行，所以我就想到了拿來主義：從別人那里拿已經具備一定權威的數據。豆瓣有一些公共開源的api可以拿到我想要的部分數據，另外一些數據在其他各大排行榜網站上都有，但是沒有現成的api把他們的數據提供給我，他們既然不給，那我只能自己去取了。
我使用Python寫了一些爬蟲軟件定期的爬取特定的排行榜網站上的數據，用這些數據更新我本地的靜態數據，這樣我的Java程序就可以拿到相對新的數據了。這里其實我還可以做得更好，但為了快速的上線，我來不及使用數據庫落地這些爬取來的數據，這樣有個不好的結果就是，每次服務重啟的時候，有一段時間的數據不是最新的。這在我的可接受范圍內，后面有時間再去解決這個問題吧。
豆瓣的api示例： https://api.douban.com/v2/movie/top250?start=0&count=10 ，通過這個url可以批量分頁的拿到top電影榜的數據。
python爬蟲則使用的是urlopen，urllib.request.urlopen()函數是用於實現對目標url的訪問，返回url對應的網頁數據。再使用BeautifulSoup對網頁數據進行解析，主要是遍歷搜索文檔樹從而拿到自己想要的那部分數據。
部署后端程序
准備：
- 雲服務主機： 騰訊雲服務器
- Web應用服務器：Tomcat 8
- JRE：Java 8
- SSL證書：Tomcat對應的SSL證書
- FTP傳輸工具：FileZilla
首先登錄購買的那台雲服務器，部署前先安裝好環境，主要是安裝JRE和Tomcat，安裝好后還需要對Tomcat進行一番配置。
1. 安裝環境
安裝JRE 點擊下載Java運行時環境：Java SE Runtime Environment 8u201 ，下載后安裝。
安裝Tomcat 需要提前安裝好Tomcat。進Tomcat官網下載對應版本的Tomcat壓縮包：Apache Tomcat，將下載好的壓縮包拷貝至指定的目錄並解壓，我這里是拷貝到 /usr/local 。
2. 配置Tomcat
配置Tomcat的環境變量，配置過程參考： Apache Tomcat User Guide
把我們之前購買並下載好的SSL證書配置在Tomcat中，具體配置過程參考:Tomcat 證書部署，或者參考官網文檔： SSL/TLS Configuration HOW-TO
3. 部署應用
將我們之前用Maven打包好的war包拷貝到安裝Tomcat的webapps目錄下，如我這里下圖的位置：
|
1
2
3
4
|
[root@VM_0_12_centos webapps]
# pwd
/usr/local/tomcat8/webapps
[root@VM_0_12_centos webapps]
# ls
docs examples host-manager manager ROOT wxrank wxrank.war
|
這里也就是上圖中wxrank.war文件，然后去Tomcat的bin文件夾下運行startup.bat啟動tomcat，即可自動解壓war包，並部署。
小結
為了方便，上面有些文件是在自己的電腦上下載好了，再通過FileZilla上傳到雲服務器上，我自己電腦和雲服務器之間的其他文件傳輸也都是用的這個工具。
隨着Tomcat的配置以及部署成功，我們的后端接口就可以通過url訪問到了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
還有很多數據沒准備好，后面有時間再優化優化。另外既然雲服務器買都買了，怎么着也得充分的利用下，所以又在上面搭了一個個人博客，點下面我的博客鏈接看一下效果吧：
原文鏈接：https://juejin.im/post/5cb33f4a5188251ae64a7c3e