Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

今日科技快訊

據外媒報道,在世界各地嚴格執行“封城”措施,促使遠程工作和學習激增後,全球對個人電腦(PC)的需求在2020年第一季度飆升。但這場危機也導致生產和物流問題嚴重延誤,最終導致全球PC出貨量同比下降8%,蘋果Mac更是狂降21%。

 作者簡介

本篇文章來自i校長的投稿,分享了他對用Flutter 搭建個人網站的過程,相信會對大家有所幫助!同時也感謝作者貢獻的精彩文章。

i校長的博客地址:

https://www.jianshu.com/u/77699cd41b28

 簡述

曾幾何時,你有沒有一個搭個人網站的衝動,我這個想法在我第一次開始寫博客就有了,可就是沒有搭起來,直到我看到flutter有了web支持,我就在想,是時候了,必須且一定要做,於是乎我就搭建了現在的網站ibaozi.cn,代碼開源至

https://github.com/ibaozi-cn/ibaozi

而這次我要做的並不是基於這個網站開發,我再次申請了一個新域名jetpack.net.cn,讀過我之前的博客可能直到,我做了一個Android Jetpack模版項目在線生成工具,我申請這個就是爲了將Android Jetpack整合進來,提供一個好記的域名。

當然我還有另一項計劃,就是做一個Flutter 生態的Jetpack,這次博客就是計劃的第一步,完全開源給大家,讓讀我博客的同學們,跟我一起搭建一個網站,順便學習Flutter技術,好了不多說了,接下來,讓我們看看如何搭建這個網站。

環境要求

Flutter

需要切換beta版本來支持web開發。環境搭建跳至之前博客:Flutter系列之環境搭建。

https://www.jianshu.com/p/ab2bbcdc54d0

Node

下載跳至:下載| Node.js。

https://nodejs.org/zh-cn/download/

環境配置:Node.js 安裝配置。

https://www.runoob.com/nodejs/nodejs-install-setup.html

腳手架:Express 生成器。

https://expressjs.com/zh-cn/starter/generator.html

具體操作步驟請往下看。

 Flutter 項目創建

假裝你已經搭建好環境。

step 1

打開終端,切換Flutter 分支。

flutter channel beta

flutter upgrade

flutter config --enable-web

flutter devices

Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108

一行一行執行命令,最後看到Chrome,祝賀你成功了。

step 2

打開Android Studio。

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

項目名字、描述簡單修改一下,next下一步。

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

修改一下包名,然後Finish,需要等待一會兒。

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

項目創建成功了。這裏就到這,後期博客慢慢介紹每次開發的細節。

 Node 項目創建

我們直接打開Flutter項目的Terminal。

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

mkdir node

mkdir server

cd node/server

進入server目錄,現在你的node環境應該也可以了吧,好開始用Express 生成器生成項目。

npm install express-generator -g //安裝好了略過

express --view=pug myapp

</pre>

修改myapp爲你自己的項目名。執行完你會看到。

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

接下來:

cd myapp
npm i
npm start

瀏覽器試下http://localhost:3000看到如下就ok了。

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

開始項目關聯

step 1

在Flutter項目中執行。

flutter build web

構建web包,最終會在build文件夾下生成web包,web包下就是網站的相關文件。

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

step 2

copy web包下的文件到node項目的public文件下。

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

我創建了一個public_flutter_web,爲了是以後文件區分,也建議你做一樣的操作。

step 3

改造express,因爲默認express是展示 views包下的網頁的,而且默認不是html實現。將下圖中文件全部刪除即可。

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

打開 app.js文件,刪除delete標記部分,添加add標記部分:

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

step 4

保存修改,重新將服務npm start,再打開http://localhost:3000。看到如下:

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

大功告成,這樣就行了嗎,nono,對於一個懶惰的人來說,我們要寫一些腳本,輔助項目自動構建。

step 5

由於node項目目錄太深,在命令行運行也很麻煩,我們寫個shell腳本,來幫我搞定。在flutter項目根目錄創建bin文件夾,用來放置我們的腳本。

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

右鍵New File 命名爲 test_start_node.sh,內容如下:

#!/usr/bin/env bash

node node/server/bin/www

也很簡單。這個腳本就是輔助我們開啓node服務。當然我們還會有flutter項

目構建的一些腳本,自動copy文件到指定目錄等等,這些之後慢慢補全哦。

最後

如果你正在尋找 Flutter 的學習資源,下面我整理了一些關於 Flutter的資料,需要的私信( Flutter)我分享給你。這份資料可以幫助新手開始 Flutter 的旅程,也可以幫已經瞭解過這方面的朋友更進一步。希望能幫到你們。

Android學習PDF+架構視頻+面試文檔+源碼筆記

如果你有其他需要的話,也可以在 GitHub 上查看,下面的資料也會陸續上傳到Github

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

Flutter精選面試題

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

Flutter大型項目實戰

Android三大巨頭,手把手教你用Flutter搭建個人網站?so easy!

Flutter核心學習資料大全

將代碼上傳至github:

https://github.com/ibaozi-cn/flutter-jetpack

 最後的最後

登上你的雲服務器,通過git 將項目下載到服務器上,這裏我們需要工具輔助我們服務部署。我選擇pm2+nginx來將我的服務啓動起來。

這裏不詳細說了,網上有一片大海,需要你去浪。有問題的留言我,我可以協助你。最終通過pm2 和 nginx ,項目完美運行。沒錯你看到的是jetpack.ibaozi.cn,哈哈,域名還沒下來,先用了之前的ibaozi.cn,後面我們會遷移到jetpack.net.cn。

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