Express + Ejs實現一個簡單的WebServer

Tonny 發布于2019-08-20 16:06 / 2812人閱讀

摘要：最近在看，讀完官方的起步教程后想著該自己折騰點東西，就先用實現一個超簡單的，主要記錄下思路。先推薦一個入門級的簡單實戰項目地址。不過鑒于初學，自身的思路肯定不會是最佳實踐，慢慢積累。

最近在看node.js，讀完官方的起步教程后想著該自己折騰點東西，就先用express + ejs實現一個超簡單的webserver，主要記錄下思路。先推薦一個nodejs入門級的簡單實戰項目地址。很適合入門級上手：https://github.com/nswbmw/N-b...

思路

因為本身沒有后端相關語言開發實戰經驗，所以學習nodejs過程中，更多是思路和理念的學習和理解，語言只是工具。不過鑒于初學，自身的思路肯定不會是最佳實踐，慢慢積累。

實現一個簡單的webserer肯定需要以下幾個東西：

路由：router 對于不同請求路徑分發對應的事件處理程序

事件處理程序 routerHandler 分別處理對應的事件

返回模板 views 處理后返回的模板，這里選用的是服務端渲染

思路有了，先安裝express和ejs，切換到對應目錄下：npm i express ejs
建立文件目錄：

MyServer
    |__index.js
    |__routers
    |   |__index.js
    |   |__users.js
    |__views
    |   |__users.ejs
    |__node_modules
    |__package.json

index.js：作為入口文件，也作為路由（因為是一個簡單server，可以先這么處理）

routers：存放不同路徑對應的事件處理程序

views：存放模板

關于express和ejs的使用網上文檔已經夠多了，所以只記錄用到的。

1.index.js

const path = require("path");

const express = require("express");
const app = express();

const indexRouter = require("./routers/index");
const usersRouter = require("./routers/users");

app .set("views", path.join(__dirname, "views"))
    .set("view engine", "ejs")
    .use("/",indexRouter)
    .use("/users", usersRouter)
    .listen(666, "127.0.0.1");

path: path是nodejs核心模塊之一，主要處理與文件路徑和目錄相關的數據，下面的path.join方法是講參數中的path片段拼接處理成規范的文件路徑，其中的__dirname是指當前文件所在的完整的絕對路徑；

express: express基于 Node.js 平臺，快速、開放、極簡的 web 開發框架。這里用到的就是express最典型的的應用方式，express返回一個function(req,res,next)；next先不講，app.use簡單理解就是針對第一個參數對應路徑(如果第一個參數是路徑)，就執行對應的function；下文中的app.set方法是設置一些屬性，http://www.expressjs.com.cn/4...；這里設置了response引用的view（模板）和對應的view engine（模板引擎）；

indexRouter/usersRouter: 分別引入不同請求對應的處理函數以方便調用；

2.routers/

index.js

const express = require("express");
const router = express.Router();

router.get("/", function(req, res){
    res.send("express is started! this is index!");
})

module.exports = router;

users.js

const express = require("express");
const router = express.Router();

router.get("/:name", function(req, res){
    res.render("users",{
        name: req.params.name,
        id: req.query.id
    });
})

module.exports = router;

這里的思路也很簡單，引入express，調用router中間件，
/:name: 這個其實是個占位符，代表的是/前面的字段的值，可以通過requset.params取到，比如如果訪問的是127.0.0.1:666/users/laoli，這里通過requset.params.name取到的值就是laoli；
req.query: 其實就是取?后面的參數，比如訪問127.0.0.1:666/users/laoli?age=18，這時通過req.query.age取到的值就是18；
res.render: 就是取模板，將后一個ocject中參數值傳入模板渲染后返回

3.users.ejs




    
    idnex
    


    <%= name.toUpperCase() %>
    hello, <%= name %>, your ID is <%= id %>

ejs模板文件，ejs很簡單好用，文檔也很多。http://ejs.co/

以上，完成后在命令行中運行node index.js，然后頁面訪問127.0.0.1:666/users/laoli?id=18就會得到如下頁面：

其中的請求和響應如下：

一個簡單的webserver算式跑起來了，當然，在此基礎上可以新增一些簡單的功能，比如表單提交的處理，ajax異步提交并響應。這個接下來去做嘗試。

GPU云服務器云服務器 js實現的簡單特效用c實現簡單的shell express框架實現webrtc失敗 java實現簡單的web服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82719.html

Express 實戰（七）：視圖與模板：Pug 和 EJS

摘要：而框架中最常用的兩個視圖引擎是和。實際上這些上下文對象就是會在視圖中使用到的變量。其實視圖緩存并不是緩存視圖實際上它緩存的視圖路徑。根據默認視圖引擎將缺少拓展名的視圖文件補充完整。實際上存在由不同組織維護的兩個不同版本的。 showImg(https://segmentfault.com/img/remote/1460000010821004);前面的內容大都是關于 Express 框...

wmui 2019-08-20 18:54 評論0 收藏0
Express 實戰（三）：Express 基礎

摘要：同樣的的框架中也有被稱為中間件概念。所以，整個工作流有兩種可能情形另外，這些中間件函數中部分函數需要對響應做出響應。擴展和在原來基礎上對和對象進行了功能擴展。除了對響應對象進行了拓展之 Express 框架的初衷是為了拓展 Node 內置模塊的功能提高開發效率。當你深入研究后就會發現，Express 其實是在 Node 內置的 HTTP 模塊上構建了一層抽象。理論上所有 Express...

KoreyLee 2019-08-20 18:54 評論0 收藏0
多屏互動——H5 中級進階

摘要：手機屏幕朝上，水平靜止放置，軸重力加速度為，為。當手機水平放置，撥動手機，使其慢慢旋轉，重力加速度的數據并沒有變化。四元數的基本數學方程為其中表示旋轉角度，表示旋轉軸。四元數表示一個完整的旋轉。前言隨著智能硬件的普及，手機，平板，PC甚至路邊的電子廣告牌，現代瀏覽器已經無處不在。在瀏覽器里編織出我們自己的一片天地已經輕車熟路，但是這還不夠，H5賦予了瀏覽器太多的新特性，等待我們去使...

wdzgege 2019-08-21 14:08 評論0 收藏0
60分鐘學會使用Node.js+Express+Ejs+mongoDB

摘要：安裝完畢后，打開終端，在終端分別輸入如下命令，檢測是否安裝成功。號會告訴安裝最新版本。它會為每一條記錄創建一個唯一的值。注意我們不需要提前創建這個，它會在第一次使用的時候自動創建。我們可以使用，這是我最常用的方式。 60分鐘學會使用Node.js+Express+Ejs+mongoDB 本文出自從零到壹全棧部落 (Node+Vue+微信公眾號開發)企業級產品全棧開發速成周末班首期班(1...

BicycleWarrior 2019-08-21 11:47 評論0 收藏0