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.');

 

 

 

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

 

关键词:map function gt name let req 一个 error lt res

相关推荐:

Node编写API接口,ajax实现增删改查

Deploying an Express Node.js Backend on Heroku

详解node + mongoDb(mongoDb安装、运行,在node中连接、增删改查)

Building a JavaScript Auth system using TDD (part 2)

当我们谈论Promise时,我们说些什么

Control your Computer from your Phone

Authenticate a Node ES6 API with JSON Web Tokens

Node进阶——之事无巨细手写Koa源码

The definitive guide to Express, the Node.js Web Application Framework

node之HTTP 从服务端感受ajax和form