国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > JS > 正文

使用 node.js 模仿 Apache 小部分功能

2024-05-06 16:53:05
字體:
來源:轉載
供稿:網友

首先,這個例子用到了服務端渲染的技術。服務端渲染,說白了就是在服務端使用模板引擎,這里我先簡單的介紹一下服務端渲染與客戶端渲染之間的區別。

服務端渲染與客戶端渲染之間的區別:

  • 客戶端渲染不利于搜索引擎優化
  • 服務端渲染可以被爬蟲抓取到,而客戶端異步渲染很難被爬蟲抓取到(例如:AJAX)
  • 大部分的網站既不是純異步(客戶端),也不是純服務端渲染出來的,而是兩者結合的
  • 例如:京東的商品列表采用的就是服務端渲染,目的是為了SEO搜索引擎優化,說白了就是為了能夠被搜索到,且能被爬蟲抓取(搜索引擎本身也是一種爬蟲)。
  • 而京東的商品評論列表為了用戶體驗,而且也不需要SEO優化,所以才用的是客戶端渲染

簡單的判斷內容為服務端渲染還是客戶端渲染

  最簡單的方法就是:

  1. 點擊訪問一個頁面(我們這里以京東為例)
  2. 隨便訪問一個商品頁,然后復制商品標題
  3. 然后鼠標右擊點擊查看網頁源代碼
  4. 在源代碼頁按 Ctrl + f ,接著把復制的內容粘貼進去
  5. 能搜到就是 服務端渲染,否則的話,就是客戶端渲染。

利用 art-template 模板引擎

  1. 安裝: 在想要安裝的目錄下打開命令行工具  輸入 npm install art-template, 然后它會自動生成 node_modules 目錄(前提,系統已經安裝了 Node.js 環境)
  2. 在需要使用的文件模塊中加載 art-template:
  3. const template = require('art-template');
  4. 就可以使用了 , 官方文檔地址:https://aui.github.io/art-template/zh-cn/docs/index.html

Apache 部分功能實現

Node.js 相關API(本例中使用):

基于http

  • createServer() : 創建一個服務器
  • on():  提供服務:對數據的服務,發請求,接收請求,處理請求,發送響應,等等
  • listen(): 綁定端口號,啟動服務器

基于fs(文件系統)

  • readFile(): 讀取文件(參數一為 文件路徑,參數二為回調函數)
  • readdir(): 讀取目錄(參數一位目錄路徑,參數二為回調函數)

基于path(路徑)

  • extname(): 獲取文件后綴名
  • 隨便在一個位置建立 www 文件夾(文件名可以自己隨意):

node.js,Apache

寫HTML:

<!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <title>Index of / {{title}}</title></head><body>  <h1>Index of / {{title}}</h1>  <ul>    <li><a href="/" rel="external nofollow" > Parent Directory</a></li>    {{each files}}    <li><a href="/{{ $value }}" rel="external nofollow" >{{ $value }}/</a></li>    {{/each}}  </ul></body></html>

node.js:

const http = require('http');const fs = require('fs');const template = require('art-template');const path = require('path');const port = 5000;const server = http.createServer();server.on('request', (request, response) => {  let url = request.url;  let wwwDir = 'D:/www';  fs.readFile('./template.html', (error, data) => {    if (error) {      return response.end('404 Not Found');    }    // 1.如何得到 wwwDir 目錄列表中的文件名和目錄名    //   fs.readdir    // 2.如何將得到的文件名和目錄名替換到 template.html 中    //   2.1 在 template.html 中需要替換的位置預留一個特殊的標記    //   2.2 根據 files 生成需要的 HTML 內容    //   模板引擎    if (url !== '/') {      wwwDir += url;    }    let fileEnd = path.extname(wwwDir);    /**     * 如果是文件,則訪問該文件     * 如果是文件夾,則訪問里面的內容     */    if (fileEnd !== '') {      fs.readFile(wwwDir, (error, data) => {        if (error) {          return response.end('404 Not Found');        }        // 獲取文件后綴名(具體問題具體分析,這里我只設置 .txt 文件的 編碼類型)        if (fileEnd === '.txt') {          response.setHeader('Content-Type', 'text/plain; charset=utf-8');        }        if (fileEnd === '.jpg') {          response.setHeader('Content-Type', 'image/jpeg');        }        if (fileEnd === '.mp4') {          response.setHeader('Content-Type', 'video/mpeg4');        }        response.end(data);      });    } else {      console.log(wwwDir);      fs.readdir(wwwDir, (error, files) => {        if (error) {          return response.end('Can not find this dir');        }        console.log(files);        // files: [ 'a.txt', 'apple', 'images', 'index.html', 'static', 'videos' ]        let htmlStr = template.render(data.toString(), {          title: wwwDir,          files: files,        });        // 3.發送響應數據        response.end(htmlStr);      });    }  });});server.listen(port, () => {  console.log(`服務器已經開啟,您可以通過 http://127.0.0.1:${port} 訪問....`);});

總結

以上所述是小編給大家介紹的使用 node.js 模仿 Apache 小部分功能,希望對大家有所幫助,如果大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!


注:相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 枞阳县| 万盛区| 固阳县| 离岛区| 崇州市| 连山| 丰台区| 八宿县| 桦川县| 清苑县| 阳谷县| 蒙山县| 朝阳市| 宾川县| 琼海市| 邯郸县| 雷波县| 江门市| 旌德县| 舒兰市| 龙岩市| 成安县| 淮滨县| 隆化县| 万宁市| 夹江县| 寻甸| 白城市| 天柱县| 曲靖市| 云浮市| 中江县| 沅陵县| 仙桃市| 工布江达县| 四川省| 腾冲县| 中宁县| 泰来县| 陆川县| 南城县|