網頁設計/NodeJs

Nodejs 初學上手

contents

  1. 1. 網站利器
    1. 1.1. 簡介
    2. 1.2. 前置作業
    3. 1.3. 目標
    4. 1.4. 歷程
    5. 1.5. Resource & Reference

網站利器

簡介

寫網站對筆者來說是第一次，只有看過別人用 PHP framework 架站，會用到 SQL 語法，還要搭配前端的 CSS、javascript，到現在 javascript 和 CSS 都仍不熟，那這麼還寫一篇文章出來害人呢。

Nodejs 出來後，一個完全 javascript 的環境，撇開了 Apache，只剩下 Javascript 和前端頁面！

前置作業

您需要會點，倒不如說吾就這點程度。

  • HTML 基礎文本語法，能夠造出靜態網頁。
  • Javascript

環境安裝

  • 安裝 NodeJs
  • 安裝 MongoDB
  • 安裝 WebMatrix
    非必要，但是開專案後大體上就會棄，用 Sublime 編輯。其實是因為到了 express 網站，也看不懂要去哪裡下什麼指令指令去安裝架設。

目標

知道 Nodejs 在做什麼，並且用它來寫網站。

歷程

一開始被丟了相當大的問題，原因是當下根本不清楚 Nodejs 是什麼，於是小夥伴們先丟了一個 七天學會 Nodejs 的鏈結給我。

就一股腦地走馬看花，同時也看了很多篇相關於 Nodejs 的文章，但仍壓根不知其何物，只有見識到相當多的指令說明，果然還真必須實作一番才能理解。

慧根嚴重不足，請多多見諒

以前可能用過 Apache，但也不知道其功能，只知道可以幫助將資料藉由 port 80 傳出去，而且還因為某個軟件自帶的安裝 Apache ，其中漏洞導致成為殭屍網路的一群發動攻擊。那件往事還真是難忘，在宿舍還被鎖網。

Nodejs 相當強，全部基於 javascript 可以運行讀檔寫檔還有架站，php 的功能全都包了，但是對於 SQL 資料庫的部分，由於 Nodejs 的操作插件都是在 NPM 平台上，有什麼需求都必須去那邊下載使用。大多數使用 Nodejs 搭配 mongoDB，就相當於 php 搭配 MySQL。

因此藉由上述內容，請明白 Nodejs 和 NPM 是同時灌的，就像 java application 必須有 import library 使用。

換了語言換了腦袋，真的只認為是換語言如此單純的事情嗎？

對於架站 framework 來說，應該不少有人用過 php framework，如果不明白 framework 也沒關係，現在動手去查。看完之後再去查查 MVC MVP MVVM。總之，如果在大學寫過一點程式，多少都會明白自幹框架是多麻煩的事情，但也是好修好改的開始。這裡不談 php framework，nodejs 有一個 express 的 framework，基於我的無知，看不懂官方網站如何指導安裝，那使用邪惡 Windows WebMatrix 提供的網頁開發方式，先快速開啟專案。

後來是明白 express 的安裝方式，express github 上的 README.md 說得相當清楚，這時也要培養看完 README.md 再行動的習慣。

打開 express 專案，一定會發現有數個未知附檔名的出現，大多是 .jade，不要太擔心， jade 檔案就是 html 基於縮排而成的語言，相當精簡且可以根據 express 架構導入變數值。

如果要為這個專案下的 server.js (舊版命名為 app.js) 增加新的模組套用怎麼做？

yourProject/folder/
1
$ npm link modulesName

如果原本使用下述安裝至作業系統，則在 server.js 則不會發生找不到模組的問題。

anywhere
1
$ npm install -g modulesName

接著你會發現專案下 node_modules 會有無數你在 server.js 中 require 的模組內容，同時也會發現模組下又有相依模組，可以層層查閱，這是一個很有趣的現象，不知道模組與模組下會不會有相同相依模組存在。看起來可以猜測為－有。

專案都開啟了，最關注於 CSS 和 JQuery 怎麼灌輸進去。

project/views/layout.jade
1
2
3
4
5
6
7
8
9
10
11
12
doctype 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/ui-darkness/jquery-ui-1.10.4.custom.css')
    link(rel='stylesheet', href='/stylesheets/webstyle.css')
    script(src='/javascripts/jquery-1.10.2.js')
    script(src='/javascripts/jquery-ui-1.10.4.custom.js')
  body
    block content
    <script src='/javascripts/global.js'></script>

而你的 javascript file 就在 project/public/javascript 下，而 CSS 則在 project*public/stylesheets 下，頓時心中一塊大石頭放下了，在還沒調用資料庫前，至少靜態網頁能在 express 運行中出現。

先談到這裡了，要用 express 架出完整的網站，還要走段 mongoDB 的運用，還要學會 jade 的撰寫方式。

其實學到 nodejs express 後，第一個挖到的是 Hexo blog 的製作，也就是你眼前所見的網站。這是一個基於 nodejs 下的套件，使用 markdown 編撰文章，雖然沒有文章線上編輯，幾乎靠者純文字檔的方式運行，為了架設這個頁面，費盡了一番苦心想要進行搬家工程。

如何進行搬家工程？ 爬蟲 對吧？那要用什麼語言進行爬蟲，沒錯！就是剛學到的 Nodejs，可是要轉換成 markdown file 耶，之後是失敗了，因為有很多 CSS 上的問題，轉換一直不理想。

如何架出第一個有 ajax 和 database 的 express 網站，可以查閱下方鏈結。

Resource & Reference