【nodejs】expressフレーム(一)expressの使用及びexpress.staticの使用に加えて、サーバーパス問題とブラウザ解析過程を解決します.

23560 ワード

nodejs express static パス解析

expressの基本使用
npm init/作成管理文書npm i express-S/-Sは、生産環境下でも使用するカバンを表しています.

var express = require('express');//  express     
var app = express();//  express  

app.get('/', function(req, res){
     //  get   '/'  
    res.send('ok')//       'ok'   
})

app.listen(8080, function(){
     //  8080  ，
    console.log('http://localhost:8080');
})

簡単ではないですか?最初の開拓を始めます.
express.static(root,［options］)
簡単な紹介:expressのstatic静的な方法は、css、img、js、fontなどのファイルの要求を管理するために用いられます.nodejsは他のサーバと違って、デフォルトではファイルを読み込んでクライアントに伝える機能がないので、この方法が必要です.使用:

                app.js                   
app.use(express.static('./')) 
                  app.js  views        、  、      
app.use(express.static('views'))
app.use(express.static('./views'))//root        /     
       ，   '/'   ，               ，

例を挙げます

  ：app.use(express.static('./'))
  ：http://localhost:8080/index.html ，  app.js         index.html,        
  ：app.use(express.static('views'))
  ：http://localhost:8080/index.html ，  app.js       'views'   index.html,        
      http://localhost:8080/index.html     http://localhost:8080/views/index.html

css、img、js、fontなどのファイルに対しても例外ではありません.index.の中で一つのcssファイルの第二の例がリンクされている場合:

//index.html  
<link rel="stylesheet" href="/index.css" />//  static       ，  'index.css','/index.css','./index.css'  
//app.js  
app.use(express.static('./'))

  ：http://localhost:8080/index.html 
//  ：     app.js    ./     index.html,        
//      HTML  ，  DOM 
//       lnik   html   ，        'index.css'
//           
//    app.js    ./     index.css,        ，        ，
//      js  ,link   css              dom  ，         
（  css   dom   ）
（       js  ，    js  ，   js  ， js   dom  ）
（        ）
//    html     dom 
//dom  css     ，      
//      Layout  ，

どうやって他の知識点が関連していると思いますか?大丈夫です.知識点を繋げることが重要です.
次は最初の開拓の注意点です.多くの場合、linkの中でhref="を埋める相対パスと絶対パスは要求の差があります.
直接例:

/views/index.html  

<link rel="stylesheet" href="./index.css" />


/index.css  



/app.js  

app.use(express.static(./'))

//      css  ，    

//  http://localhost:8080/views/index.html   index.html ，  app.js      views   ，          index.html  

//         url http://localhost:8080/views/index.html,              index.css

//  link href="./index.css"   './index.css'        url，     url  
http://localhost:8080/views/index.css

//http://localhost:8080/views/index.css  express.static(./')  './'     http://localhost:8080/views/index.css

//            index.css  ，    http://localhost:8080/index.css ，       

//         index.css   ，   link href      '/index.css'

//             http://localhost:8080/index.css，       ，             url

第二の例:

/views/index.html  
<link rel="stylesheet" href="../public/css/index.css" />

/public/css/index.css  

/app.js  
app.use(express.static('views'))


//  http://localhost:8080/index.html

//     index.html，   index.css  

//  http://localhost:8080/index.html +../public/css/index.css http://localhost:8080/public/css/index.css

//http://localhost:8080/public/css/index.css   ./views   http://localhost:8080/views/public/css/index.css

//     ，      './views'    views      
//

もし上のディレクトリ構造のindex.がindex.cssにアクセスできるようにしたいなら、3番目の例を見てください.

/views/index.html  
<link rel="stylesheet" href="/css/index.css" />

/public/css/index.css  

/app.js  
app.use(express.static('views'))
app.use(express.static('public'))
//      express.static，                       ，     404

//        

//  http://localhost:8080/index.html

//http://localhost:8080/index.html + views  http://localhost:8080/views/index.html    index.html

//    index.css //http://localhost:8080/index.html+"/css/index.css" +'views'   http://localhost:8080/views/index.css     

//      ，          

//http://localhost:8080/index.html+"/css/index.css" +'public'   http://localhost:8080/public/index.css

// index.css    ，

全体的には、静的ファイルのsrcとhrefは絶対パスを使った方がよく、絶対パスを使った後、htmlファイルをどこに置いてもアクセスできます.
しかし、問題はまた来ました.これまではプロジェクトのルートディレクトリでコマンドラインで実行していたap.jsを通じて、view/のコマンドラインを開けてから、nodeを命令します.
元々はexpress.staticのルートディレクトリはコマンドラインのワークディレクトリに基づいています.つまり、この時にお願いします.http://localhost:8080/index.html加えたapp.use(express.static)の経路は「views」ではなく、コマンドラインのワークディレクトリの下のviewsディレクトリ、つまり/view/viewsというディレクトリに基づいています.このカタログにはもちろんhtmlファイルがありません.
この構造で正常にアクセスしたいなら、express.staticをexpress.static('/')、express.static(')、express.staticをexpress.staticに変更すればいいですが、このように変更するのは面倒ですか?この時、私たちは最初に話したのがexpress.static()に絶対パスを入れるとシステムの絶対パスで静止ファイルディレクトリを確定します.
アプリ.jsのあるディレクトリの絶対パスを取得できる方法がありますか?
nodejsには二つの変数があります.一つは_u u u u udirname、一つは_uです.filenameは、前者はファイルのあるディレクトリの絶対パスを表し、後者はファイル自体の絶対パスを表します.もしひゅうをdirname+'views'はexpress.static()に入れると、固定された静的ファイルのパスがあり、コマンドラインの作業ディレクトリの影響を受けません.

let path = require('path')//  path.join    url   
app.use(express.static(path.join(__dirname, 'views')))
app.use(express.static(path.join(__dirname, 'public')))

この際に訪問するhttp://localhost:8080/index.htmlすべて成功することができますが、この時また問題が来ました.cssファイルを要求するたびにviewとpublicファイルを探しに行きます.サーバーの資源を浪費しました.どのような方法でページファイルをviewディレクトリの下に探しに行きますか?cssファイルをpublicに探しに行きます.これはap.use方法を探します.app.use('/abc')方法の意味は、'/abc'で始まるurl要求は全てこの中間部品を通ります.もし設定されていないなら、すべての要求はuse方法を通ります.このように設定します.

app.use('/views',express.static(path.join(__dirname, 'views')))
app.use('/public',express.static(path.join(__dirname, 'public')))

最初の/viewsを表すurlはviewファイルの下で最初の/publicのurlを探してpublicファイルの下で検索します.
この時やっと問題がなくなった.
二つ目の展開を開始します.express.staticの中のoptionです.
optionは、オブジェクトとしてexpress.staticに伝えられます.例えば、ap.use('/public'、express.static(path.join)、{dotfiles:'allow'))
各オプションについて説明します.

dotfiles：             
“allow” -  dotfiles      ，    。
“deny” -          ，  403，    next()        。
  “ignore” -   dotfile     ，  404，    next()        。

etag：
      HTTP   ETag              ，        ，      “304 Not Modified”  ，             ，           。
  true:  。
false：

extensions：
         ：       ，                        。
  ：['html', 'htm']。    html     /views/a.asd，               /views/index.html  
  false:      
['htm', 'html']：                   htm  html

fallthrough:           
false:      
  true:

immutable：
immutable Cache-Control            。
    ，maxAge            。
 immutable             maxAge              ，          
true：                   ，  maxAge                   ，         
  false:

index:           。
  'index.html':        ，    index.html  
false:

lastModified:
                Last-Modified  
  true:  
false:

maxAge：  Cache-Control   max-age  ，             
         ，

redirect：        ，      “/”（      ，        ）
  true：  
false：

setHeaders：     
function (res, path, stat) {
     
    res.set('x-timestamp', Date.now())
  }
  
res，    。
path，         。
stat，          。

JSP中国語の文字化けのいくつかの解決方法