使用Node.js實(shí)現(xiàn)簡易MVC框架的方法

發(fā)布時(shí)間：2020-10-10 18:04:07 來源：腳本之家閱讀：114 作者：jingxian 欄目：web開發(fā)

在使用Node.js搭建靜態(tài)資源服務(wù)器一文中我們完成了服務(wù)器對靜態(tài)資源請求的處理，但并未涉及動態(tài)請求，目前還無法根據(jù)客戶端發(fā)出的不同請求而返回個性化的內(nèi)容。單靠靜態(tài)資源豈能撐得起這些復(fù)雜的網(wǎng)站應(yīng)用，本文將介紹如何使用Node處理動態(tài)請求，以及如何搭建一個簡易的 MVC 框架。因?yàn)榍拔囊呀?jīng)詳細(xì)介紹過靜態(tài)資源請求如何響應(yīng)，本文將略過所有靜態(tài)部分。

一個簡單的示例

先從一個簡單示例入手，明白在 Node 中如何向客戶端返回動態(tài)內(nèi)容。

假設(shè)我們有這樣的需求：

當(dāng)用戶訪問/actors時(shí)返回男演員列表頁

當(dāng)用戶訪問/actresses時(shí)返回女演員列表

可以用以下的代碼完成功能：

const http = require('http');
const url = require('url');

http.createServer((req, res) => {
  const pathName = url.parse(req.url).pathname;
  if (['/actors', '/actresses'].includes(pathName)) {
    res.writeHead(200, {
      'Content-Type': 'text/html'
    });
    const actors = ['Leonardo DiCaprio', 'Brad Pitt', 'Johnny Depp'];
    const actresses = ['Jennifer Aniston', 'Scarlett Johansson', 'Kate Winslet'];
    let lists = [];
    if (pathName === '/actors') {
      lists = actors;
    } else {
      lists = actresses;
    }

    const content = lists.reduce((template, item, index) => {
      return template + `<p>No.${index+1} ${item}</p>`;
    }, `<h2>${pathName.slice(1)}</h2>`);
    res.end(content);
  } else {
    res.writeHead(404);
    res.end('<h2>Requested page not found.</h2>')
  }
}).listen(9527);

上面代碼的核心是路由匹配，當(dāng)請求抵達(dá)時(shí)，檢查是否有對應(yīng)其路徑的邏輯處理，當(dāng)請求匹配不上任何路由時(shí)，返回 404。匹配成功時(shí)處理相應(yīng)的邏輯。

使用Node.js實(shí)現(xiàn)簡易MVC框架的方法

上面的代碼顯然并不通用，而且在僅有兩種路由匹配候選項(xiàng)（且還未區(qū)分請求方法），以及尚未使用數(shù)據(jù)庫以及模板文件的前提下，代碼都已經(jīng)有些糾結(jié)了。因此接下來我們將搭建一個簡易的MVC框架，使數(shù)據(jù)、模型、表現(xiàn)分離開來，各司其職。

搭建簡易MVC框架

MVC 分別指的是：

M: Model （數(shù)據(jù))

V: View （表現(xiàn)）

C: Controller （邏輯）

在 Node 中，MVC 架構(gòu)下處理請求的過程如下：

請求抵達(dá)服務(wù)端

服務(wù)端將請求交由路由處理

路由通過路徑匹配，將請求導(dǎo)向?qū)?yīng)的 controller

controller 收到請求，向 model 索要數(shù)據(jù)

model 給 controller 返回其所需數(shù)據(jù)

controller 可能需要對收到的數(shù)據(jù)做一些再加工

controller 將處理好的數(shù)據(jù)交給 view

view 根據(jù)數(shù)據(jù)和模板生成響應(yīng)內(nèi)容

服務(wù)端將此內(nèi)容返回客戶端

以此為依據(jù)，我們需要準(zhǔn)備以下模塊：

server: 監(jiān)聽和響應(yīng)請求

router: 將請求交由正確的controller處理

controllers: 執(zhí)行業(yè)務(wù)邏輯，從 model 中取出數(shù)據(jù)，傳遞給 view

model: 提供數(shù)據(jù)

view: 提供 html

創(chuàng)建如下目錄：

-- server.js
-- lib
  -- router.js
-- views
-- controllers
-- models

server

創(chuàng)建 server.js 文件：

const http = require('http');
const router = require('./lib/router')();

router.get('/actors', (req, res) => {
  res.end('Leonardo DiCaprio, Brad Pitt, Johnny Depp');
});

http.createServer(router).listen(9527, err => {
  if (err) {
    console.error(err);
    console.info('Failed to start server');
  } else {
    console.info(`Server started`);
  }
});

先不管這個文件里的細(xì)節(jié)，router是下面將要完成的模塊，這里先引入，請求抵達(dá)后即交由它處理。

router 模塊

router模塊其實(shí)只需完成一件事，將請求導(dǎo)向正確的controller處理，理想中它可以這樣使用：

const router = require('./lib/router')();
const actorsController = require('./controllers/actors');

router.use((req, res, next) => {
  console.info('New request arrived');
  next()
});

router.get('/actors', (req, res) => {
  actorsController.fetchList();
});

router.post('/actors/:name', (req, res) => {
  actorsController.createNewActor();
});

總的來說，我們希望它同時(shí)支持路由中間件和非中間件，請求抵達(dá)后會由 router 交給匹配上的中間件們處理。中間件是一個可訪問請求對象和響應(yīng)對象的函數(shù)，在中間件內(nèi)可以做的事情包括：

執(zhí)行任何代碼，比如添加日志和處理錯誤等

修改請求 (req) 和響應(yīng)對象 (res)，比如從 req.url 獲取查詢參數(shù)并賦值到 req.query

結(jié)束響應(yīng)

調(diào)用下一個中間件 (next)

Note:

需要注意的是，如果在某個中間件內(nèi)既沒有終結(jié)響應(yīng)，也沒有調(diào)用 next 方法將控制權(quán)交給下一個中間件，則請求就會掛起

__非路由中間件__通過以下方式添加，匹配所有請求：

router.use(fn);

比如上面的例子：

router.use((req, res, next) => {
  console.info('New request arrived');
  next()
});

__路由中間件__通過以下方式添加，以請求方法和路徑精確匹配：

router.HTTP_METHOD(path, fn)

梳理好了之后先寫出框架：

/lib/router.js

const METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS'];

module.exports = () => {
  const routes = [];

  const router = (req, res) => {
    
  };

  router.use = (fn) => {
    routes.push({
      method: null,
      path: null,
      handler: fn
    });
  };

  METHODS.forEach(item => {
    const method = item.toLowerCase();
    router[method] = (path, fn) => {
      routes.push({
        method,
        path,
        handler: fn
      });
    };
  });
};

以上主要是給 router 添加了 use、get、post 等方法，每當(dāng)調(diào)用這些方法時(shí)，給 routes 添加一條 route 規(guī)則。

Note:

Javascript 中函數(shù)是一種特殊的對象，能被調(diào)用的同時(shí)，還可以擁有屬性、方法。

接下來的重點(diǎn)在 router 函數(shù)，它需要做的是：

從req對象中取得 method、pathname

依據(jù) method、pathname 將請求與routes數(shù)組內(nèi)各個 route 按它們被添加的順序依次匹配

如果與某個route匹配成功，執(zhí)行 route.handler，執(zhí)行完后與下一個 route 匹配或結(jié)束流程（后面詳述）

如果匹配不成功，繼續(xù)與下一個 route 匹配，重復(fù)3、4步驟

 const router = (req, res) => {
    const pathname = decodeURI(url.parse(req.url).pathname);
    const method = req.method.toLowerCase();
    let i = 0;

    const next = () => {
      route = routes[i++];
      if (!route) return;
      const routeForAllRequest = !route.method && !route.path;
      if (routeForAllRequest || (route.method === method && pathname === route.path)) {
        route.handler(req, res, next);
      } else {
        next();
      }
    }

    next();
  };

對于非路由中間件，直接調(diào)用其 handler。對于路由中間件，只有請求方法和路徑都匹配成功時(shí)，才調(diào)用其 handler。當(dāng)沒有匹配上的 route 時(shí)，直接與下一個route繼續(xù)匹配。

需要注意的是，在某條 route 匹配成功的情況下，執(zhí)行完其 handler 之后，還會不會再接著與下個 route 匹配，就要看開發(fā)者在其 handler 內(nèi)有沒有主動調(diào)用 next() 交出控制權(quán)了。

在__server.js__中添加一些route：

router.use((req, res, next) => {
  console.info('New request arrived');
  next()
});

router.get('/actors', (req, res) => {
  res.end('Leonardo DiCaprio, Brad Pitt, Johnny Depp');
});

router.get('/actresses', (req, res) => {
  res.end('Jennifer Aniston, Scarlett Johansson, Kate Winslet');
});

router.use((req, res, next) => {
  res.statusCode = 404;
  res.end();
});

每個請求抵達(dá)時(shí)，首先打印出一條 log，接著匹配其他route。當(dāng)匹配上 actors 或 actresses 的 get 請求時(shí)，直接發(fā)回演員名字，并不需要繼續(xù)匹配其他 route。如果都沒匹配上，返回 404。

在瀏覽器中依次訪問 http://localhost:9527/erwe、http://localhost:9527/actors、http://localhost:9527/actresses 測試一下：

使用Node.js實(shí)現(xiàn)簡易MVC框架的方法

network 中觀察到的結(jié)果符合預(yù)期，同時(shí)后臺命令行中也打印出了三條 New request arrived語句。

接下來繼續(xù)改進(jìn) router 模塊。

首先添加一個 router.all 方法，調(diào)用它即意味著為所有請求方法都添加了一條 route：

router.all = (path, fn) => {
    METHODS.forEach(item => {
      const method = item.toLowerCase();
      router[method](path, fn);
    })
  };

接著，添加錯誤處理。

/lib/router.js

const defaultErrorHander = (err, req, res) => {
  res.statusCode = 500;
  res.end();
};

module.exports = (errorHander) => {
  const routes = [];

  const router = (req, res) => {
      ...
    errorHander = errorHander || defaultErrorHander;

    const next = (err) => {
      if (err) return errorHander(err, req, res);
      ...
    }

    next();
  };

server.js

...
const router = require('./lib/router')((err, req, res) => {
  console.error(err);
  res.statusCode = 500;
  res.end(err.stack);
});
...

默認(rèn)情況下，遇到錯誤時(shí)會返回 500，但開發(fā)者使用 router 模塊時(shí)可以傳入自己的錯誤處理函數(shù)將其替代。

修改一下代碼，測試是否能正確執(zhí)行錯誤處理：

router.use((req, res, next) => {
  console.info('New request arrived');
  next(new Error('an error'));
});

這樣任何請求都應(yīng)該返回 500：

使用Node.js實(shí)現(xiàn)簡易MVC框架的方法

繼續(xù)，修改 route.path 與 pathname 的匹配規(guī)則?，F(xiàn)在我們認(rèn)為只有當(dāng)兩字符串相等時(shí)才讓匹配通過，這沒有考慮到 url 中包含路徑參數(shù)的情況，比如：

localhost:9527/actors/Leonardo

與

router.get('/actors/:name', someRouteHandler);

這條route應(yīng)該匹配成功才是。

新增一個函數(shù)用來將字符串類型的 route.path 轉(zhuǎn)換成正則對象，并存入 route.pattern：

const getRoutePattern = pathname => {
 pathname = '^' + pathname.replace(/(\:\w+)/g, '\(\[a-zA-Z0-9-\]\+\\s\)') + '$';
 return new RegExp(pathname);
};

這樣就可以匹配上帶有路徑參數(shù)的url了，并將這些路徑參數(shù)存入 req.params 對象：

    const matchedResults = pathname.match(route.pattern);
    if (route.method === method && matchedResults) {
      addParamsToRequest(req, route.path, matchedResults);
      route.handler(req, res, next);
    } else {
      next();
    }

const addParamsToRequest = (req, routePath, matchedResults) => {
  req.params = {};
  let urlParameterNames = routePath.match(/:(\w+)/g);
  if (urlParameterNames) {
    for (let i=0; i < urlParameterNames.length; i++) {
      req.params[urlParameterNames[i].slice(1)] = matchedResults[i + 1];
    }
  }
}

添加個 route 測試一下:

router.get('/actors/:year/:country', (req, res) => {
  res.end(`year: ${req.params.year} country: ${req.params.country}`);
});

訪問http://localhost:9527/actors/1990/China試試:

使用Node.js實(shí)現(xiàn)簡易MVC框架的方法

router 模塊就寫到此，至于查詢參數(shù)的格式化以及獲取請求主體，比較瑣碎就不試驗(yàn)了，需要可以直接使用 bordy-parser 等模塊。

現(xiàn)在我們已經(jīng)創(chuàng)建好了router模塊，接下來將 route handler 內(nèi)的業(yè)務(wù)邏輯都轉(zhuǎn)移到 controller 中去。

修改__server.js__，引入 controller:

...
const actorsController = require('./controllers/actors');
...
router.get('/actors', (req, res) => {
  actorsController.getList(req, res);
});

router.get('/actors/:name', (req, res) => {
  actorsController.getActorByName(req, res);
});

router.get('/actors/:year/:country', (req, res) => {
  actorsController.getActorsByYearAndCountry(req, res);
});
...

新建__controllers/actors.js__:

const actorsTemplate = require('../views/actors-list');
const actorsModel = require('../models/actors');

exports.getList = (req, res) => {
  const data = actorsModel.getList();
  const htmlStr = actorsTemplate.build(data);
  res.writeHead(200, {
    'Content-Type': 'text/html'
  });
  res.end(htmlStr);
};

exports.getActorByName = (req, res) => {
  const data = actorsModel.getActorByName(req.params.name);
  const htmlStr = actorsTemplate.build(data);
  res.writeHead(200, {
    'Content-Type': 'text/html'
  });
  res.end(htmlStr);
};

exports.getActorsByYearAndCountry = (req, res) => {
  const data = actorsModel.getActorsByYearAndCountry(req.params.year, req.params.country);
  const htmlStr = actorsTemplate.build(data);
  res.writeHead(200, {
    'Content-Type': 'text/html'
  });
  res.end(htmlStr);
};

在 controller 中同時(shí)引入了 view 和 model，其充當(dāng)了這二者間的粘合劑?；仡櫹?controller 的任務(wù)：

controller 收到請求，向 model 索要數(shù)據(jù)
model 給 controller 返回其所需數(shù)據(jù)
controller 可能需要對收到的數(shù)據(jù)做一些再加工
controller 將處理好的數(shù)據(jù)交給 view

在此 controller 中，我們將調(diào)用 model 模塊的方法獲取演員列表，接著將數(shù)據(jù)交給 view，交由 view 生成呈現(xiàn)出演員列表頁的 html 字符串。最后將此字符串返回給客戶端，在瀏覽器中呈現(xiàn)列表。

從 model 中獲取數(shù)據(jù)

通常 model 是需要跟數(shù)據(jù)庫交互來獲取數(shù)據(jù)的，這里我們就簡化一下，將數(shù)據(jù)存放在一個 json 文件中。

/models/test-data.json

[
  {
    "name": "Leonardo DiCaprio",
    "birth year": 1974,
    "country": "US",
    "movies": ["Titanic", "The Revenant", "Inception"]
  },
  {
    "name": "Brad Pitt",
    "birth year": 1963,
    "country": "US",
    "movies": ["Fight Club", "Inglourious Basterd", "Mr. & Mrs. Smith"]
  },
  {
    "name": "Johnny Depp",
    "birth year": 1963,
    "country": "US",
    "movies": ["Edward Scissorhands", "Black Mass", "The Lone Ranger"]
  }
]

接著就可以在 model 中定義一些方法來訪問這些數(shù)據(jù)。

models/actors.js

const actors = require('./test-data');

exports.getList = () => actors;

exports.getActorByName = (name) => actors.filter(actor => {
  return actor.name == name;
});

exports.getActorsByYearAndCountry = (year, country) => actors.filter(actor => {
  return actor["birth year"] == year && actor.country == country;
});

當(dāng) controller 從 model 中取得想要的數(shù)據(jù)后，下一步就輪到 view 發(fā)光發(fā)熱了。view 層通常都會用到模板引擎，如 dust 等。同樣為了簡化，這里采用簡單替換模板中占位符的方式獲取 html，渲染得非常有限，粗略理解過程即可。

創(chuàng)建 /views/actors-list.js:

const actorTemplate = `
<h2>{name}</h2>
<p><em>Born: </em>{contry}, {year}</p>
<ul>{movies}</ul>
`;

exports.build = list => {
  let content = '';
  list.forEach(actor => {
    content += actorTemplate.replace('{name}', actor.name)
          .replace('{contry}', actor.country)
          .replace('{year}', actor["birth year"])
          .replace('{movies}', actor.movies.reduce((moviesHTML, movieName) => {
            return moviesHTML + `<li>${movieName}</li>`
          }, ''));
  });
  return content;
};

在瀏覽器中測試一下：

使用Node.js實(shí)現(xiàn)簡易MVC框架的方法

至此，就大功告成啦！

以上這篇使用Node.js實(shí)現(xiàn)簡易MVC框架的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

使用Node.js實(shí)現(xiàn)簡易MVC框架的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽