序
在和四個實驗室 Web 服務(wù)端大一學(xué)弟的為期倆周的準備下，2017 年 04.08 號這一整天，終于成功舉辦了這場編程馬拉松活動。從最初的簡單分享到發(fā)現(xiàn)時間不足而拓展成編程馬拉松，也終于敲定了活動名稱，確定了活動流程。此之謂：
小全棧編程馬拉松
如果你還不了解我，不了解這場活動在大學(xué)氛圍能夠成功舉辦的背景，不妨看看這三篇文章，當然更多的故事在我的簡書和微信訂閱號之中（@韓亦樂）。
- 面向未來<-一位軟工男的大一故事。里面講了我大一的故事，分享出來的反饋效果真心不錯。
- 思沃學(xué)院所帶給我們的。影響我一生的暑期特訓(xùn)營經(jīng)歷，學(xué)到了編程軟硬技能，找到了自己的使命。
- freeCodeCamp西安第一次線下編程活動體驗。開始了自己成為小小開源編程社區(qū)組織者的心路全歷程。
并且整場活動的文章內(nèi)容在這里：
景
這場活動在西郵通院科協(xié)邀請下，由我所在的 CreatShare 互聯(lián)網(wǎng)實驗室主講，包括全天流程及其干貨內(nèi)容都由 CreatShare 互聯(lián)網(wǎng)實驗室（其實就是我和四個學(xué)弟啦）策劃并完善。我是這么形容這場活動對我的意義，其中可見從我的倆個大學(xué)實驗室到我組織的本地 FCC 西安開源前端（全棧）社區(qū)活動，融匯了我倆年的“畢生所學(xué)”。
那么不多說，活動流程如下，用 MindeNode 繪制，貫穿 Web 前后端的基礎(chǔ)知識點和軟技能，激情的開始吧。
入
整場活動從前端到后端，首先便是 HTML + CSS 的必備基礎(chǔ)內(nèi)容。我們在這里引入了自己的思考，開啟一場獨特的“大前端”之旅。
HTML + CSS
以下三個圖是從學(xué)弟的 PPT 中取材，HTML 可以了解結(jié)構(gòu)和歷史，CSS 可以看看選擇器和屬性，并用流行的 Sublime 編輯器做個 Demo 體驗（匹配一下上面第一個學(xué)弟帥哥的照片，激發(fā)一下學(xué)習(xí)欲望）。
我做了總結(jié)和擴充，從真實世界到前端，從大前端看 Web。
寫一個 Demo 解釋一下吧~請忽視我的“高耦合”：
<!-- HTML 標簽是由尖括號包圍的關(guān)鍵詞，比如 <html>，用來描述網(wǎng)頁 -->
<html>
<head>
<title>這是我的第一個頁面。</title>
</head>
<!-- Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們 -->
<body>
<h1>這是我的第一個大標題。</h1>
<!-- HTML 標簽通常是成對出現(xiàn)的，比如 <b> 和 </b> -->
<p>這是我的第一個段落。</p>
<br/>
<hr/>
<h2>我比大標題小那么一丟丟</h2>
<p><a>這是我的第一個鏈接</a></p>
<p>別跑，我的頭像好帥氣</p>
<!-- 即將插入一個圖像，雖然源碼的耦合度不同 -->
<p></p>
</body>
</html>
這場名曰“ Web 全棧”的活動，怎么能不講講 Web 的背景？
好巧的是，查資料的時候，看到萬維網(wǎng)之父剛剛獲得圖靈獎，實至名歸，激動萬分。
JavaScript + ChromeDevTool
相比“PHP 是世界上最好的語言”，JavaScipt 應(yīng)該算是世界上最“全能”的語言了。JS 從最初的網(wǎng)頁前端交互到現(xiàn)在的 Web 前后端、移動端混合應(yīng)用、物聯(lián)網(wǎng)甚至 AR、VR ，無所不在。畢竟，Atwood 定律告訴我們：
凡是可以用 JavaScript 來寫的應(yīng)用，最終都會用 JavaScript 來寫。
[圖片上傳失敗...(image-b400c6-1509644504877)]](http://upload-images.jianshu.io/upload_images/2558748-8e9718d163fb7f5b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
來場實戰(zhàn)，想必在座的大學(xué)生大多都不怎么關(guān)注自己的“專業(yè)培養(yǎng)計劃”，結(jié)合代碼實戰(zhàn)，來在西郵官網(wǎng)上實戰(zhàn)抓取專業(yè)培養(yǎng)計劃，利用了 JS 的 DOM 操作。
[圖片上傳失敗...(image-63529b-1509644504877)]](http://upload-images.jianshu.io/upload_images/2558748-8b3f6459bfc4a6a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
var v1 = document.getElementsByTagName("table")[2];
var nameArr = [];
var classCount = v1.childNodes[1].childElementCount - 1;
for (var i = 0; i < classCount; i++) {
var name = v1.childNodes[1].childNodes[i+1].childNodes[2].innerHTML;
var nature = v1.childNodes[1].childNodes[i+1].childNodes[6].innerHTML;
if (nature === "選修課") {
name += "(選)"
}
nameArr.push(name);
}
console.log(nameArr.join("，"));
是否是選修課也進行了判斷，最終獲得到四年培養(yǎng)計劃的所有課程，短短的 JS 代碼避免了多少手工記錄，還加深了多少 DOM 知識呢？
發(fā)完講師的照片就跑真刺激。（誰讓比他大一級，逃。。
freeCodeCamp
啊啊啊，這個在線 JS 全棧編程平臺向別人介紹的太多了。直接放圖和鏈接吧！在早上的活動最后，向大家推薦了這個全球性開源編程社區(qū)平臺。
Why...Why...Why always me to create blogs to review and share -- Virgo Me.
除了左下角的各大其他城市線下 JS 編程活動縮影外，其他三張都是我組織的 FCC 西安線下編程活動。認識到了五湖四海的大家。
影
8 小時的活動~！干貨很多，軟技能很多，怎么不來點 VIDEO~不能白白浪費了免費 Wi-Fi，大大的投影和熱情參與的同學(xué)們啊，倆個視頻來分享。相關(guān)鏈接可以在 Youtube、優(yōu)酷等國內(nèi)外平臺搜在這里就不給你們貼鏈接了，勞動勞動更有意義吧。
從上面的第一個視頻可以總結(jié)到，今天的程序員是未來的巫師，掌握著改造世界的方法。影片貫穿著生動的全球 IT 牛人變成回憶錄：
- 比爾·蓋茨，1955年10月28日出生，13 歲接觸計算機，18歲考入哈佛大學(xué)，一年后從哈佛退學(xué)，接著與好友保羅·艾倫一起創(chuàng)辦了美國微軟公司。美國富豪400強榜單常居榜首。
- 杰克·多西，1976年11月19日出生，8 歲有自己的 Machintosh。2008 年 成為 Twitter 聯(lián)合創(chuàng)始人兼CEO。
- 馬克·扎克伯格，1984年05月14日生于美國紐約州白原市，小學(xué) 6 年級開始學(xué)編程，2004 年推動 Facebook 正式上線。
- 克里斯·波什，1984 年出生，美國職業(yè)籃球運動員，NBA 全明星。
絕對不會告訴你們的是，《TED 編織我的夢》這部 TED 演講我在去年面向大一新生的 DIY 電腦俱樂部軟件部第一次分享的主講過程中就放映過，也認識到了這次的幾位服務(wù)端大一學(xué)弟，實則，成功圈粉一大波迷弟。
亂入我在去年 DIY 電腦俱樂部軟件部主講的分享文章，和縮影一張。
沒辦法，我就是愛玩。哎，快大三了，這病，得治。
后
可能是我的“同性相惜(吸)”的氣質(zhì)太濃重了罷，短暫的午飯和午休過后，到了下午進行服務(wù)端分享的時候，早上的女生，就剩通院科協(xié)參與組織的了。
迷弟們，你們走吧，我想靜靜。( ???)
Full-Stack-Developer
什么是全棧工程師？我們該不該以全棧工程師為奮斗目標？我們又能從全棧工程師的方向中學(xué)習(xí)到什么？這里凝聚了我的感悟。
詳細內(nèi)容，記得去看看 我的第一個開源電子書：Little-FSD
[圖片上傳失敗...(image-6ee8d1-1509644504877)]](https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer)](http://upload-images.jianshu.io/upload_images/2558748-d3e0d4da018a1d3a.png?imageMogr2/auto-orient/strip%7CimageView2/2)
正如精讀和粗讀，廣度和深度也是永遠矛盾的話題，先來一波知乎黑。
當然，我不這么認為，我理解的“全棧工程師”的重點不在于去復(fù)古曾經(jīng)最早的下搞電路設(shè)計，中寫匯編代碼，上知設(shè)計模式的“全能程序員”，而是新時代的，擁有極強學(xué)習(xí)能力的編程“終生學(xué)習(xí)者”。
公司的事，就是你的事，不要局限在自己的職位內(nèi)。轉(zhuǎn)譯自 Facebook。
從軟件工程思考到的全棧工程師從某種角度可以說，就是產(chǎn)品運營、運營經(jīng)理、視覺設(shè)計、前端工程師、服務(wù)端工程師，統(tǒng)統(tǒng)吃一口。下圖是我在去年為我所在的 CreatShare 互聯(lián)網(wǎng)實驗室納新準備的組織結(jié)構(gòu)圖可以參考。
關(guān)于這次活動的技術(shù)點，我也快速畫在了概念圖中，以做頭腦風(fēng)暴：Web 前端，Web 后端，框架、平臺、工具、基礎(chǔ)知識點等等。。
Linux + Apache
從下圖鏈接中學(xué)弟的 PPT 中可以學(xué)習(xí)到，Linux 操作系統(tǒng)的基礎(chǔ)知識和用法以及 Apache 服務(wù)器的用處、須知。這是我見過的，最詳細的 PPT 沒有之一。。
[圖片上傳失敗...(image-63049d-1509644504877)]](http://upload-images.jianshu.io/upload_images/2558748-41728931a857a711.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
偷一張 PPT 放到這里：
PHP + MySQL
PHP。。我的大一便以服務(wù)端做為方向，PHP 作為學(xué)習(xí)語言來學(xué)習(xí)，在一定的了解過后，前后端的通吃的時間、精神壓力下，終于選擇了 JavaScript 作為找工作時的重點語言。PHP + MySQL 便是最后一位大一學(xué)弟的分享。
[圖片上傳失敗...(image-c9cb56-1509644504877)]](http://upload-images.jianshu.io/upload_images/2558748-f6d7767182df2086.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
可以在 Windows 平臺安裝 XAMPP 的 PHP 運行環(huán)境傻瓜包，或在 MacOS、Linux 下更難更干貨地安裝開發(fā)環(huán)境，進行Apache、PHP 、MySQL的深入學(xué)習(xí)。這里貼一段代碼，看看 PHP 怎么鏈接數(shù)據(jù)庫，So Easy！
<?
$conn=mysql_connect('localhost','root','');
//狀態(tài)
if(!$conn){
echo "connection failed";
exit;
}
//選擇數(shù)據(jù)庫
$sql='use student';
//conn通道進行
$rs=mysql_query($sql,$conn);
//設(shè)置字符集
$sql='set names utf8';
mysql_query($sql,$conn);
?>
PHP 當然必須得有收接 HTTP 請求的能力，比如處理 GET、POST 請求：
還可以模擬客戶端發(fā)送 GET、POST 請求哦，就讓爬蟲開始吧。
可以用 postman 這類的 HTTP API 模擬工具實戰(zhàn)。
真正的 Web 全棧工程師，是不需要依賴瀏覽器的。 -- 引用自 phantomjs 官網(wǎng)。
架構(gòu)之戰(zhàn)
到了這里，活動也接近尾聲，分享的內(nèi)容慢慢，但后端也只涉及了 LAMP 架構(gòu)，即 Linux + Apache + MySQL + PHP，常被用來做傳統(tǒng)的多頁面網(wǎng)站。然而還有 MEAN 架構(gòu)、.net 等等開發(fā)架構(gòu)，可以幽默的解釋為什么我們要學(xué)習(xí)后端？
MEAN 架構(gòu)，發(fā)揚了 Web 單頁面應(yīng)用的存在需求。MEAN 便是基于 JavaScript 的全?？蚣?MongDB、Express.js、Angular.js、Node.js 。freeCodeCamp 在線編程平臺便是用 MEAN 架構(gòu)實現(xiàn)。技術(shù)沒有優(yōu)劣性，開發(fā)者可以擇一而入。
另外倆個大一服務(wù)端學(xué)弟也在這里，能看出來嗎？就是站著的倆位（逃。
我，終于，露臉了，圍觀請打賞~Two Three Three。
曲
我在 DIY 電腦俱樂部軟件部分享的回顧文章里就以下面這段話結(jié)尾：
分享到最后時間也晚了，教室也要關(guān)門了。這次分享結(jié)束，但人生未嘗不是一次重新開始~
是啊，這次，再一次重新開始，再一次與眾不同，期待未來的更加精彩吧！
[圖片上傳失敗...(image-6e1734-1509644504877)]](http://upload-images.jianshu.io/upload_images/2558748-8985814dd5364c87.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
全棧，是一種心態(tài)！
- Hello，我是韓亦樂，現(xiàn)任本科軟工男一枚。軟件工程專業(yè)的一路學(xué)習(xí)中，我有很多感悟，也享受持續(xù)分享的過程。如果想了解更多或能及時收到我的最新文章，歡迎訂閱我的個人微信號：韓亦樂。我的簡書個人主頁中，有我的微信個人訂閱號二維碼和 Github 主頁地址；我的知乎主頁 中也會堅持產(chǎn)出，歡迎關(guān)注。
- 本文內(nèi)部編號經(jīng)由我的 Github 相關(guān)倉庫統(tǒng)一管理；本文可能發(fā)布在多個平臺但僅在上述倉庫中長期維護；本文同時采用【知識共享署名-非商業(yè)性使用-禁止演繹 4.0 國際許可協(xié)議】進行許可。
