前端與nodeJS的那些事

1.模塊系統(tǒng)

對比:

原網(wǎng)頁 新網(wǎng)頁
前端 require.js define定義模塊
node.js reueire.js exports定義模塊

Demo:

//原網(wǎng)頁中模塊化開發(fā)的寫法;
    require("./3.2search.js").search(req,res,connection);

//新網(wǎng)頁中模塊化開發(fā)的寫法
    function search(req,res,connection){
        var value = req.body.value;  //獲取Post請求發(fā)送過來的參數(shù);
         //console.log('SELECT * FROM user where username="'+value+'"') //用這種打印方法判斷輸入的SQL命令是否正確;
        //連接數(shù)據(jù)庫并返回數(shù)據(jù);
        connection.query('SELECT * FROM user where username="'+value+'"', function(error, results, fields) {
            if(error) throw error;
            //results =>array類型
            res.send(JSON.stringify(results));
        });
        //connection.end();
}
exports.search =search;

//詳見3.2express中post請求;

2.node.js

創(chuàng)建服務(wù)器

http.createServer

//引入http內(nèi)置模塊
var http = require("http");
http.createServer(function(request,response){
    //設(shè)置響應(yīng)頭;
    response.setHeader("Access-Control-Allow-Origin","*");
    //返回結(jié)果 
    //注意:結(jié)果值必須是字符串;否則轉(zhuǎn)成JSON.stringify(data) 或者 拼接('"'+data+'"')
    response.end("Hello World");  //=>JSON.stringify(data)
}).listen(12345)
//端口號有范圍限制0~65535

注意點：

1.http.createServer (代替了php+apache)

2.創(chuàng)建的服務(wù)器是指向xxx.js執(zhí)行后的域名和端口號;請求的地址要填寫服務(wù)器地址;

Demo

----提取前端發(fā)來的參數(shù);
get請求:接收傳遞過來的參數(shù)

/*前端傳遞
    data:{type:post,name:heightzhang},
    dataType:'json'*/
//創(chuàng)建服務(wù)器
var http = require("http");
//引入url模塊
var url =require('url');
//=>引入querystring模塊處理參數(shù)(作用:將url參數(shù)轉(zhuǎn)為對象);
var querystring = require('querystring') //將傳遞過來的type=post&name=heightzhang 參數(shù)轉(zhuǎn)成對象;
http.createServer(function(request,response){
    //設(shè)置響應(yīng)頭;
    response.setHeader("Access-Control-Allow-Origin","*");

    //處理傳遞過來的參數(shù)并且打印出來
    var paramStr  = url.parse(request.url).query; //console.log(request.url)=>/?type=post&name=heightzhang
    //console.log(url.parse(request.url))//url.parse方法后,有query哈希值屬性,也有path路由屬性;
    
    //consle.log(paramStr)=>type=post&&name=heightzhang;
    var param = querystring.parse(paramStr);//console.log(param)=>{type:post,name:heightzhang}

    response.end(JSON.stringify(param))

}).listen(12345)

post請求:接收傳遞過來的參數(shù);

//創(chuàng)建服務(wù)器
var http = require("http");
/*前端傳遞
    data:{type:post,name:heightzhang},
    dataType:'json'*/
//=>引入querystring模塊處理參數(shù)(將url參數(shù)轉(zhuǎn)為對象);
var querystring = require('querystring') //將傳遞過來的type=post&name=heightzhang 參數(shù)轉(zhuǎn)成對象;
http.createServer(function(request,response){
    //設(shè)置響應(yīng)頭;
    response.setHeader("Access-Control-Allow-Origin","*");

    //接收傳遞過來的參數(shù);
    var post ="";
    request.on("data",function(msg){//data是固定的;
                      //msg為Buffer值;
        post += msg;  //console.log(post);=>type=post&name=heightzhang 
        post = querystring.parse(post);//console.log(post)=>{type:post,name:heightzhang}
        
    });
    
    request.on('end',function(){
         //請求結(jié)束后響應(yīng)頭返回前端,返回前端值為:{type:post,name:heightzhang} 
        response.end(JSON.stringify(post))
    });
}).listen(12345)

<b><span style="color: red">注意</span>
傳遞給前端

只支持字符串,如果是變量,要先用JSON.stringify轉(zhuǎn)換</b>

表格對比 PHP與node.js

角度 php nodejs
- - -
解析引擎 Apache解析 Node(V8)解析
服務(wù)器創(chuàng)建 Apache創(chuàng)建 http.createServer創(chuàng)建
- - -
AJAX.cros
服務(wù)端設(shè)置響應(yīng)頭		 header("Access-Control-Allow-Origin:*"); response.setHeader("Access-Control-Allow-Origin","*")
輸出給前端的結(jié)果值 echo xxx response.end("xxx")
- - -
提取GET請求的參數(shù) $_GET["xxx"] 引入兩個模塊:url&&querystring
var paramStr = url.parse(request.url).query;
var param = querystring.parse(paramStr);
提取POST請求的參數(shù) $_POST["xxx"] 引入一個模塊:querystring+request.on語法

3.Mysql數(shù)據(jù)庫

//引入數(shù)據(jù)庫模塊
var mysql = require("mysql");
//配置數(shù)據(jù)庫的連接
var connection = mysql.createConnection({
    host:"localhost",
    user:"root",
    password:"",
    database:"login" //數(shù)據(jù)庫地址;
});
//進行數(shù)據(jù)庫連接
connection.connect();
//執(zhí)行sql語句 
connection.query('SELECT username FROM user',function(error,results,fields){
    if(error) throw error;
    console.log('The solution is: ',results);
});
//關(guān)閉數(shù)據(jù)庫鏈接
connection.end();

<b><span style="color: red">注意</span>
執(zhí)行命令中

拼接:如果是變量,要加雙引號,數(shù)字不用;</b>

4.Express

1)創(chuàng)建服務(wù)器

    //使用express模塊
var express = require('express');
var app =express();

//不能直接輸出結(jié)果,輸出結(jié)果要借助app.GET/POST/ALL方法輸出;

var server =app.listen(8081,function(){
    var host = server.address().address;
    var port = server.address().port;
    //console.log(port) port 為端口名稱;
}); //該代碼塊 等同于 app.listen(8081);

2)GET請求處理參數(shù)

//引入express模塊
var express = require('express');
var app =express();
// ------------get請求-------------------
app.get('/',function(req,res){
    獲取get請求發(fā)送過來的參數(shù); 
    //設(shè)置響應(yīng)頭;
    res.append("Access-Control-Allow-Origin","*");

    //請求頭返回給前端
    var abc =req.query  //console.log(req.query)=>{name:heightzhang}
    res.send(abc) //可以直接返回變量(數(shù)組或?qū)ο?,不需要像原生一樣JSON.stringify;
    
});
var server =app.listen(8081,function(){
    var host = server.address().address;
    var port = server.address().port;
    //console.log(port) port 為端口名稱;
});

3)POST請求處理參數(shù)

/*前端data:{name:"heightzhang"}*/
//引入express模塊
var express = require('express');
var app =express();
//引入bodyParser模塊,處理post參數(shù)
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));

// ---------post請求---------------------
app.post('/',function(req,res){
    //設(shè)置響應(yīng)頭;
    res.append("Access-Control-Allow-Origin","*");

    //響應(yīng)頭返回給前端;
    var post = req.body;//console.log(req.query)=>{name:heightzhang}
    res.send(post)
});
var server =app.listen(8081,function(){
    var host = server.address().address;
    var port = server.address().port;
    //console.log(port) port 為端口名稱;
});

4)混合寫法All請求處理參數(shù)

//引入express模塊
var express = require('express');
var app =express();
//引入bodyParser模塊,處理post參數(shù)
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));

// ---------all請求---------------------
app.all('/',function(req,res){
    //設(shè)置響應(yīng)頭;
    res.append("Access-Control-Allow-Origin","*");

    //console.log(req.query) =>請求頭數(shù)據(jù) get參數(shù) 
    //console.log(req.body)=>響應(yīng)頭數(shù)據(jù) post參數(shù)

    //響應(yīng)頭返回給前端; //獲取post請求參數(shù)
    res.send(post)

});
var server =app.listen(8081,function(){
    var host = server.address().address;
    var port = server.address().port;
    //console.log(port) port 為端口名稱;
});

5)總結(jié)

- 模塊
get 無
post bodyParser

表格對比 nodejs 與express

nodejs express
創(chuàng)建服務(wù)器 http.createServer app.listen
AJAX.cros服務(wù)端設(shè)置響應(yīng)頭 response.setHeader("Access-Control-Allow-Origin","*") res.append("Access-Control-Allow-Origin","*");
提取GET請求的參數(shù) url.parse.query&&querystring req.query
提取POST請求的參數(shù) querystring&&request.on語法 bodyParser&&req.body
輸出給前端的結(jié)果值 response.end(不支持變量) res.send(支持變量)

5.Node.js服務(wù)器代理(http.request)

第一種:http.request({});

//node代理PHP服務(wù)器;
 var http = require("http");

//理解:相當(dāng)于nodejs向php發(fā)送了"ajax請求",用http.request方法;
//http://localhost/three/test.php =>PHP的服務(wù)器地址;
http.request({
    hostname: 'localhost',
    port: '80',
    path: '/three/test.php?name=heightzhang',
    method: 'GET'
}, function(res) {
    res.setEncoding('utf8');
    var data = "";
    res.on('data', function(chunk){
        data += chunk
    });
    res.on('end', function(){
        //接收連接服務(wù)器后返回的數(shù)據(jù)
        console.log(data);
    });
}).on('error', function(e) {
    console.log('problem with request: ' + e.message);
}).end();

第二種:http.get 用的比較多;

var https = require("https");
exports.fetch = function(url, callback) {
    https.get(url, function(res) {
        var data = "";
        res.on('data', function(chunk) {
            data += chunk
        })
        res.on('end', function() {
            callback(data)
        })
    })
}

項目:nodejs的優(yōu)化層;

var express = require('express');
var http = require("http");
var fs = require("fs")

var app = express();

//boydy模塊接收傳遞過來的post值;
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));


//中間層
app.all('/', function(req, res) {
    //設(shè)置請求頭;
    res.append("Access-Control-Allow-Origin","*");  
    //接收post請求發(fā)送過來的參數(shù);
    var username = req.body.username;
    var password =req.body.password;

    //一 nodejs專門寫文件 記錄日志;支持HTML標(biāo)簽;
    fs.readFile("log.txt", function(err, data) {
            //data.toString() 文件值;
            //console.log(req.query.name); req.query.name 為 laoxie;
            var content = data.toString() + '用戶名:'+username + "   ";
            fs.writeFile("log.txt", content, function(err) {
            })
    });
//二 -------- 通信php 相當(dāng)于node發(fā)送AJAX請求給PHP;---------------
    //php專門存數(shù)據(jù)庫
    http.request({
    //http://localhost/exam/api/register.php
    hostname: 'localhost',
    port: '80',
    path: '/exam/api/register.php?username='+username+'&password='+password,
    method: 'GET'
    }, function(rea) {
        rea.setEncoding('utf8');
        var data = "";
        rea.on('data', function(chunk){//rea.on不是post請求的內(nèi)容嗎?也可以設(shè)為php傳回來的參數(shù)嗎
            data += chunk;  
        });
        rea.on('end', function(){   
            //php返回的值data  res.send=>將nodejs中的data返回給前端;
            //注意 :http.request請求中的rea同all中的res不是同一個值;
            //傳遞post請求參數(shù)給php; 服務(wù)器與服務(wù)器中一般用get請求;
            console.log(data);res.send(data);
        });
        
    }).on('error', function(e) {
        console.log('problem with request: ' + e.message);
    }).end();
//-----------------------------------------------------------------
    //res.send("1111");
    
})
app.listen(10086)

原理圖:

[圖片上傳失敗...(image-d857e0-1524822238442)]

6.爬蟲=>數(shù)據(jù)庫=>下載

/*爬蟲的關(guān)鍵模塊是cheerion模塊
    爬蟲的目的:寫入數(shù)據(jù)庫; 下載內(nèi)容;
*/
var http =require("http");
//nodejs版本里面的JQ
var cheerio = require("cheerio");
//連接數(shù)據(jù)庫
var mysql = require("mysql");
//文件系統(tǒng)
var fs = require("fs");

var connection = mysql.createConnection({
    host:"localhost",
    user:"root",
    password:"",
    database:"login"
});
connection.connect();

http.get("http://www.mzitu.com/zipai/comment-page-1/",function(res){
    var data = "";
    res.on("data",function(chunk){
        data += chunk
    });
    res.on("end",function(){
        //console.log(data);拿到數(shù)據(jù);
        //將數(shù)據(jù)寫入cheerio后進行爬蟲處理

        var $ = cheerio.load(data);
        var imgArr = [];
        $('img').each(function(index,ele){
            //爬蟲后獲得的數(shù)據(jù)如下
            //console.log($(ele).attr("src"));
            //1.爬蟲后寫入數(shù)據(jù)庫;
            // connection.query('INSERT INTO `text`(`name`, `url`) VALUES ("' + index + '","' + $(ele).attr("src") + '")', function(error, results, fields) {
            //  if(error) throw error;
            //  console.log('The solution is: ', results);
            // });
            imgArr.push($(ele).attr("src"));
        });
        //2.爬蟲后下載內(nèi)容
        download(imgArr);
    })

});
var i = 0; //問題:i 的放置問題,為什么down()執(zhí)行在var i =0 的上方依然可以讀取到值?
            //不是應(yīng)該打印出來變量聲明提前,underfine的嗎;
//封裝下載函數(shù)(下載多張)
function download(imgArr){
    var length = imgArr.length;
    //重新命名;
    var writerStream = fs.createWriteStream("../img/"+i+".jpg");
    //讀取遠(yuǎn)程地址的圖片,并復(fù)制到本地;
    http.get(imgArr[i],function(res){
        //res為讀取流 , 通過管道 將 讀取流 寫入 寫入流;
        res.pipe(writerStream);
        //遞歸 寫完第一個圖片后再下載第二張;
        if(i<length){
            i++;
            console.log("完成第"+i+"/"+length+"張");
            download(imgArr);
        }else{
            return;
        }
    })
};

7.文件系統(tǒng)

讀寫流

//引入文件系統(tǒng)模塊;
var fs = require("fs");
//讀取流,讀取任意文件;
var readerStream = fs.createReadStream('../img/11.jpg');
// 寫入流,創(chuàng)建新文件,自動生成;
var writerStream = fs. createWriteStream('5.2writerStream.txt');

//讀取的文件復(fù)制給寫入的文件里面(可以是流(視頻,圖片),字符串);
readerStream.pipe(writerStream);console.log(readerStream)

緩沖流

1)讀取文件

var fs = require("fs");//文件系統(tǒng)

fs.readFile("5.4test.txt",function(err,data){
    //console.log(data) =>緩沖流Buffer 64 64 61 66 66 61

    //toString() => 把緩沖流(數(shù)據(jù))轉(zhuǎn)化為字符串
    console.log(data.toString())
})//異步

2)寫入文件

var fs = require("fs");//文件系統(tǒng)
    var content = `12345`   //預(yù)定義該文件的內(nèi)容;支持HTML標(biāo)簽;
    //自動創(chuàng)建新文件并且寫入,
    fs.writeFile("5.5test.txt",content,function(err){將content寫入該文件

    })

<span style="color: red">讀寫流是分一部分一部分地寫，緩沖流是一次性寫入，所以在處理大型文件的時候一般用讀寫流的形式讀或者寫</span>

上傳圖片

引入multer模塊;

//引入express框架
var express = require("express");
var app = express();
app.listen(3200);

var multer = require('multer');

var storage = multer.diskStorage({
    //設(shè)置上傳后文件路徑，uploads文件夾需要手動創(chuàng)建。
    destination: function(req, file, cb) {
        cb(null, './uploads')
    },
    //給上傳文件重命名
    filename: function(req, file, cb) {
        var fileFormat = (file.originalname).split(".");
        //圖片命名規(guī)則:name名+時間戳(防止重命名)+后綴名;
        //注意:file.fieldname為input files html標(biāo)簽的name名;
        //比如把 abc.jpg圖片切割為數(shù)組[abc,jpg],然后用數(shù)組長度-1來獲取后綴名
        cb(null, file.fieldname+ '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
    }
});
var upload = multer({
    storage: storage
});

//單圖上傳
//app.post('/upload-single', upload.single('logo'), function(req, res, next) {
//多圖上傳
app.post('/upload-single', upload.any(), function(req, res, next) { 
    res.append("Access-Control-Allow-Origin","*");
    res.send({
        wscats_code: '0'
    });
});

html部分

$.ajax({
                url: 'http://localhost:3200/upload-single',
                type: 'POST',
                cache: false, //不必須
                data: new FormData($('#uploadForm')[0]),
                processData: false,
                contentType: false,
                success: function(data) {
                    console.log(data)
                }
            })
        }
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • https://nodejs.org/api/documentation.html 工具模塊 Assert 測試 ...
    KeKeMars閱讀 6,597評論 0贊 6
  • Node.js是目前非?；馃岬募夹g(shù)，但是它的誕生經(jīng)歷卻很奇特。 眾所周知，在Netscape設(shè)計出JavaScri...
    w_zhuan閱讀 3,720評論 2贊 41
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,506評論 19贊 139
  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)（Q/GDW）- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿：20170802 前言： 排版 ...
    庭說閱讀 12,302評論 6贊 13
  • 資產(chǎn)負(fù)債表：資產(chǎn)即為公司所擁有的錢和物，包括投資理財?shù)腻X等。而負(fù)債是指公司欠人家的錢。 所有者權(quán)益=資產(chǎn)-負(fù)債，這...
    w小郭閱讀 150評論 0贊 0

友情鏈接更多精彩內(nèi)容