通過第二講我們已經知道了怎么快速搭建一個小程序客戶端,當然服務端也是必不可少的。愛掏網 - it200.com登錄驗證,內容存儲等等都離不開服務端。愛掏網 - it200.com
本章節主要講解怎么快速搭建一個服務端框架和免費部署。愛掏網 - it200.com因為好多同學僅僅為了學習小程序,為此購買一個服務器成本還是蠻高的,所以小編特此找了一種免費的服務資源提供給大家,等到你真正要部署小程序的時候再購買也不遲。愛掏網 - it200.com《 三周學會小程序第一講:小程序申請和注意事項 》里面已經說了,部署小程序必須需要購買服務器和域名,并且需要備案。愛掏網 - it200.com
代碼準備
和上一講《 三周學會小程序第二講:客戶端代碼準備和基礎功能講解 》一樣,我們先克隆小編為大家準備的源碼庫,然后對源碼進行講解。愛掏網 - it200.com源碼庫地址:
https://github.com/codedrinker/jiuask-server.git
本講的 Tag 為 V3。愛掏網 - it200.com
工具準備
JDK 1.8 或更高版本
IDEA,如果有條件盡量用付費版本,一些擴展的 工具 后面可能用到,比如Database。愛掏網 - it200.com
Maven,這個是比較基礎的工具了。愛掏網 - it200.com
運行項目
下載項目成功以后,打開 IDEA, 使用 Maven方式導入項目,一直下一步即可。愛掏網 - it200.com導入完成以后等待 Maven 下載依賴,下載依賴完成以后直接找到 Application.java 類右鍵運營即可啟動服務。愛掏網 - it200.com地址欄訪問
http://localhost:8888 即可看到我們的歡迎頁面。愛掏網 - it200.com是不是使用 Spring Boot 運營項目非常簡單?再也不用磨磨唧唧配置 Tomcat了。愛掏網 - it200.com
項目結構
如圖,
一個非常標準的 Spring Boot項目目錄,不了解 Spring Boot 可以直接去官網看一下初步理解就可以,你可以把 Spring Boot 簡單的看做讓你方便的通過一個類就能運行項目的方式,具體細節等你熟練使用以后自然會明白。愛掏網 - it200.com
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 即可。愛掏網 - it200.com
templates,是存放Spring的web模板,類比的話就是我們熟知的 jsp 頁面,這里用的thymeleaf模板語言,更強大,現在你理解它就是 HTML里面有很多占位符,可以賦值即可。愛掏網 - it200.com
application-*.yml,這個是替代了我們之前使用的application.properties,因為 yml 的語法更強大,同時application.yml 是默認配置,所以你直接運行 Application.java 文件會啟動 8888 端口就是因為里面配置的是 port: ${port:8888}。愛掏網 - it200.com
applicationContext.xml,便使我們熟知的 Spring 的配置文件,后面有什么需要來這里配置就好了。愛掏網 - it200.com咦?沒有 web.xml 文件 Spring 是怎么知道這個文件的呢?那因為我在 Application.java 文件中添加了一個注解:@ImportResource({"classpath*:applicationContext.xml"})
pom.xml,就不用細說了,如果你不了解 Maven 那么你需要百度幾個文章了解下。愛掏網 - it200.com
還剩下幾個文件,不要著急,我們后面會講到。愛掏網 - it200.com
代碼講解
為了讓初步接觸? Spring Boot
?的同學更好的理解項目,小編這里簡單的對項目的代碼進行講解。愛掏網 - it200.com
Application.java
開始:
@SpringBootApplication
?表示這個類是?
Spring
項目的啟動類。愛掏網 - it200.com
@Controller
?表示把當前類定義為一個?
Controller
。愛掏網 - it200.com
@ComponentScan
?表示?
Spring
?加載?
Bean
?的方式是掃描目錄,不需要每次都通過?
xml
配置。愛掏網 - it200.com
@RequestMapping("/")
則是定義訪問路徑和方法的映射。愛掏網 - it200.com
return "index";
? ?
表示返回? templates/index.html
?這個模板。愛掏網 - it200.com
好,既然說到了模板,我們就簡單說一下模板里面的邏輯。愛掏網 - it200.com如圖:
我做了一個簡單的封裝,為了避免寫重復的代碼,我把頭部和底部封裝到了? layout.html
?在? index.html
?和? error.html
?直接引用這個布局,替換它的? body
。愛掏網 - it200.com所以你這個時候在? 8888/
后面隨便輸入內容訪問的便是? error
?頁面,頭部和底部都是源自于? layout.html
。愛掏網 - it200.com
這樣一來你就掌握了項目和本地部署的技能,那么微信小程序需要訪問遠端的地址才能工作,怎么部署到遠端呢?
免費部署
小編講解的免費部署的方式是使用? Heroku
,免費必定有限制,比如15分鐘不訪問會自動宕機,下次訪問會自動啟動,每個賬號有550個小時的免費使用時長,不過雖然有這些限制,對于我們做測試使用已經足夠了,而且它還會提供一個? **.herokuapp.com
?的域名,正好給我們使用。愛掏網 - it200.com
Heroku
官網注冊一個賬號,國外的網站訪問有點慢,自行解決。愛掏網 - it200.com
https://id.heroku.com/login
不過有一個非常不好的消息,
Heroku
?不支持?
126
?郵箱,不過你不需要注冊多個,所以小編使用的自己的?
QQ
?郵箱。愛掏網 - it200.com全部填寫完信息以后,點擊?
Create Free Account
。愛掏網 - it200.com然后去郵箱驗證,設置密碼即可。愛掏網 - it200.com
下面我們需要創建一個? app
,可以簡單理解為創建一個? 服務器
,可以用于部署我們的代碼。愛掏網 - it200.com
按照如圖步驟填寫名稱,找到一個不被占用的英文,然后點擊? create
。愛掏網 - it200.com我填寫的是? jiuask
, 這樣我就會得到一個免費的域名? jiuask.herokuapp.com
。愛掏網 - it200.com這樣我們就擁有一個免費的服務器了,是不是很簡單?那接下來我們部署服務吧?
其實自動跳轉的頁面有提示,如果你英文好,直接按照提示來也可以,大致的步驟如下:
1,打開你的終端,進入剛才準備好的項目目錄。愛掏網 - it200.com
2,運行?
heroku login
命令,會提示你輸入用戶名和密碼,剛才你注冊的郵箱和密碼。愛掏網 - it200.com
3,輸入如下命令,當然后面的?
jiuask
應該是你的名稱:
heroku git:remote -a jiuask
這個步驟就是在添加一個?
Heroku
?的 Git 倉庫,當你提交代碼到?
Heroku
的 Git 殘酷的時候會自動部署。愛掏網 - it200.com
4,運行如下命名部署:
git push heroku master
5,等待命令行命令結束,瀏覽器輸入如下網址看下效果,記住把?
jiuask
換成你自己的名字:
jiuask.herokuapp.com
是不是出現了神奇的一幕?這樣你就擁有一個自己免費的服務器了,以后怎么部署呢?每次?
commit
?代碼以后,運行?
4
?步驟的部署就可以更新成功了。愛掏網 - it200.com
別著急激動,我們還是簡單說一下為什么能部署成功:
1,小編的
pom.xml
里面配置項目名稱是
jiuask-server
所以編譯打包以后會有一個
jiuask-server-1.0.0.jar
?的?
jar
包。愛掏網 - it200.com
2,
Heroku
?會默認識別?
Procfile
?文件里面的命令作為部署命令:
web: java -jar
-Dspring.profiles.active=production
target/jiuask-server-1.0.0.jar
所以每當我運行部署的時候, Heroku
?幫我們執行了一下? Procfile
?文件,所以如果你的沒有部署成功,仔細檢查一下自己的配置是否正確。愛掏網 - it200.com這樣今天的講解就進入了尾聲,是不是小程序的服務器不用愁了?如果覺得有用記得給小編點小骨頭哦。愛掏網 - it200.com[:)陰險臉]
作業
好,下面是作業時間,看懂了,馬上就自己動起手來。愛掏網 - it200.com
1,不知道你是否注意觀察,通過瀏覽器打開的時候?Tab
?上面有一個 “久問” 的?
logo
,你現在需要把他換成你的?
logo
。愛掏網 - it200.com
2,修改?
Controller
?里面的?
index
?方式,使得訪問??
http://localhost:8888/?user=jiuask
index
?頁面。愛掏網 - it200.comuser等于其他情況均跳轉?
error
?頁面并顯示登?
**
用戶登錄失敗。愛掏網 - it200.com
3,新添加一個地址
http://localhost:8888/api/login
訪問是,返回? JSON
?內容??
{'success':true}
。愛掏網 - it200.com
4,修改項目名稱,包括
pom.xml
, package
, Procfile
?和? Readme
。愛掏網 - it200.com
Heroku
創建自己的賬號,并部署成功。愛掏網 - it200.com
如果你做好了,可以發到群里向小伙伴兒炫耀一下哦。愛掏網 - it200.com[:)鬼臉]
6,使用? Heroku
?命令查看一下最新的日志。愛掏網 - it200.com小編提示: heroku help
?命令是一個百科全書哦。愛掏網 - it200.com
我是浪漫的分割線
問答
如果您對本系列文章有興趣,歡迎置頂本訂閱號,第一時間獲取更新。愛掏網 - it200.com
如果有任何問題,歡迎留言,小編很熱衷和大家一起討論技術問題。愛掏網 - it200.com
另外小編創建了一個技術交流群,請添加小編微信,切記備注“小程序”,小編拉你進去。愛掏網 - it200.com【只討論技術,非誠勿擾】
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,也希望大家多多支持 我們