12.SE6+NOde 服務操做Map 增刪改查

 

 

ES6 第四次

實戰 MAP Set

實戰增刪改查

------------------------------------

//Map 轉數組 and 數組轉Map

const m = new Map([['x',1],['y',2],['z',3]]);

let s = [...m];//轉數組 轉完後是一個二維數組

//若是要轉回來

let m1 = new Map([...m]);//數組轉 Map

------------------------------------

//Map 轉對象

const m = new Map([['x',1],['y',2],['z',3],['a',4]]);

let obj = {};//聲明一個對象

for(let[k,v] of m){//遍歷
obj[k]=v;
}
console.log(obj);
//obj

//for of 遍歷數據結構

//for in 是遍歷對象 若是遍歷數組 拿到的是索引

------------------------------------

let obj1 = {'x':1,'y':2}
for(let a in obj1){
console.log(a);
}

x y

------------------------------------

prommise （本例子操做的全是Map）

//構造函數

處理 異步執行 異步優化

測試瀏覽器是否支持：

new Promise(function(){});
console.log("ok");//不報錯就證實支持

new Promise(function(resolive,reject));

//若是兩個請求 由於是異步 可能後面那個會先執行 能夠用 Promise

鏈式寫法 then 串行

要裝：server-static

npm install server-static

http://localhost:3000/

 

const getJSON = function(url,type, data) {
const promise = new Promise(function(resolve, reject){//一個是成功以後的 一個是失敗以後的
const handler = function() {
if (this.readyState !== 4) {
return;
};
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
cons

 

------------------------------------

貼上一個demo

 

//getJson 是對XMLHttprequest 對象的封裝，用於發出一個針對JSon 的數據的HTTP請求，而且返回一個Promise對象
////promise 函數的做用是將Promise 對象的狀態從「未完成」變成「成功」（即便pending辦成resolver），在異步操做成功時調用，將異步操做的結果，做爲參數傳遞出去；
/////reject函數的做用是，將prmies對象的狀態從 未完成 變成 失敗 （即從pending 變成 rejected）,在異步操做失敗時調用，並將異步操做
const getJSON = function(url,type, data) {//地址 類型 數據
const promise = new Promise(function(resolve, reject){////一個是成功以後的 一個是失敗以後的
const handler = function() {
if (this.readyState !== 4) {//XHR的狀態 從0-4發生變化 0請求未初始化，1服務器已經鏈接 2請求已經接受 3請求處理中 4請求完成 響應就緒
return;
};
if (this.status === 200) {
resolve(this.response);//成功
} else {
reject(new Error(this.statusText));//失敗
}
};
const client = new XMLHttpRequest();
client.open(type, url);
client.onreadystatechange = handler;
client.responseType = "json";
if(type =='get'){
client.send();
}else {
client.setRequestHeader("Content-Type", "application/json");
client.send(JSON.stringify(data));
}
});
return promise;
};


$(function() {
//添加留言 A
$(".submit").click(() => {
submit(true);//添加和修改同一個方法 參數不同
});
//修改留言
$(".update").click(()=>{
submit(false);//添加和修改同一個方法 參數不一
});
//刪除留言
$(".deleteAll").click(() => {
getJSON("/map/delAll",'delete')
.then(function(json) {
$(".messageList").html('所有數據已經清除');
}, function(error) {
console.error('出錯了', error);
});

});
//查看留言
$(".viewMes").click(()=> listShow());
//提交 A
let submit = (isAdd) =>{//isAdd 若是ture 添加 若是false 就是修改
let _name = $(".name").val(),
_message = $(".message").val();
if(_name =='' || _message =='') {
alert('請輸入信息！');
return false;
}
$(".name,.message").val("");
isAdd ? add(_name, _message) : upd(_name, _message);
};
//添加數據
let add = (name, message) => {
getJSON("/map/add",'post', {name: name, message: message})
.then(function(json) {//成功
listShow();//列表顯示
}, function(error) {//失敗
console.error('出錯了', error);
});
};
//刪除數據
let del = (name) =>{
getJSON("/map/del",'delete', {name:name})
.then(function(json) {
listShow();
}, function(error) {
console.error('出錯了', error);
});
};
//編輯數據
let upd = (name, message) =>{
getJSON("/map/upd",'put', {name: name, message: message})
.then(function(json) {
$("#inputEmail3").attr('disabled',false);
listShow();
}, function(error) {
console.error('出錯了', error);
});
};
//綁定將來元素 綁定動態數據的事件
$(".messageList").on('click', '.del', (e)=>{
del($(e.target).attr('name'));
});
$(".messageList").on('click', '.upd', (e) =>{///修改
let value = $(e.target).val();
$("#inputEmail3").attr('disabled',true);
$(".name").val(value.split(',')[0]);
$(".message").val(value.split(',')[1]);
});
//列表顯示
let listShow = () => {
//原生promise
getJSON("/map/get",'get').then(function(d) {
_showList(d);
}, function(error) {
console.error('出錯了', error);
});
};

let _showList = (d) =>{//渲染數據 傳的是返回的 data
let list = $(".messageList"),str = "";
for (let i=0; i<d.length; i++) {
str += `<li class="list-group-item"><span class="key">${d[i].key}</span><span>說：</span><span class="value">${d[i].value}</span>
<span style="float:right;"><button class="del" name="${d[i].key}">刪除</button>
<button class="upd" value="${d[i].key},${d[i].value}">更新</button></span></li>`;
}
list.html(str);
};
})

 

------------------------------------

 

/**
Simple Server for web api test.
*/
/**Connect是一個node中間件（middleware）框架。
若是把一個http處理過程比做是污水處理，中間件就像是一層層的過濾網。
每一箇中間件在http處理過程當中經過改寫request或（和）response的數據、狀態，實現了特定的功能。
中間件就是相似於一個過濾器的東西，在客戶端和應用程序之間的一個處理請求和響應的的方法。*/

var connect = require('connect'); //建立鏈接
var bodyParser = require('body-parser'); //body解析
var serveStatic = require('serve-static'); //目錄訪問（靜態文件訪問）
let map = new Map();//聲明 Map 對象

var data={//返回狀態模板
"code": "200",
"msg": "success"
};

function strMapToObj(strMap) {
let arr = [];
for (let [k,v] of strMap) {
let obj = {};
obj.key = k;
obj.value = v;
arr.push(obj);
}
return arr;
};

function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
};
var app = connect()
.use(bodyParser.json()) //JSON解析
.use(bodyParser.urlencoded({extended: true}))
.use(serveStatic(__dirname))
//use()方法還有一個可選的路徑字符串，對傳入請求的URL的開始匹配。
//use方法來維護一箇中間件隊列
.use(function (req, res, next) {
//跨域處理
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*'); //容許任何源
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); //容許任何方法
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token'); //容許任何類型
res.writeHead(200, {"Content-Type": "text/plain;charset=utf-8"}); //utf-8轉碼
next(); //next 方法就是一個遞歸調用
})
.use('/map/add', function(req, res, next) {//添加
console.log(req.body.name);
//console.log(req.originalUrl, req.url);
map.set(req.body.name, req.body.message);//操做Map 添加
res.end(JSON.stringify(data));//返回
next();
})
.use('/map/upd', function(req, res, next) {//修改
console.log(req.body.name);
//console.log(req.originalUrl, req.url);
if (map.has(req.body.name)) {//若是這個key是map對象的
map.set(req.body.name, req.body.message);//MAP 修改
}
res.end(JSON.stringify(data));//返回
next();
})
.use('/map/get', function(req, res, next) {//獲取列表
console.log(strMapToJson(map));
res.end(strMapToJson(map));//直接返回整個Map strMapToJson(map) 轉JjSon
next();
})
.use('/map/del', function(req, res, next) {//單個刪除
console.log(req.body);
if(map.has(req.body.name)) {//判斷要刪的存不存在
map.delete(req.body.name);//刪除
}
res.end(JSON.stringify(data));//返回
next();
})
.use('/map/delAll', function(req, res, next) {//所有刪除
map.clear();//所有刪除
res.end(JSON.stringify(data));//返回
next();
})
.listen(3000);
console.log('Server started on port 3000.');

 

 

 

------------------------------------