資源文件請求

• 如果資源在一個頁面中, 這些資源文件會自動發(fā)送請求, 而且這些路徑默認和資源文件, 所在的路徑是一致的

• 當如果我們直接讀取對應的html頁面的時候,沒有加載其他的例如圖片以及css資源, 那么不會顯示對應的圖片以及css樣式

• 靜態(tài)資源請求的時候, 路徑一般不包含對應的static或者public

  • 通過對應的pathname作為讀取資源的路徑,注意這個pathname請求的時候, 一般不包含static,所以我們需要拼接

path包

• 通過對應的path來獲取對應的pathname的后綴名
  • var extName = path.extname(pathName);

require導包原理

• 原理
  • 當導入一個文件, 若此文件中是對應的代碼, 使用require導入相當于把對應的代碼, 導入到當前的文件中
• 執(zhí)行的過程

  1. 我們會把對應的代碼通過一個function的函數(shù)來拼接成一個字符串

  2. 然后使用eval函數(shù)執(zhí)行

      /*例如
      1. 當前我們會使用function(){拼接對應的console.log('hello world'),然后拼接}
      2. 形成function(){console.log('hello world')}這個一個字符串, 然后放入到eval函數(shù)中執(zhí)行*/
     

require文件查找原則

1. 當導入一個文件的時候, 如果不寫對應的路徑

   • 那么系統(tǒng)會默認去node_moduls這個文件夾
   • 下面去尋找和導入的文件同名的文件, 如果有這個文件就會加載
     • 例如: var fs = require('fs');

2. 當導入一個文件的時候, 如果不設置路徑和后綴名

   • 那么會去對應的node_modules下面找同名的文件(就是找foo.js).
   • 如果這個文件不存在, 會把這個文件當成一個文件夾, 找這個文件夾下對應的index.js文件加載.
     • 加載index.js文件的原因
       1. 一般在一個文件夾下面會有一個package.json文件
       2. 該文件表示當前的文件夾的配置文件, 這個配置中有一個main的字段
       3. 對應的value值決定了我們默認加載哪個文件

使用第三方包的過程

1. 使用cd命令進入到項目所在的目錄(window系統(tǒng)中的此命令不可以跨盤符)
2. 使用npm install + 包名, 下載對應的包
   • 如果對應的文件夾中沒有mode_modules這個文件夾, 系統(tǒng)會自動創(chuàng)建此文件夾, 然后把對應的包放在此文件夾下

exports使用

• 如果在一個文件中定義了變量和函數(shù)只能在這個文件內部使用
  • 把這個文件導入到其他的文件中, 里面的變量和函數(shù)是不能使用的
• 如果想要在外部使用, 方法如下
  • 通過exports.msg = msg;暴露把對應的變量和函數(shù)
  • 通過module.exports = People;暴露對應的類(構造函數(shù))

__dirname

• 當某個文件包導入別的文件中, 如果當前文件中有一些路徑的設置, 如果只是在當前文件, 這個路徑可以參考當前文件(b.js), 如果要是被導入到其他的文件中, 我們設置路徑的時候, 參考的文件是其他的文件(a.js)

• 報錯: No such file or directory, ...

• 解決: 讓路徑參考a.js, 但是如果當其層級結構非常深的時候, 所以可以利用__dirname來解決

  • __dirname: 它寫在上面地方, 就表示當前文件所在的目錄. 相當于用相對形式來表示絕對路徑.
    • 如, 當前在b.js中, 如果b.js的去路徑是c:/abc/1234/b.js, __dirname表示c:/abc/1234

處理對應的的post請求

    /*處理提交的數(shù)據(jù)
    * 一般提交的數(shù)據(jù)比較多, 如果數(shù)據(jù)都提交完成后處理
    * 有可能會阻塞程序運行
    * 為了避免阻塞,提高效率,一般把對應的數(shù)據(jù)拆分成不同各個小的部分
    * 然后當這些小的部分的數(shù)據(jù)過來以后,直接處理
    * 最后把這些小的數(shù)據(jù)拼接起來,形成我們最終的數(shù)據(jù)
    * 1.我們需要處理提交過來的各個部分,所以我們需要監(jiān)聽數(shù)據(jù)
    * 2.然后為我們還需要監(jiān)聽數(shù)據(jù)的完成,如果完成后,我們直接顯示數(shù)據(jù)
    * addListener:第一個參數(shù)表示監(jiān)聽的標識,一般是固定,第二個對應的回調
    * 回調中有傳遞過來的數(shù)據(jù)
    * */

    var http = require('http');
    var querystring = require('querystring');
    var server = http.createServer(function (req,res) {
    
        if(req.url=='/dopost' && req.method.toLowerCase() =='post'){
            var allString = '';
            req.addListener('data',function (chunk) {
                /*只有有數(shù)據(jù)傳遞過來,我們就需要對數(shù)據(jù)進行拼接
                * 我們可以設置一個字符串來拼接數(shù)據(jù)*/
                allString += chunk; 
            })
        
            /*2.監(jiān)聽數(shù)據(jù)完成*/
            req.addListener('end',function (err) {
                var allStringO = querystring.parse(allString)
        
                console.log(allStringO);    
            })
        }
    })
    server.listen(3000,'127.0.0.1');

formidable包使用

• 使用formidable包處理post請求

    /*1.創(chuàng)建表單*/
    var form = new formidable.IncomingForm();
  
    /*1.1我們在解析之前設置對應的上傳圖片的目錄*/
    form.uploadDir = "./uploads";
  
    /*2.使用表單解析對應的請求
    * parse中有兩個參數(shù),第一個參數(shù)表示對應的請求
    * 第二個參數(shù)表示回調,回調中有是三個參數(shù)
    * 第一個表示錯誤
    * 第二個fields:表示和域相關的東西,域就是凡是input就可以看做域
    * 第三個參數(shù)files:表示和文件相關的東西*/
    form.parse(req,function (err,fields,files) {
        if(err){
            console.log(err);
            return;
        }
        console.log(fields);
        console.log(files);
        console.log(files.tupian.path);
    })
  

silly-datetime包處理圖片唯一性

• 規(guī)則: 一般采用一個時間戳+一個隨機數(shù)字

    var http = require('http');
    var formidable = require('formidable');
    var sd = require('silly-datetime');
    var fs = require('fs');
    
    var server = http.createServer(function (req,res) {
    
        /*判斷路徑和請求方法,然后處理對應的請求數(shù)據(jù)*/
        if(req.url=='/dopost' && req.method.toLowerCase() =='post'){
            
            var form = new formidable.IncomingForm();
            form.uploadDir = "./uploads";
    
            /*實際開發(fā)中,需要根據(jù)我們自己的規(guī)則來給對應的圖片設置
            * 對應的名稱用以保證圖片的唯一性              
            * HH:如果是大寫表示對應的24小時
            * hh:表示12小時*/
            var newTime = sd.format(new Date(),'YYYYMMDDHHmmss');
            var randomNum = parseInt(Math.random()*89999+100000);
  
            form.parse(req,function (err,fields,files) {
    
                /*我們需要使用新的規(guī)則替換舊的路徑,所以我們需要獲取舊的的路徑
                 * 因為我們在使用新的路徑替換舊的路徑的時候,我們最好使用絕對路徑
                 * 所以我們獲取新的路徑和舊的路徑的時候,最好設置為絕對路徑
                 * 在解析路徑的時候,會把最后一個/之前的所有的東西都解析成路徑*/
                var oldPath = __dirname+'/'+files.tupian.path;
                var newPath = __dirname+'/uploads'+'/uploads'+newTime + randomNum+'.jpg';
    
                /*使用fs的rename方法來設置替換路徑
                * rename:第一個參數(shù)表示舊的路徑
                * 第二個參數(shù)表示新的路徑,
                * 第三個參數(shù)表示回調*/
                fs.rename(oldPath,newPath,function (err) {
                    if(err){
                        console.log(err);       
                        return;
                    }       
                })      
            })      
            res.end();      
        }       
    })
    server.listen(3000,'127.0.0.1');
  

后端模板的渲染過程

• 過程
  • 當對應的前端發(fā)送請求的時候,我們接受到請求
  • 然后在后端把對應的頁面使用數(shù)據(jù)渲染完成,然后發(fā)送給前端

• 使用后端渲染EJS模板
  1. 設置模板
     • 一般是一個字符串. 我們設置這個字符串的時候一般會把對應的變量以及當前程序無法識別的東西放置在一個<%%>中間
     • 變量: <%= a%>
  2. 設置數(shù)據(jù)
     • 一般是一個字典
  3. 使用數(shù)據(jù)渲染模板
     • ejs.render(模板,數(shù)據(jù))