zoukankan      html  css  js  c++  java
  • 用nodejs和js写增删查模块

      文件目录如下:public是静态资源文件,index.html入门页面,server.js就是用nodejs创建的服务端代码,users.json就类似是数据库。

    目录

    显示界面

      

      这儿也是自己想总结下,nodejs代码,listUsers、delUsers、addUsers,这是用nodejs作为服务端,写的接口。

    listUsers

      而这儿的数据就是通过listUsers接口从静态json取的,而这儿listUsers接口只用了readFile方法。

    app.get("/listUsers",function(req,res) {
        fs.readFile(__dirname + "/" + "users.json","utf8",function(err,data){
            console.log(data);
            res.end(data);
        });
    })
    

      当启动server.js时,命令窗口显示:

          

      

    addUsers

    addUsers接口就是接客户端传过来的参数,然后返回数据给它,就跟后台写的接口一样。然后既然要传数据,自然是要读取json文件(咱的数据库),把客户端传过来的新数据插到json文件中。其中,主要就是用nodejs的api中两个方法readFile、writeFile。

    app.post('/addUsers', function (req, res) {
        //console.log(req.body);
        fs.readFile(__dirname + "/" + "users.json","utf8",function(err,data){
            if (err) {
              console.error(err);
              process.exit(1);
            }
            var users = JSON.parse(data);
            var newusers = req.body;
            users.push(newusers);
            console.log(users);
            fs.writeFile(__dirname + "/" + "users.json",JSON.stringify(users, null, 4),function(err){
                if (err) {
                    console.error(err);
                    process.exit(1);
                }
                res.json(users);
            })
        })
    })
    

    delUser接口我们就不细看,可自行看源代码。  

    然后再看看我们的index.html。

    var getData = function() {
        var html = "";
        $("#example tbody").html("");
        $.ajax({
            url:"/listUsers",
            type:'GET',
            dataType:"json",
            success:function(data){
                for(var i=0;i<data.length;i++){
                   。。。
                }
                $("#example tbody").html(html);
            }
        })
    }
    

      

    这就是我们很常见的ajax方法,接口就是listUsers也就是我们通过nodejs提供的接口。

    就这么完美的将前台的js和nodejs结合起来了,当然这还真是nodejs,与静态json搭配使用。

    源代码:https://github.com/wanliyuan/module/tree/gh-pages/node/simpleDemo ,下载demo链接在此

    uploadDemo

     这是通过nodejs写的通过客户端上传文件到本地的。

     server.js核心方法是:

    app.post('/file_upload', function (req, res) {
    
       console.log(req.files[0]);  // 上传的文件信息
    
       var des_file = __dirname + "/" + req.files[0].originalname;
       fs.readFile( req.files[0].path, function (err, data) {
            fs.writeFile(des_file, data, function (err) {
             if( err ){
                  console.log( err );
             }else{
                   response = {
                       message:'File uploaded successfully', 
                       filename:req.files[0].originalname
                  };
              }
              console.log( response );
              res.end( JSON.stringify( response ) );
           });
       });
    })
    

      

    我们启动server.js成功,界面如下:

    --》上传成功   --》 

       

     源代码:https://github.com/wanliyuan/module/tree/gh-pages/node/uploadDemo uploadDemo下载链接在此

  • 相关阅读:
    [leetcode] 110. 平衡二叉树
    [leetcode] 109. 有序链表转换二叉搜索树
    [leetcode] 108. 将有序数组转换为二叉搜索树
    [leetcode] 107. 二叉树的层次遍历 II
    [leetcode] 106. 从中序与后序遍历序列构造二叉树
    [leetcode] 105. 从前序与中序遍历序列构造二叉树
    [leetcode] 111. 二叉树的最小深度
    LeetCode
    LeetCode
    LeetCode
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/5607201.html
Copyright © 2011-2022 走看看