Express + Ejs實現一個簡單的WebServer

時間 2019-11-09

標籤 express ejs 實現一個簡單 webserver 简体版

原文原文鏈接

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

思路

由於自己沒有後端相關語言開發實戰經驗，因此學習nodejs過程當中，更可能是思路和理念的學習和理解，語言只是工具。不過鑑於初學，自身的思路確定不會是最佳實踐，慢慢積累。html

實現一個簡單的webserer確定須要如下幾個東西：node

路由：router 對於不一樣請求路徑分發對應的事件處理程序git
事件處理程序 routerHandler 分別處理對應的事件github
返回模板 views 處理後返回的模板，這裏選用的是服務端渲染web

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

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

index.js：做爲入口文件，也做爲路由（由於是一個簡單server，能夠先這麼處理）express
routers：存放不一樣路徑對應的事件處理程序npm
views：存放模板json

關於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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>idnex</title>
    <style type="text/css">
        body{
            background: #fafff3;
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1><%= name.toUpperCase() %></h1>
    <p>hello, <%= name %>, your ID is <%= id %></p>
</body>
</html>

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

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