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

2次阅读

共计 9104 个字符，预计需要花费 23 分钟才能阅读完成。

首先展示一下预览效果以及文件结构: 一、预览效果: 信息列表：

编辑：

新增：

删除：

二、代码结构：

文件说明：1.css 文件：存放项目页面样式 2.json：用于项目数据存储 3.index.html：用户列表展示页面 4.add.html：新增 | 编辑用户信息页面 5.server.js: 启动 node 服务

github 代码下载地址：https://github.com/wyj2443573…

启动方法:1. 进入 crmNode 文件，在命令控制台中输入 node server.js 来启动服务, 出现以下提示代表成功。
2. 在终端中输入 ipconfig 查看本机联网 ip:
3. 将 ipv4 的地址输入到浏览器地址栏中，添加上端口 8082，如图所示：到一步启动完成。

三、代码解析
(1)server.js 文件

主要用于 1. 启动本地服务 2. 写接口文档
用的 node 模块有：http、url、fs
接口逻辑：

创建服务

根据正则判断（1. 静态资源文件请求,2.API 数据接口的请求）不同的请求类型做不同的处理

如果是静态资源文件请求：用 fs 去读取文件，然后 node 服务获取文件内容并返回客户端。
如果是 API 数据接口请求：判断当前操作的接口逻辑是什么（增 | 删 | 改 | 查）, 然后根据不同的逻辑去写处理方法。总体来说无外乎 fs 模块操作 json 文件的读写，http 模块将处理后的 json 文件中的内容返回给客户端。

代码（给出了相关注释如下）：
var http=require(‘http’),
url=require(‘url’),
fs=require(‘fs’);
var server=http.createServer(function(req,res){
let urlObj=url.parse(req.url,true),
pathname=urlObj.pathname
query=urlObj.query; //query 存储的是客户端请求的 url 地址中问号传参后面的信息
// 静态资源文件请求的处理
let reg=/\.(html|css|js|ico)/i;
if(reg.test(pathname)){
let suffix=reg.exec(pathname)[1].toUpperCase();
let suffixMIME=’text/html’;
switch(suffix){
case “CSS”:
suffixMIME=’text/css’;
break;
case “JS”:
suffixMIME=’text/javascript’;
break;
}
try{
let conFile=fs.readFileSync(‘.’+pathname,’utf-8’);
res.writeHead(200,{‘content-type’:suffixMIME+’;charset=utf-8;’})
res.end(conFile)
}catch(e){
res.writeHead(404,{‘content-type’:’text/plain;charset=utf-8;’})
res.end(‘file is not found’);
return;
}
}
//API 数据接口的请求

}
});
return;
}

res.writeHead(404,{‘content-type’:’text/plain;charset=utf-8′});
res.end(JSON.stringify({
code:1,
msg:’ 请求接口不存在 ’
}))

})
server.listen(8082,function(){
console.log(‘server is success, listening on 8082 port’)
})
(2)index. html
主要是按照单例模式写相关事件绑定的方法。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>node 撸接口 </title>
<link rel=”stylesheet” href=”css/index.css”>
</head>
<body>
<div class=”box” >
<a class=”addBtn” href=”add.html”> 增加新用户 </a>
<h2 class=”head”>
<span> 编号 </span>
<span> 姓名 </span>
<span> 年龄 </span>
<span> 地址 </span>
<span> 操作 </span>
</h2>
<ul class=”list” id=”list”>

</ul>

</div>
<script src=”https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js”></script>
<script>
// 获取客户信息，完成页面的数据绑定
var customeModule=(function(){
//Bind html
var documentList=document.getElementById(‘list’);
function bindHtml(data){
var str=”;
for (var i = 0; i < data.length; i++) {
var curData=data[i];
str+=`<li>
<span>${curData.id}</span>
<span>${curData.name}</span>
<span>${curData.age}</span>
<span>${curData.address}</span>
<span>
<a href=”add.html?id=${curData.id}”> 修改 </a>
<a href=”javascript:;” cusId=”${curData.id}”> 删除 </a>
</span>
</li>`
}
documentList.innerHTML=str;
}
function removeCustomer(){
documentList.onclick=function(e){
var e=e||window.event,
tar= e.target|| e.srcElement,
tarTag=tar.tagName.toUpperCase();
// 删除操作
if(tarTag===’A’&&tar.innerHTML===’ 删除 ’){
// 确认提示框
var customId=tar.getAttribute(‘cusId’),
flag=window.confirm(‘ 确定要删除编号为 [‘+customId+’] 的客户吗?’);
if(flag){
$.ajax({
url:’/removeInfo?id=’+customId,
success:function(data){
if(data&&data.code==0){
documentList.removeChild(tar.parentNode.parentNode);
return;
}
alert(data.msg);
}
})
}

}
}
}
//send ajax get data
function init(){
$.ajax({
url:’/getList’,
success:function(data){
console.log(data);
if(data&&data.code==0){
var data=data[‘data’];
// 绑定数据
bindHtml(data);
// 取消
removeCustomer();
}
}
})
}
return{
init:init
}
})();
customeModule.init();

</script>
</body>
</html>

(3)add.html
通过 URL 参数判断操作是增加客户信息还是编辑客户信息。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> 增加用户 </title>
<link rel=”stylesheet” href=”css/index.css”>
<style>
.box2{
width:800px;
margin:50px auto;
font-family:Arial,”PingFang SC”,”Hiragino Sans GB”,STHeiti,”Microsoft YaHei”,”WenQuanYi Micro Hei”,sans-serif ;
font-weight: 700;
border:10px solid #dadada;
text-align: center;
padding:10px;
}
.box2 ul{
width:100%;
overflow: hidden;
}
.box2 ul li{
width:100%;
height:36px;
float:left;
padding:5px;
text-align: center;
}
.box2 .type{
display: inline-block;
width:60px;
height:36px;
line-height: 36px;

}
.inputInfo{
width:600px;
padding:0 10px;
height:36px;
border:1px solid #ddd;
}
.submit{
display: inline-block;
margin:15px auto 0;
width:100px;
height:36px;
background-color: #179a6e;
cursor: pointer;
}
</style>
</head>
<body>
<div class=”box2″>
<ul>
<li>
<span class=”type”> 姓名:</span>
<input type=”text” id=”userName” class=”inputInfo”>
</li>
<li>
<span class=”type” > 年龄:</span>
<input type=”text” id=”userAge” class=”inputInfo”>
</li>
<li>
<span class=”type” > 地址:</span>
<input type=”text” class=”inputInfo” id=”userAddress”>
</li>
</ul>
<button class=”submit” id=”submit”> 提交 </button>
</div>
</body>
<script src=”https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js”></script>
<script>
// 获取 URL 地址栏的参数值
String.prototype.queryUrlParameter=function(){
var obj={};
var reg=/([^?=&#]+)=([^?=&#]+)/g;
this.replace(reg,function(){
var key=arguments[1];
var value=arguments[2];
obj[key]=value;
})
return obj;
}
var userName=document.getElementById(‘userName’);
var userAge=document.getElementById(‘userAge’);
var userAddress=document.getElementById(‘userAddress’);
var submit=document.getElementById(‘submit’);
// 判断修改还是增加：如果 url 后面传递了 ID 值就是修改，否则就是增加
var urlBoj= window.location.href.queryUrlParameter(),
customId=urlBoj[‘id’],
isFlag=typeof customId===’undefined’?false:true; //true-> 修改 false-> 增加
// 如果是修改，首先需要把对应客户的信息获取到，并且增加到对应的文本框中。
if(isFlag){
$.ajax({
url:’/getInfo?id=’+customId,
success:function(data){
if(data&&data.code==0){
var result=data[‘data’];
userName.value=result[‘name’];
userAge.value=result[‘age’];
userAddress.value=result[‘address’];
}
}
})
}
// 点击提交按钮 1. 增加 2. 修改
submit.onclick=function(){
var obj={
name:userName.value,
age:userAge.value,
address:userAddress.value
};
//update send ajax
if(isFlag){
console.log(‘ 进入修改 ’);
obj.id=customId;
$.ajax({
url:’/updateInfo’,
type:’POST’,
data:JSON.stringify(obj),
success:function(data){
if(data&&data.code==0){
window.location.href=’index.html’
return;
}
alert(data.msg);
}

})
return;
}
//add send ajax
$.ajax({
url:’/addInfo’,
type:’POST’,
data:JSON.stringify(obj), // 请求主体的内容是 json 格式的字符串
success:function(data){
if(data&&data.code==0){
// 成功后跳转回首页
window.location.href=’index.html’
}
alert(data.msg);
}
});
}
</script>
</html>
（4）customer.json
[{“name”:”Tom”,”age”:”20″,”address”:” 北京天通苑 ”,”id”:”1″},{“name”:”Tony”,”age”:”23″,”address”:” 北京沙河 ”,”id”:”2″}]
（5）index.css
*{
margin:0;
padding:0;

}
li{
list-style: none;
}
.box{
width:800px;
margin:50px auto;
font-family:Arial,”PingFang SC”,”Hiragino Sans GB”,STHeiti,”Microsoft YaHei”,”WenQuanYi Micro Hei”,sans-serif ;
font-weight: 700;
border:10px solid #dadada;
}
.addBtn{
color:#179a6e;
font-size:18px;

}
.head{
width:100%;
height:30px;
font-size:16px;
line-height:30px;
background-color: #179a6e;
overflow: hidden;
}
.head span{
display: inline-block;
float:left;
width:20%;
text-align: center;
color:#fff;
position: relative;
}
.head span:after{
content:”;
position:absolute;
width:1px;
height:30px;
background-color: #fff;
right:0;
top:0;
}
.list{
width:100%;

}
.list li{
width:100%;
height:36px;
line-height: 36px;
overflow: hidden;
border-bottom:1px solid #ddd;
cursor: pointer;
}
.list li:hover{
background-color: #fafafa;
}
.list li span{
display: inline-block;
width:20%;
float:left;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}