node入门之实现页面的curd

首先起一个node 服务 serve.js

http.createServer(function (req, res) {
// 将来做一些后台逻辑处理 
}).listen(3000, () => {
  console.log('listening 3000')
});

然后新建基本页面前端页面用于交互 index.html 这里使用了 bootstrap的样式

    
    
//此处路径将css文件放于相同文件下 不然会找不到文件
    



    

        

            

                用户名
                
                    
                
            
            

                密码
                
                    
                
            
            

                添加
            
        
        

        
    

接着需要在serve.js中添加静态页面的访问逻辑

http.createServer(function (req, res) {
// 将来做一些后台逻辑处理 
 //处理静态页面
  fs.stat('.' + pathname, function (err, stats) {
    if (err) {
      res.statusCode = 404;
      res.end(`${pathname} not fount`)
    } else if (stats.isFile()) {
      res.setHeader('Content-Type', mime.getType() + ';charset=utf8');
      fs.createReadStream('.' + pathname).pipe(res)
    } else if (stats.isDirectory()) {
      res.setHeader('Content-Type', 'text/html;charset=utf8');
      let p = path.join('.' + pathname, './index.html');
      fs.createReadStream(p).pipe(res)
    }

  })
}).listen(3000, () => {
  console.log('listening 3000')
});

接着需要在serve.js中添加按符合resful的风格添加相应的接口

let http = require('http');
let fs = require('fs');
let url = require('url');
let path = require('path');
let mime = require('mime');
let user = [
  {
    id: 1, username: 'ywh', password: '你好123124'
  }, {
    id: 2, username: 'ywh2', password: '123456'
  }];


http.createServer(function (req, res) {
  let {pathname, query} = url.parse(req.url, true);
  //处理后台
  if (pathname === '/user') {
    let id = query.id;
    switch (req.method) {
      case 'GET':
        if (!id) {
          res.setHeader("Content-Type", 'application/json;charset=utf-8');
          res.end(JSON.stringify(user))
        }
        break;
      case 'POST':
        let str = '';
        req.on('data', function (chunk) {
          str += chunk
        });
        req.on('end', function () {
          let user1 = JSON.parse(str);
          user1.id = user.length ? user[user.length - 1].id + 1 : 1;
          user.push(user1);
          res.end(JSON.stringify(user1));
        });
        break;
      case 'DELETE':
        if (id) {
          // 这里使用!=是由于前端传过来的数据是一个json
          user = user.filter(item => item.id != id
          )
          ;
          res.end(JSON.stringify({}));
        }
        break;
      case 'PUT':
        break;
    }
    return
  }
  //处理静态页面
  fs.stat('.' + pathname, function (err, stats) {
    if (err) {
      res.statusCode = 404;
      res.end(`${pathname} not fount`)
    } else if (stats.isFile()) {
      res.setHeader('Content-Type', mime.getType() + ';charset=utf8');
      fs.createReadStream('.' + pathname).pipe(res)
    } else if (stats.isDirectory()) {
      res.setHeader('Content-Type', 'text/html;charset=utf8');
      let p = path.join('.' + pathname, './index.html');
      fs.createReadStream(p).pipe(res)
    }

  })
}).listen(3000, () => {
  console.log('listening 3000')
});

前端发起相应请求的方法(fetch)

demo git地址