node 入門級必看

講解任何一個東西,我們一定要知道:它是什麼?怎麼用?兩個很關鍵的問題

定義

首先 node 並不是一門語言,而是 javascript 的一個新的運行環境(準確地說是 js 的一個運行時)

傳統上,js 的運行環境依賴於瀏覽器,是藉助於瀏覽器渲染的,因此這也限制了 js 的表演領域只能是瀏覽器(web)端

但是,當出現了 nodejs (node和nodejs一回事)後,js 又有了一個全新的運行時(還是習慣這麼叫),js 搭上了 node 這列快車後,使得 js 的用武之地拓展到了 服務端、遊戲端、tcp、web端、桌面端等(不依託於瀏覽器等地方),因此這兩者的強勢結合,在業界(尤其前端)掀起了一陣風暴

我們常用的還是 它在桌面端和 web 端這種全新的開發模式

說到 node在 web 端的開發,就不得不提及一個偉大的 node 在 web 端的庫(類似於框架,準確地說我也不知道庫和框架的真正意義上區別是什麼),那就是 Express 庫

而 node 在桌面端的開發中,也有兩個大名鼎鼎的 庫:nw 和 electron(谷歌力推的)

由此看來,node 的前景無限美好啊,同志們仍需努力啊,廢話就不多說了,開始擼吧

接下來,我說一下利用 node 和 Express 庫 來搭建一個站點的原理吧,流程模式類似於:瀏覽器發起一個請求,然後服務端接受(或者是叫攔截 intercept)這個請求,然後響應函數,將處理結果返回給瀏覽器,交給瀏覽器去渲染該相應結果

一個完整的 node Express 庫的項目結構如下:

|__node_modules
|__routers
    |__main.js
|__views
    |__index.html
    |__about.html
|__package.json
|__app.js

上面這些是一個 Express 庫項目所必需的

接下來,開始真正的表演了

1、創建 Express 的服務器(server)

我在前面說過,node 的項目最關鍵的是處理 js,因此在 node 中,最重要以及控制整個項目的運行都是依賴於 js 的,但是這些 js 文件是依賴於 node 去加載處理的,所以即使你看到一大堆 html 頁面,也是不能直接在瀏覽器中正確運行的

而控制整個項目的最高一級 js 是一個叫 app.js 的文件(你完全可以重新命名,並重寫它,但是約定俗成叫這個名);請注意這個文件的目錄級別,是位於項目根目錄的,切記(因爲是最高級別的)

  • 接下來,我們就手寫這個文件,並說明這個文件的每一處代碼的作用
    //1、要想構建一個瀏覽器端訪問,服務端響應的系統(暫且稱之爲系統吧),在node中,有很多種方式,這裏我們採用Express庫來創建服務端
    var express = require('express');
    
    //2、這個庫對外提供了一個 express() 的入口方法,用來創建服務端實例
    var app = express();
    
    //3、設置服務端的響應 url 映射地址
    app.get('/index', function (req, res) {
        res.send("哇塞,你真的進來了哦");
    });
    
    //4、讓這個服務端的實例監聽一個瀏覽器的端口,同時附帶一些友好提示信息
    app.listen('3333', function () {
        console.log("Server is running on http://127.0.0.1:3333");
    });
    

到此,一個最簡單的 demo 就完成了,然後你進入到該文件所在的目錄下,執行命令 node app.js(注意,這裏我還是按照大部分人的習慣,起名叫 app.js 了)

這個時候,你就可以在瀏覽器輸入控制檯打印出的這個地址訪問了,是不是 so easy!(注意,我這裏設置的攔截請求是 /index,因此按照我的來的話,你得這樣訪問:http://127.0.0.1:3333/index),好了,先總結到這裏吧

  • 但是實際上,我們的響應絕不是幾個字符串那麼簡單吶,而是需要根據不同的請求去渲染不同的頁面,因此光是上面那樣是不行的哦;別灰心,接下來我們再來修改上面的內容,實現根據接受不同的請求從而渲染不同的頁面,好了,讓我們開始吧,是不是有點迫不及待了。。。
    //1、複製上面代碼,然後修改響應數據
    var express = require('express');
    
    var app = express();
    
    //2、既然是 響應各種頁面,那麼我們就需要一個視圖渲染引擎了,在 Express node 中,就是 ejs
    var ejs = require('ejs');
    
    //3、將創造出的這個服務端實例的視圖引擎修設置爲 ejs
    app.set('view engine', 'ejs');
    
    //4、在設置 ejs 引擎處理的是哪一類文件
    app.engine('html', ejs.renderFile);
    
    //5、下面這些代碼保持不動就行了,無非就是多加了幾個頁面 【注意,get表示我這裏只處理的是 get 請求哦】
    app.get('/index', function (req, res) {
      res.render('./index.html'); //這裏是綁定該響應將要渲染的那個頁面
    });
    app.get('about', function (req, res) {
        res.render('./about.html'); //同上,但是我多說一句,這裏一般經常會出現渲染頁面路徑寫的不對的問題,這個需要你自己慢慢觀察了【ps:渲染時,系統會自動去 views 文件夾下面找視圖,因此,如果你的頁面是views的直接子目錄,那就直接寫目標頁面即可】
    });
    
    app.listen('3333', function () {
        console.log("Server is running on http://127.0.0.1:3333");
    });
    

嚄,終於完成了,雖然累,但是理解的還是深刻的嘛,入門的不二選擇哦,歡迎交流哦

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