三週學會小程序第三講:服務端搭建和免費部署

閱讀文本大概需要 10 分鐘。

第三講:服務端搭建和免費部署

通過第二講我們已經知道了怎麼快速搭建一個小程序客戶端,當然服務端也是必不可少的。登錄驗證,內容存儲等等都離不開服務端。

本章節主要講解怎麼快速搭建一個服務端框架和免費部署。因爲好多同學僅僅爲了學習小程序,爲此購買一個服務器成本還是蠻高的,所以小編特此找了一種免費的服務資源提供給大家,等到你真正要部署小程序的時候再購買也不遲。《三週學會小程序第一講:小程序申請和注意事項》裏面已經說了,部署小程序必須需要購買服務器和域名,並且需要備案。

代碼準備

和上一講《三週學會小程序第二講:客戶端代碼準備和基礎功能講解》一樣,我們先克隆小編爲大家準備的源碼庫,然後對源碼進行講解。源碼庫地址:

https://github.com/codedrinker/jiuask-server.git

本講的 Tag 爲 V3。

工具準備

JDK 1.8 或更高版本

IDEA,如果有條件儘量用付費版本,一些擴展的工具後面可能用到,比如Database。

Maven,這個是比較基礎的工具了。

運行項目

下載項目成功以後,打開 IDEA, 使用 Maven方式導入項目,一直下一步即可。導入完成以後等待 Maven 下載依賴,下載依賴完成以後直接找到 Application.java 類右鍵運營即可啓動服務。地址欄訪問

http://localhost:8888 即可看到我們的歡迎頁面。是不是使用 Spring Boot 運營項目非常簡單?再也不用磨磨唧唧配置 Tomcat了。

項目結構

如圖,

一個非常標準的 Spring Boot項目目錄,不瞭解 Spring Boot 可以直接去官網看一下初步理解就可以,你可以把 Spring Boot 簡單的看做讓你方便的通過一個類就能運行項目的方式,具體細節等你熟練使用以後自然會明白。

http://spring.io/projects/spring-boot

Application.java,項目的啓動類,直接右鍵運行即可,當然可以使用java命令啓動,如

java -jar -Dspring.profiles.active=production target/jiuask-server-1.0.0.jar

resources/public,是web項目的靜態資源,比如 js,css,img等都存放到這裏,Spring 默認會把 public 配置爲根目錄,所有使用的時候直接 logo.jpg 即可。

templates,是存放Spring的web模板,類比的話就是我們熟知的 jsp 頁面,這裏用的thymeleaf模板語言,更強大,現在你理解它就是 HTML裏面有很多佔位符,可以賦值即可。

application-*.yml,這個是替代了我們之前使用的application.properties,因爲 yml 的語法更強大,同時application.yml 是默認配置,所以你直接運行 Application.java 文件會啓動 8888 端口就是因爲裏面配置的是 port: ${port:8888}。

applicationContext.xml,便使我們熟知的 Spring 的配置文件,後面有什麼需要來這裏配置就好了。咦?沒有 web.xml 文件 Spring 是怎麼知道這個文件的呢?那因爲我在 Application.java 文件中添加了一個註解:@ImportResource({"classpath*:applicationContext.xml"})

pom.xml,就不用細說了,如果你不瞭解 Maven 那麼你需要百度幾個文章瞭解下。

還剩下幾個文件,不要着急,我們後面會講到。

代碼講解

爲了讓初步接觸 Spring Boot 的同學更好的理解項目,小編這裏簡單的對項目的代碼進行講解。

首先從 Application.java 開始: @SpringBootApplication 表示這個類是 Spring 項目的啓動類。 @Controller 表示把當前類定義爲一個 Controller@ComponentScan 表示 Spring 加載 Bean 的方式是掃描目錄,不需要每次都通過 xml 配置。 @RequestMapping("/") 則是定義訪問路徑和方法的映射。 return "index";

表示返回 templates/index.html 這個模板。

好,既然說到了模板,我們就簡單說一下模板裏面的邏輯。如圖:

我做了一個簡單的封裝,爲了避免寫重複的代碼,我把頭部和底部封裝到了 layout.htmlindex.htmlerror.html 直接引用這個佈局,替換它的 body。所以你這個時候在 8888/後面隨便輸入內容訪問的便是 error 頁面,頭部和底部都是源自於 layout.html

這樣一來你就掌握了項目和本地部署的技能,那麼微信小程序需要訪問遠端的地址才能工作,怎麼部署到遠端呢?

免費部署

小編講解的免費部署的方式是使用 Heroku,免費必定有限制,比如15分鐘不訪問會自動宕機,下次訪問會自動啓動,每個賬號有550個小時的免費使用時長,不過雖然有這些限制,對於我們做測試使用已經足夠了,而且它還會提供一個 **.herokuapp.com 的域名,正好給我們使用。

話不多說,我們開始準備環境,首先你需要去 Heroku 官網註冊一個賬號,國外的網站訪問有點慢,自行解決。 https://id.heroku.com/login 不過有一個非常不好的消息,Heroku 不支持 126 郵箱,不過你不需要註冊多個,所以小編使用的自己的 QQ 郵箱。全部填寫完信息以後,點擊 Create Free Account。然後去郵箱驗證,設置密碼即可。

下面我們需要創建一個 app,可以簡單理解爲創建一個 服務器,可以用於部署我們的代碼。

按照如圖步驟填寫名稱,找到一個不被佔用的英文,然後點擊 create。我填寫的是 jiuask, 這樣我就會得到一個免費的域名 jiuask.herokuapp.com。這樣我們就擁有一個免費的服務器了,是不是很簡單?那接下來我們部署服務吧?

其實自動跳轉的頁面有提示,如果你英文好,直接按照提示來也可以,大致的步驟如下:

1,打開你的終端,進入剛纔準備好的項目目錄。 2,運行 heroku login 命令,會提示你輸入用戶名和密碼,剛纔你註冊的郵箱和密碼。 3,輸入如下命令,當然後面的 jiuask 應該是你的名稱: heroku git:remote -a jiuask 這個步驟就是在添加一個 Heroku 的 Git 倉庫,當你提交代碼到 Heroku 的 Git 殘酷的時候會自動部署。 4,運行如下命名部署: git push heroku master 5,等待命令行命令結束,瀏覽器輸入如下網址看下效果,記住把 jiuask 換成你自己的名字: jiuask.herokuapp.com 是不是出現了神奇的一幕?這樣你就擁有一個自己免費的服務器了,以後怎麼部署呢?每次 commit 代碼以後,運行 4 步驟的部署就可以更新成功了。

彆着急激動,我們還是簡單說一下爲什麼能部署成功: 1,小編的pom.xml裏面配置項目名稱是jiuask-server所以編譯打包以後會有一個jiuask-server-1.0.0.jarjar 包。 2,Heroku 會默認識別 Procfile 文件裏面的命令作爲部署命令:

web: java -jar

-Dspring.profiles.active=production

target/jiuask-server-1.0.0.jar

所以每當我運行部署的時候,Heroku 幫我們執行了一下 Procfile 文件,所以如果你的沒有部署成功,仔細檢查一下自己的配置是否正確。這樣今天的講解就進入了尾聲,是不是小程序的服務器不用愁了?如果覺得有用記得給小編點小骨頭哦。[:)陰險臉]

作業

好,下面是作業時間,看懂了,馬上就自己動起手來。

1,不知道你是否注意觀察,通過瀏覽器打開的時候 Tab 上面有一個 “久問” 的 logo,你現在需要把他換成你的 logo。 2,修改 Controller 裏面的 index 方式,使得訪問

http://localhost:8888/?user=jiuask

跳轉 index 頁面。user等於其他情況均跳轉 error 頁面並顯示登 **用戶登錄失敗。 3,新添加一個地址

http://localhost:8888/api/login

訪問是,返回 JSON 內容

{'success':true}

4,修改項目名稱,包括

pom.xmlpackageProcfileReadme

5,使用 Heroku 創建自己的賬號,並部署成功。 如果你做好了,可以發到羣裏向小夥伴兒炫耀一下哦。[:)鬼臉]

6,使用 Heroku 命令查看一下最新的日誌。小編提示:heroku help 命令是一個百科全書哦。

我是浪漫的分割線

問答

如果您對本系列文章有興趣,歡迎置頂本訂閱號,第一時間獲取更新。

如果有任何問題,歡迎留言,小編很熱衷和大家一起討論技術問題。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章