node入门

1. 启动服务,并获取url上的参数

路径:http://127.0.0.1:3000/photo?name=yyy&age=12

const http = require('http');
const url = require('url');

var server = http.createServer((req, res) => {
  if (req.url == '/favicon.ico') {
    return;
  }
  var param = url.parse(req.url, true).query;
  console.log(param.name, param.age); // yyy 12
  res.end('hello')
});
server.listen(3000, '127.0.0.1');

2. 在fang.html中通过link href='fang.css’引入css,将fang.html的内容及样式效果显示出来

var http = require('http');
var fs = require('fs');

var server = http.createServer((req, res) => {
  console.log("服务器接收到了请求,地址为:" + req.url);
  switch (req.url) {
    case '/fang':
      fs.readFile('./html/fang.html', (err, data) => {
        res.writeHead(200,{'Content-type': 'text/html;charset=UTF-8'});
        res.end(data);
      });
      break;
    case '/fang.css':
      fs.readFile('./resource/fang.css', (err, data) => {
        res.writeHead(200, {'Content-type': 'text/css'});
        res.end(data);
      });
      break;
    default:
      res.end('读取数据失败');
  }
});

server.listen(3002, '127.0.0.1');

必须要读取fang.css文件,不然样式文件不起作用。

3. 读取文件fs.readFile

var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');

var server = http.createServer((req, res) => {
  var pathname = url.parse(req.url).pathname; // 获得端口号以后 ?参数之前的url
  if (pathname.indexOf('.') == -1) {
    pathname += '/index.html';
  }
  var fileUrl = './' + path.normalize('./static/' + pathname);
  var extname = path.extname(pathname); // 获取后缀名
  fs.readFile(fileUrl, (err, data) => {
    if (err) {
      res.writeHead(404, {"Content-type": "text/html;charset=UTF-8"});
      res.end('404, 未找到页面!')
    }
    getMime(extname, function(mime){
      res.writeHead(200, {"Content-type": mime});
      res.end(data);
    });
    
  })
})
server.listen(3000, '127.0.0.1');

function getMime(extname, callback) {
  fs.readFile('./mime.json', (err, data) => {
    if (err) {
      throw err;
    }
    var mimeJSON = JSON.parse(data);
    callback(mimeJSON[extname]);
  });
}

其中mime.json的格式是

{
	".png":"image/png" ,
	".htm":"text/html" ,
    ".html":"text/html" ,
    ...
}

4. 创建文件fs.mkdir

fs.mkdir('./image', (err) => {
    if (err) {
      throw err;
    }
    res.writeHead(200, {"Content-type": "text/html;charset=UTF-8"});
    res.end('创建完毕');
})

5. 读取文件夹fs.readdir,并输出文件夹中包含的文件夹的名称

在html文件夹中包含aa和bb文件夹,输出aa、bb文件夹的名称

var wjj = [];
  fs.readdir('./html', (err, files) => { // 读取文件夹
    if (err) {
      throw err;
    }
    for (let i = 0; i < files.length; i++) {
      let currentFile = files[i];
      fs.stat('./html/' + currentFile, (err, status) => {
        if (err) {
          throw err;
        }
        if (status.isDirectory()) { // 判断是否是文件夹
          wjj.push(currentFile);
        }
        console.log(wjj);
      })
    }
  })

第二种方法

fs.readdir('./html', (err, files) => {
    if (err) {
      throw err;
    }
    (function iterator(i){
      if (i >= files.length) { // 避免造成死循环
        console.log(wjj);
        return;
      }
      fs.stat('./html/' + files[i], (err, stat) => {
        if (err) {
          throw err;
        }
        if (stat.isDirectory()) {
          wjj.push(files[i]);
        }
        iterator(++i);
      })
    })(0)
  })

6. 接收post请求

相比get请求,post请求稍微麻烦一点点。NodeJS认为,使用post请求一般是数据量相对get请求而言较多,为了追求效率,把数据拆分成了多个小的数据模块(chunk,然后通过特定的事件,把这些小数据模块有序的传递给回调函数)

var http = require('http');

var server = http.createServer((req, res) => {
  if (req.url == '/dopost' && req.method.toLowerCase() == 'post') {
    /** 
     * 下面这个公式是post请求的接收公式
     * 这里只接收了一小段,防止一个过大的请求处理阻塞了这个进程
    */
    var allData = '';
    // 传输中
    req.addListener('data', function(chunk){
      allData += chunk;
    })
    // 传输完毕
    req.addListener('end', function(){
      res.end('success')
      var dataObj = JSON.parse(allData);
      console.log(`机构号::${dataObj.userId}`);
      console.log(`账号::${dataObj.jobNum}`);
    })
  }
})
server.listen(3000, '127.0.0.1');

7. 使用formidable模块处理上传文件,并使用fs.rename重命名已上传的文件

var formidable = require('formidable'), // 处理表单数据
http = require('http'),
util = require('util'),
path = require('path');
var sd = require('silly-datetime');
var fs = require('fs');

http.createServer(function(req, res){
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    var form = new formidable.IncomingForm();
    form.uploadDir = './static/uploads/';
    /** 
     * 回调函数:
     * 1. err: 错误
     * 2. fields:表单数据中文本数据
     * 3. files: 上传文件数据
    */
    // 当执行form.parse时,表示表单已经全部加载完毕了
    form.parse(req, function(err, fields, files) {
      res.writeHead(200, {'Content-type': 'text/plain'});
      res.write('received upload::\n\n');
      var ran = parseInt((Math.random() * 10000).toFixed(0)); // 获取4位的随机数
      var newDate = sd.format(new Date(), 'YYYYMMDD');
      var extname = path.extname(files.upload.name); 
      var oldpath = __dirname + '/' + files.upload.path; // 获取之前的路径
      // 两种newpath重命名方式,两者选其一
      var newpath = __dirname + '/static/uploads/' + newDate + ran + extname; 
      var newpath = __dirname + '/static/uploads/' + newDate + ran + files.upload.name;
      fs.rename(oldpath, newpath, (err) => {
        if (err) {
          console.log('上传文件错误::', err);
        }
        res.writeHead(200, {'Content-type': 'text/plain'});
        res.end('success');
      })
      console.log('标题:', fields.title);
      console.log('年龄:', fields.age);
      res.end(util.inspect({fields: fields, files: files})); // 把两个对象合并并返回字符串
    });
    return;
  }
  res.writeHead(200, {'Content-type': 'text/html'});
  res.end(
    `<form action="/upload" enctype="multipart/form-data" method="post">
      <input type="text" name="title"/><br/>
      <input type="text" name="age"/><br/>
      <input type="file" name="upload" multiple="multiple"/><br/>
      <input type="submit" value="Upload"/>
    </form>`
  );
}).listen(3000, '127.0.0.1');


8. ejs

ejs.js中

var ejs = require('ejs');
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(req, res){
  fs.readFile('./views/index.ejs', function(err, data) {
    var template = data.toString();
    var data2 = {
      num: 2,
      list: [
        {
          title: 'Think',
          age: 18
        },
        {
          title: 'Magic',
          age: 20
        },
        {
          title: 'selly',
          age: 21
        }
      ]
    };
    var html2 = ejs.render(template, data2);
    res.writeHead(200,{"Content-type":"text/html;charset=UTF-8"});
    res.end(html2);
  })
});

server.listen(3000, '127.0.0.1');

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <%
     for (var i = 0; i < list.length; i++) {
       if (list[i].age < 20) {
     %>
       <li>
         <span style="color:red"><%= list[i].title %></span>
         <span style="color:green"><%= list[i].age %></span>
       </li>
    <%
      }  
     }
    %>
  </div>
</body>
</html>

9. 配合express,使用ejs

express_ejs.js中

var express = require('express');
var app = express();

app.set('view engine', 'ejs'); //设置视图引擎,设置视图类型:ejs
app.get('/', function(req, res){
  /**
   * yuan: 表示文件名,由于设置视图引擎的时候已经告诉他是ejs类型,所以无需指定后缀,默认为ejs
   * 默认是views文件夹,所以无需设置yuan.ejs的路径
   *  */
  res.render('yuan', {
    'list': ['Think', '懒洋洋', '慢羊羊']
  })
});

app.listen(3000);

views/yuan.ejs中:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>yuan page</title>
</head>
<body>
  <div>
    <h1>元page</h1>
    <ul>
      <%
        for(var i = 0; i < list.length; i++) {
      %>
          <li><%= list[i] %></li>
      <%
        }
      %>
    </ul>
  </div>
</body>
</html>
发布了7 篇原创文章 · 获赞 9 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览