ExpressはNode.jsに基づくWeb開発の枠組み--ノート


Node.jsの文法を勉強してから、Node.jsのWeb開発に関する内容:Expressの枠組みを導入するには、下のソースを理解したようです.また、Expressの枠組みを見に来たら、簡単なようです.Node.jsのWeb開発に関する内容:
  • Node.jsは、第三者のアプリケーションに依存する必要がない.APIに基づいて、自身で
  • を実現することができる.
  • は、静的リソースサーバ
  • を実現する.
  • ルーティング処理
  • ダイナミックルーティング
  • テンプレートエンジン
  • getおよびpostパラメータの処理
  • 開発の便利さのためにExpressの枠組みが生まれたのかもしれません.Node.jsに基づいて静的なウェブページを管理するなら、こう書くべきかもしれません.
    const fs = require('fs');
    const path = require('path')
    const mime = require('./mime.json')
    exports.staticServer = (req,res, root) => {
        fs.readFile(path.join(root,req.url),'utf8', (err, fileContent) => {
            if(err){
                res.writeHead(500,{
                    "Content-Type" : "text/plain;charset=utf8"
                })
                res.end("        ")
            }else{
                let ext = path.extname(req.url);
                let dtype = mime[ext] || 'text/html';
                if(dtype.startsWith('text')){
                    dtype += ';charset=utf8';
                }
                res.writeHead(200,{
                    "Content-Type" : dtype
                })
                res.end(fileContent);
            }
        })
    }
    ```js
    
                     (art-template):
    
    ```js
    const http = require('http')
    const ss = require('./06.js');
    const url = require('url')
    const querystring = require("querystring")
    const path = require('path')
    http.createServer((req, res) => {
        //       
    
        // if(req.url.startsWith('/www')){
        //     ss.staticServer(req,res,__dirname);
        // }
        // 
        ss.staticServer(req,res,path.join(__dirname));  //        
        //     
        if(req.url.startsWith('/login')){
            if(req.method == 'GET'){
                let param = url.parse(req.url, true).query;
                res.writeHead(200,{
                    "Content-Type" : "text/plain;charset=utf8"
                })
                if(param.username == 'admin' && param.password == '123'){
                    
                    res.end("GET    !")
                }else{
                    res.end("GET    ")
                }
            }
            if(req.method == "POST"){
                let pdata = '';
                req.on('data',(chunk)=>{
                    pdata += chunk;
                })
                req.on('end',()=>{
                    let obj = querystring.parse(pdata);
                    res.writeHead(200,{
                        "Content-Type" : "text/plain;charset=utf8"
                    })
                    if(obj.username == 'admin' && obj.password == '123'){
                        res.end("    ");
                    }else{
                        res.end("POST     ")
                    }
                })
            }
        }
    }).listen(3005,()=>{
        console.log("running");
    })
    
    だからExpressフレームの出現は、この現状を改善しました.
    const express = require('express')
    const app = express()
    
    //       ‘/‘
    app.get('/Home', (req, res) => {
        res.send("OK!");
    }).listen(3000, () => {
        console.log("running....");
    })
    app.use(express.static('public'));
    app.use(express.static('myexpress'));
    
    Node.jsに基づくWeb開発の枠組みを完璧にパッケージ化しました.
    Express基本使用
    中間部品
    Expressは、ルートとミドルウェアのWebフレームワークであり、自身の機能は少ないです.Expressアプリケーションは本質的には一連のミドルウェア機能呼び出しです.自分の理解とは、ミドルウェアは処理中の一環(本質的には関数)next()であり、次の要求を次のミドルウェアルーティング処理プログラムに伝達することで、一つの経路のために複数のルートを定義することができます.next()を通じて制御権を次の中間部品に渡すことができます.現在のミドルウェア機能終了要求−応答期間があれば、要求は保留されます.
    ルータのミドルウェアスタックから残りのミドルウェア機能をスキップするには、next('route')を呼び出して制御権を次のルートに渡すようにしてください.next('route')は、app.METHOD()またはrouter.METHOD()の関数を使用してロードされたミドルウェア関数のみで有効であることに注意してください.
    ミドルウェアを使用して、次に述べるパラメータの処理も第三者ミドルウェアbody-parserを使用する必要があります.
    パラメータ処理
    一つの経路の要求に対しては、ルーティングの配信によって要求方式が異なり、自然に取得されるデータ方式も異なり、一般的なget post put delete要求の方式に対して、Expressはどのように解決されますか?メモをとりましょう.
    get要求なら、第三者のミドルウェアは不要です.コールバック関数でreq.queryはもちろんObjオブジェクトを得ることができます.POST要求の方式は、第三者のミドルウェアを導入して、body-parserはその後、body-parserインスタンス解析器をそれぞれのルートに追加する必要があります.つまり、ミドルウェアapp.use(bodyParser.urlencoded({ extended: false }))をマウントする必要があります.
    const express =  require('express');
    const app =  express();
    let bodyParser = require('body-parser')
    // parse application/x-www-form-urlencoded
    //          
    app.use(bodyParser.urlencoded({ extended: false }))
    // parse application/json
    //   JSON     
    app.use(bodyParser.json())
    
    //                    
    app.use(express.static('public'));
    //   get    
    app.get('/login',(req, res) => {
        let pdata = req.query;
        console.log(pdata);
        res.send("      !");
    })
    //     post  
    app.post('/login',(req, res) => {
        let pdata = req.body;
        console.log(pdata);
        res.send("    post  !");
    })
    app.listen(3000, () =>{
        console.log("Express---running....")
    })
    
    
    
    テンプレートエンジン
    Expressでは、art-templateテンプレートエンジンを使用すると、互換性が必要です.具体的な方法は以下の通りです.
    npm install --save art-template
    npm install --save express-art-template
    
    テンプレートエンジンのファイル位置を設定します.
    app.set('views', path.join(__dirname, 'views'));//         
    
    Expressと一緒に使う人気のあるテンプレートエンジンはPug、Mustache、EJSです.もちろんここで使っているのはアートです.
    app.set('view engine','art')     //         'art'          
    
    最後にres.renderを通します.OP 1はテンプレートに対応するファイル名op 2を表します.これはレンダリングデータです.
    const express = require('express');
    const path = require('path')
    const app = express();
    const template = require('art-template')
    app.set('views', path.join(__dirname, 'views'));   //          
    app.set('view engine','art')     //         'art'          
    app.engine('art', require('express-art-template'));  //  express  art-templatte    
    app.get('/list', (req, res) =>{
        let data = {
            title : '       art-tmplate    ',
            name : '             '
        }
        // render art-template     
        //    :                views           
        //    :       
        res.render("test",data);
    })
    app.listen(3000, () => {
        console.log("running....");
    })