手機(jī)站首頁散文詩歌雜文隨筆日記小小說

散文網(wǎng) » 生活 »日常 » nodejs下載模塊，解決跨域訪問cors或jsonp，bootstrap，多文件，附件上傳【詩書畫唱】

nodejs下載模塊，解決跨域訪問cors或jsonp，bootstrap，多文件，附件上傳【詩書畫唱】

2021-04-25 23:38 作者:詩書畫唱 0人讀過 | 我要投稿

這篇專欄的內(nèi)容還是挺重要與常用的，寫了幾乎7個小時，比做視頻還耗時，求多多三連！拜托讀者們了！

目錄：

解決跨域訪問的方式一：cors

解決跨域訪問的方式二：jsonp

jsonp的跨域訪問中的Ajax獲取數(shù)據(jù)時的url路徑不可以不寫callback=？，其中？會自動替換為function(data)函數(shù)。

個人理解：JSONP的跨域訪問中必須要記得用end的方法傳一個以JSON字符串為參數(shù)值的傳參的函數(shù)，不可以直接傳JSON字符串，不然會報錯，要傳”XXX(XXX)“格式的數(shù)據(jù)，后面前臺的Ajax獲取數(shù)據(jù)時，會用callback=？，把？自動轉(zhuǎn)化成function(data)函數(shù)，？是個函數(shù)，callback是為了獲取傳過來的函數(shù)的習(xí)慣上命名的參數(shù)。

npm?install?multer?-g【

的cmd方法：npm?install?模塊名?-g】

原始界面實(shí)現(xiàn)附件上傳（多文件上傳）

bootstrap實(shí)現(xiàn)附件上傳（多文件上傳）

【其實(shí)就是在原始界面上套模板】

講義

理解跨域訪問和同源訪問

綁定點(diǎn)擊事件的按鈕的Ajax的簡單例子的原創(chuàng)分析圖

教程視頻例子學(xué)習(xí)記錄

方法：多去邊創(chuàng)作視頻或?qū)懜柙~等等，邊原速等等地看教程視頻，遇到我認(rèn)為重要的就截圖記錄等等，有沒有聽懂的部分就重新跳到那個部分聽（一般戴耳機(jī)）。2件事同時做，會讓我更高效且感興趣和不會感到無聊。

解決跨域訪問的方式一：cors

CORS是一個W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。

它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

//serv.js

//引入http模塊

let?http?=?require('http');

//引入url模塊

let?url?=?require('url');

//創(chuàng)建一個后臺服務(wù)

http.createServer(function(req,res){

????//解決跨域訪問的方式一：cors

????res.setHeader("Access-Control-Allow-Origin",?"*");?

????res.setHeader("Access-Control-Allow-Headers",?"Content-Type");?

????//發(fā)送的數(shù)據(jù)的格式必須是一個JSON字符串，

????//如果發(fā)送的數(shù)據(jù)不是JSON字符串，那么這次調(diào)用就會失敗

????res.setHeader("content-type",?"application/json");

????//傳送數(shù)據(jù)到前臺頁面去

????res.end('{"act":"詩書畫唱","pwd":666}');

???

}).listen(8788);

console.log('訪問地址：http://127.0.0.1:8788');

http://127.0.0.1:8788/

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#btn').click(function(){

$.ajax({

url: 'http://127.0.0.1:8788',

type: 'POST',

success: function(data){

console.log("獲取的賬號和密碼的數(shù)據(jù)是："+data.act,data.pwd);

}

});

</script>

</head>

<body>

</body>

</html>

解決跨域訪問的方式二：jsonp

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。其核心思想是利用JS標(biāo)簽里面的跨域特性進(jìn)行跨域數(shù)據(jù)訪問，在JS標(biāo)簽里面存在的是一個跨域的URL，實(shí)際執(zhí)行的時候通過這個URL獲得一段字符串，這段返回的字符串必須是一個合法的JS調(diào)用，通過EVAL這個字符串來完成對獲得的數(shù)據(jù)的處理。

傳遞給請求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)

jsonp的跨域訪問中的Ajax獲取數(shù)據(jù)時的url路徑不可以不寫callback=？，其中？會自動替換為function(data)函數(shù)。

個人理解：JSONP的跨域訪問中必須要記得用end的方法傳一個以JSON字符串為參數(shù)值的傳參的函數(shù)，不可以直接傳JSON字符串，不然會報錯，要傳”XXX(XXX)“格式的數(shù)據(jù)，后面前臺的Ajax獲取數(shù)據(jù)時，會用callback=？，把？自動轉(zhuǎn)化成function(data)函數(shù)，？是個函數(shù)，callback是為了獲取傳過來的函數(shù)的習(xí)慣上命名的參數(shù)。

//serv.js

//引入http模塊

let?http?=?require('http');

//引入url模塊

let?url?=?require('url');

//創(chuàng)建一個后臺服務(wù)

http.createServer(function(req,res){

???

????//解決跨域訪問的方式二：jsonp

????//將url路徑中的所有參數(shù)放到ps對象中

????let?ps?=?url.parse(req.url,true).query;

????//獲取url路徑中callback參數(shù)的值

????let?cb?=?ps.callback;

????res.end(cb?+?'({"act":"詩書畫唱好帥","pwd":888})');

}).listen(8788);

console.log('訪問地址：http://127.0.0.1:8788');

聲明配置后就直接點(diǎn)啟動調(diào)用就有運(yùn)行結(jié)果，沒有配置就運(yùn)行前會讓你選擇一個配置，我們要選node.js的配置后才有效果

<!DOCTYPE html>

<html>

<head>

$(function(){

$('#btn').click(function(){

$.ajax({

url: 'http://127.0.0.1:8788?callback=?',

type: 'POST',

dataType: 'jsonp',//jsonp調(diào)用方式

success: function(data){

console.log("獲取的賬號和密碼的數(shù)據(jù)分別是："+data.act,data.pwd);

}

});

</script>

</head>

<body>

</body>

</html>

原始界面實(shí)現(xiàn)附件上傳（多文件上傳）

npm?install?multer?-g【下載模塊的cmd方法：npm?install?模塊名?-g】

//upload.js

let?express?=?require('express');

//引入附件上傳模塊

let?multer?=?require('multer');

let?app?=?express();

//中間件：對所有的請求都進(jìn)行跨域訪問設(shè)置處理

app.all('*',function(req,res,next){

????res.header("Access-Control-Allow-Credentials",?true);

????res.header("Access-Control-Allow-Origin",?"*");

????res.header("Access-Control-Allow-Headers",?"X-Requested-With");

????res.header("Access-Control-Allow-Methods",?"PUT,POST,GET,DELETE,OPTIONS");

????res.header("X-Powered-By",?'?3.2.1');

????res.header("Content-Type",?"application/json;charset=utf-8");

????//執(zhí)行下一個中間件

????next();

});

//附件上傳配置

let?upload?=?multer({

????storage:?multer.diskStorage({

????????//設(shè)置上傳以后的文件存在服務(wù)器的什么地方

????????//req就是請求對象

????????//file就是選中的文件

????????//cb回調(diào)函數(shù)

????????destination:?function(req,file,cb){

????????????//./指的是當(dāng)前文件所在的文件夾

????????????//./uploads表示上傳的附件保存在j190802/uploads文件夾下

????????????cb(null,'./uploads/');

????????},

????????//設(shè)置上傳到服務(wù)器上的文件名是什么

????????filename:?function(req,file,cb){

????????????//獲取選中的文件名

????????????let?originName?=?file.originalname;

????????????console.log('選中的文件名是：'?+?originName);

????????????//修改以后保存到服務(wù)器上的文件名

????????????let?newName?=?(new?Date().getTime())?

????????????????+?'-'?+?originName

????????????console.log('保存到服務(wù)器上的文件名是：'?+?newName);

????????????cb(null,newName);

????????}

????})

});

//選中頁面中name="logo"的標(biāo)簽進(jìn)行附件上傳

//總共上傳2個文件

app.post('/up',upload.array('logo',2),function(req,res){

????console.log('附件上傳');

????res.send({ret_code:?'0'});

});

app.listen(8888);

console.log('附件上傳路徑:http://127.0.0.1:8888/up')

<!DOCTYPE html>

<html>

<head>

*{

font-size: 50px;

}

</style>

</head>

<body>

<form action="http://127.0.0.1:8888/up" method="post"?

enctype="multipart/form-data">

<input type="submit" value="上傳" />?

</form>

</body>

</html>

bootstrap實(shí)現(xiàn)附件上傳（多文件上傳）

【其實(shí)就是在原始界面上套模板】

<!DOCTYPE html>

<html>

<head>

? ? ? ? $(function () {

? ? ? ? ? ? var control = $("#file-1");

? ? ? ? ? ? var uploadrul = "http://127.0.0.1:8888/up";

? ? ? ? ? ? control.fileinput({

? ? ? ? ? ? ? ? language: 'zh', //設(shè)置語言

? ? ? ? ? ? ? ? uploadUrl: uploadrul, //上傳的地址

? ? ? ? ? ? ? ? allowedFileExtensions: ['png','jpg','gif'],//接收的文件后綴

? ? ? ? ? ? ? ? showUpload: true, //顯示批量上傳按鈕

? ? ? ? ? ? ? ? showCaption: false,//是否顯示標(biāo)題

? ? ? ? ? ? ? ? browseClass: "btn btn-primary", //按鈕樣式? ? ?

? ? ? ? ? ? ? ? dropZoneEnabled: true,//是否顯示拖拽區(qū)域

? ? ? ? ? ? ? ? //minImageWidth: 50, //圖片的最小寬度

? ? ? ? ? ? ? ? //minImageHeight: 50,//圖片的最小高度

? ? ? ? ? ? ? ? //maxImageWidth: 1000,//圖片的最大寬度

? ? ? ? ? ? ? ? //maxImageHeight: 1000,//圖片的最大高度

? ? ? ? ? ? ? ? //maxFileSize: 0,//單位為kb，如果為0表示不限制文件大小

? ? ? ? ? ? ? ? //minFileCount: 0,

? ? ? ? ? ? ? ? maxFileCount: 100,

? ? ? ? ? ? ? ? enctype: 'multipart/form-data',

? ? ? ? ? ? ? ? validateInitialCount: true,

? ? ? ? ? ? ? ? previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

? ? ? ? ? ? ? ? msgFilesTooMany: "選擇上傳的文件數(shù)量({n}) 超過允許的最大數(shù)值{m}！",

? ? ? ? ? ? });

? ? ? ? ? ? //導(dǎo)入文件上傳完成之后的事件

? ? ? ? ? ? $("#file-1").on("fileuploaded", function (event, data, previewId, index) {

? ? ? ? ? ? console.log(data.response.ret_code);

? ? ? ? ? ? });

? ? ? ? });

? ? </script>

</head>

<body>

<form>

? ? ? ? ? ? <div>

? ? ? ? ? ? ? ? <div class="modal-header">

? ? ? ? ? ? ? ? ? ? <h4 class="modal-title" id="myModalLabel">請選擇圖片</h4>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? <div class="modal-body">

? ? ? ? ? ? ? ? ? ? <input type="file" name="logo" id="file-1" multiple class="file-loading" />

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? ? ? </form>

</body>

</html>

講義

一、跨域訪問

1、cors方式(設(shè)置相應(yīng)對象res)

2、jsonp方式（獲取callback參數(shù)，通過調(diào)用callback函數(shù)來傳遞數(shù)據(jù)）

"從http://localhost:8888/index.html頁面上請求一個ajax，ajax的路徑是

http://localhost:8080/demo/login"

協(xié)議或者Ip地址或者端口號或者項(xiàng)目名稱中只有一個不相同，那么這種調(diào)用方式就是跨域訪問

從http://localhost:8080/demo/login.jsp地址請求http://localhost:8080/demo/action/lg.action

，那么這種調(diào)用叫同源訪問

二、附件上傳

nodejs后臺，html頁面

理解跨域訪問和同源訪問

綁定點(diǎn)擊事件的按鈕的Ajax的簡單例子的原創(chuàng)分析圖

教程視頻例子學(xué)習(xí)記錄

這段代碼不可以少（這種附件上傳其實(shí)本質(zhì)和第一種一樣，不同的就是用了美化的界面

一般來說，JSON字符串外面是單引號，里面是雙引號，不這樣的話容易報錯，作用失效等等

標(biāo)簽：