国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Node編寫API接口，ajax實現增刪改查

stormgens / 1807人閱讀

摘要：如果是數據接口請求判斷當前操作的接口邏輯是什么增刪改查然后根據不同的邏輯去寫處理方法。總體來說無外乎模塊操作文件的讀寫，模塊將處理后的文件中的內容返回給客戶端。

首先展示一下預覽效果以及文件結構:
一、預覽效果:
信息列表：

編輯：

新增：

刪除：

二、代碼結構：

文件說明：
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數據接口的請求

    var con=null,
        result=null,
        customId=null,
        customPath="./json/customer.json";
    //首先把customer.json中的內容都獲取到
    con=fs.readFileSync(customPath,"utf-8");
    con.length===0?con="[]":null;//為了防止我們custom.json中什么也沒有，con也是一個空字符串，我們會使用JSON.parse轉換的時候會報錯
    con=JSON.parse(con);
    //1.獲取所有的客戶信息
    if(pathname==="/getList"){
        //開始按照API文章的規范給客戶端返回的數據
        result={
            code:1,
            msg:"沒有任何的客戶信息",
            data:null
        };
        if(con.length>0){
            result={
                code:0,
                msg:"成功",
                data:con
            }
        }
        res.writeHead(200,{"content-type":"application/json;charset:utf-8"});
        res.end(JSON.stringify(result));
        return;
    }
    //2.獲取具體某一個客戶的信息根據客戶id
    if(pathname==="/getInfo"){
        //把客戶端傳遞進來的ID獲取到
        customId=query["id"];
        result={
            code:1,
            msg:"客戶不存在",
            data:null
        };
        for (var i = 0; i < con.length; i++){
            if(con[i]["id"]==customId){
                con=con[i];
                result={
                    code:0,
                    msg:"成功",
                    data:con
                    }
                break;
                }
        }
        res.writeHead(200,{"content-type":"application/json;charset:utf-8"});
        res.end(JSON.stringify(result));
        return;
    }
    //3.根據id刪除用戶
    if(pathname==="/removeInfo"){
        customId=query["id"];
        var flag=false;
        for (var i = 0; i < con.length; i++) {
            if(con[i]["id"]==customId){
                con.splice(i,1);
                flag=true;
                break;
            }
        }
        result={
            code:1,
            msg:"刪除失敗"
        }
        if(flag){
            fs.writeFileSync(customPath,JSON.stringify(con),"utf-8");
            result={
                code:0,
                msg:"刪除成功"
            }
        }
        res.writeHead(200,{"content-type":"application/json;charset:utf-8"});
        res.end(JSON.stringify(result));
        return;
    }
    //4.增加客戶信息
    if(pathname==="/addInfo"){
        //獲取客戶端通過請求主體傳遞進來的內容
        var str="";
        req.on("data",function(chunk){ //chunk實時傳輸的數據
            str+=chunk;
        })
        req.on("end",function(){ //接收數據完畢
            if(str.length===0){
                res.writeHead(200,{"content-type":"application/json;charset:utf-8"});
                res.end(JSON.stringify({
                    code:1,
                    msg:"增加失敗,沒有傳遞任何需要增加的信息"
                }));
                return;
            }
            var data=JSON.parse(str);
            //在現有的id中追加一個ID：獲取con中最后一項的ID，ID+1=>新ID
            data["id"]=con.length===0?1:parseInt(con[con.length-1]["id"])+1;
            con.push(data);
            fs.writeFileSync(customPath,JSON.stringify(con),"utf-8");
            res.writeHead(200,{"content-type":"application/json;charset:utf-8"});
            res.end(JSON.stringify({
                code:0,
                msg:"增加成功"
            }));
        });
        return;
    }
    //5.修改客戶信息
    if(pathname==="/updateInfo"){
        var str="";
        req.on("data",function(chunk){
            str+=chunk;
        });
        req.on("end",function(){
            if(str.length===0){
                res.writeHead(200,{"content-type":"application/json;charset:utf-8"});
                res.end(JSON.stringify({
                    code:1,
                    msg:"修改失敗，修改信息為空"
                }));
            }
            var data=JSON.parse(str);
            var flag=false;
            for (var i = 0; i < con.length; i++) {
                if(con[i]["id"]==data["id"]){
                    con[i]=data;
                    flag=true;
                    break;
                }
            }
            if(flag){
                fs.writeFileSync(customPath,JSON.stringify(con),"utf-8");
                res.writeHead(200,{"content-type":"application/json;charset:utf-8"});
                res.end(JSON.stringify({
                    code:0,
                    msg:"修改成功"
                }));

            }
        });
        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

主要是按照單例模式寫相關事件綁定的方法。



    
    node擼接口
    




    增加新用戶
    

        編號
        姓名
        年齡
        地址
        操作

(3)add.html

通過URL參數判斷操作是增加客戶信息還是編輯客戶信息。



    
    增加用戶
    
    


    

        
    
            
  • 
                姓名:
                
            
    • 
            
  • 
                年齡:
                
            
    • 
            
  • 
                地址:
                
            
    •

（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 #ffffd;
    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;
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101045.html

相關文章

  • 邁出全棧第一步，vue+node+mysql獨立完成前后端分離的增刪改查流程

    摘要：本使用創建本地服務器，在就能完成全部流程，并不需要線上服務器。路徑要與后端接口一致。后端返回成功后，前端數據中對應的元素也要刪掉，更新視圖。控制器里拿一個方法出來說一下吧，完整的代碼都在。讀取操作完成后調用釋放連接。 寫在前面 本文只是本人學習過程的一個記錄，并不是什么非常嚴謹的教程，希望和大家一起共同進步。也希望大家能指出我的問題。適合有一定基礎，志在全棧的前端初學者學習，從點擊按鈕...

    fsmStudy 評論0 收藏0

  • 利用Leancloud開發小程序-生成小程序二維碼

    什么是Leancloud Leancloud是國內有名的BaaS提供商，什么是BaaS提供商呢？通俗點講就是給你提供增刪改查等后臺服務的API，你通過這些API就可以將數據存儲在云端數據庫中，而不需要關系服務器環境和里面的處理邏輯，它提供的SDK有js、java、object-c、python等等。 類似的BaaS提供商還有谷歌的firebase（www.firebase.com），但容易被墻不...

    paulquei 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<