Node.js笔记(配置环境,简单搭建服务器,建站)

作者: oldSix_Zhu | 来源:发表于2017-04-27 21:49 被阅读139次

Node.js笔记(配置环境,简单搭建服务器,建站)
【进阶系列】Node.js专题
HTML免费视频教程
hexo搭建个人博客
私有npm服务器搭建
搭建私有npm服务器教程
阿里云服务器搭建(二)--mysql配置+部署web项目
阿里云服务器搭建(一)java环境配置+tomcat配置
以fis3为基础，定制开发环境
前端实践VUE

Node.js是一个在浏览器之外可以解析和执行JavaScript代码的运行时环境或平台,使JavaScript脱离了HTML的<script>与浏览器的限制,可以在服务器端使用,当node中js代码对外提供了一些服务器功能的服务的时候,运行代码电脑就能算为是服务器
特性是事件驱动,无阻塞I/O模型
<a href = "https://nodejs.org/en/">Node.js官网</a>
(Node.js官网上的API解释很少,有些函数名也很怪,感觉没有语义化,其实是直接用的Linux命令拼接的,作者认为学习的人一定都懂😅)

目录
1.环境搭建
2.Node.js模块概念
3.简单搭建一个服务器
4.简单建站

1 环境搭建(macOS)

1> 打开官网根据操作系统下载安装包:

点击下载安装包

网站会自动检测电脑的操作系统,直接点击下载左边的稳定版即可

2> 下载好之后双击安装包安装

安装成功

3>打开“终端”输入命令: curl http://npmjs.org/install.sh | sh
执行完成之后输入命令: sudo npm update npm -g

4>查询是否安装成功: npm -v 与 node -v
出现版本号即为成功

2 Node.js基础使用

js是一种语言,而node是一种技术
node用require函数可实现一个js引入另一个js,
这些js文件也称为"模块",而将一些模块再进行整理组织在一起,就成为"包"
Node.js就是利用这些模块实现功能,实现很好的模块化

常见核心模块名称	功能
http	提供http服务器功能
fs	与文件系统交互
path	处理文件路径
url	解析url
querystring	解析url查询字符串
util	提供一系列实用小工具

核心模块的源码都在Node的lib子目录中.
为了提高运行速度,安装的时候都会被编译成二进制文件.

最常用的模块就是http与path,fs模块,因为大量的I/O操作
而一般"双向数据绑定"用在实时更新的界面数据上,比如在输入框里输入数字,下面界面的数字立刻发生变化,比如股票k线图

3 简单搭建一个服务器

1>写一段js:

//引入http模块
var http=require('http');
var count=0;
//创建一个服务器
http.createServer(function(req,res){
    count++;
    //返回一个200状态
    res.writeHead(200,{"Content-Type":"text/html;charset=utf8"});
    res.end("我是服务器，我接收了"+count+"个请求。")
}).listen(3000);

2>查看本机ip:

mac查看本机ip终端命令

3>
打开js文件目录下终端"node空格文件名字"运行
根据ip打开浏览器,即可看到服务器开启成功

接收请求成功

4>
使用命令"control+c"关闭服务器
关闭终端也可以关闭服务器

关闭服务器

4.简单建站

'use strict'
const http=require('http');
//创建一个服务器的实例，创建的是 http.Server这个对象
const server=http.createServer();
//监听request事件,当有请求发送到服务器的时候，触发了request事件
//触发完成了就调用了callback函数了
//请求对象request\响应对象response
//http模板帮你去做了封装，请求报文封装到了request对象里面。
//http.IncomingMessage是request，除了是一个对象外，还是一个读文件流
//使用response里面的方法构造响应报文,调用response里面的方法，将响应报文扔回去

//response是http.ServerResponse对象 是一个写文件流
server.on('request',function(request, response){
        //console.log(request.headers);
        console.log(request.httpVersion);
        console.log(request.method);
        console.log(request.url);

        if(request.url=='/news.html'&&request.method=='GET'){
                    response.end('<div>新闻</div>');
        }
        else if(request.url=='/login'&&request.method=='GET'){
                response.end('<div>登录1</div>');
        }
        else if(request.url=='/login'&&request.method=='POST'){
                response.end('success');
        }
    //参数1.状态码，2.往报文头里写的内容
    //response.writeHead(200,{'Content-Type': 'text/html; charset=utf-8'});
    //向响应报文的报文体写内容
    //response.write('<h1>hello</h1>');
    //response.end('world');
       // response.end('world');
})
server.listen(3000);

与ajax结合:
.js:

'use strict'
const http = require('http');
const fs = require('fs');
const url = require('url');
const path = require('path');
//引入querystring模块
//const querystring = require('querystring');
//使用parse格式化参数，把string转obj
// var dataObj= querystring.parse(data);
const querystring = require('querystring');

//创建一个http服务器
const server = http.createServer();
//监听了一个请求事件request,response
server.on('request', (req, res) => {
  let urlObj = url.parse(req.url, true);
  //urlObj对象的query属性是取参数
  //console.log(urlObj.query);
  let query = urlObj.query;
  let pathname = urlObj.pathname;
  if (pathname == '/' && req.method == 'GET') {
    fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
      if (err) {
        throw err;
      }
      res.end(data);
    });
  }
  else if (pathname == '/jquery.js' && req.method == 'GET') {
    fs.readFile(path.join(__dirname, 'jquery.js'), (err, data) => {
      if (err) {
        throw err;
      }
      res.end(data);
    });
  }
  else if (pathname == '/getData' && req.method == 'POST') {
    let data = '';
    // 接收 post 方式提交的数据
    req.on('data', (chunk) => {
      data += chunk;
    });
    req.on('end', () => {
      console.log(data);
      //querystring核心模块
      let obj = querystring.parse(data);
      console.log(obj);
      let send = {
       "message": "成功"
      };
      let sendStr = JSON.stringify(send);
      let sendBuf = new Buffer(sendStr);
      res.end(sendBuf);
    });
  }
  else if (pathname == '/getData' && req.method == 'GET') {
    console.log(query);
    let send = {
      "message": "成功"
    };
    let sendStr = JSON.stringify(send);
    let sendBuf = new Buffer(sendStr);
    res.end(sendBuf);
  }
  else {
    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    });
    //向浏览器去写数据
    res.write('<h1>404</h1>');
    //响应结束
    res.end();
  }
});
server.listen(3000);

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
  <script src="./jquery.js"></script>
  <!--<script src="http://127.0.0.1:3000/jquery.js"></script>-->
</head>
<body>
  <h1>index site</h1>
  <ul>
    <li>123</li>
    <li>456</li>
  </ul>  <script>
    //  $.ajax({
    //    'url':"/getData?name=123",
    //    'type':"GET",
    //    'dataType':'json',
    //    'success':function(data){
    //      console.log(data);
    //      alert(data);
    
    // }});
    $.ajax({
       'url':"/getData",
       'type':"POST",
       'data': { "name": "John", "test": "foo" },
       'dataType':'json',
       'success':function(data){
         console.log(data);
    
     }});
     
  </script>
</body>
</html>