1193-前端面试加分福音--node基础

慕课网 node
创建时间:
字数:2.1k 阅读: 评论:
  1. 第1章 课程介绍
    1. 1-1 课程简介 (08:47)
    2. 1-2 学习目标 (03:35)
  2. 第2章 Node介绍
    1. 2-1 Node的优势 (05:36)
    2. 2-2 Node环境搭建和运行 (06:35)
    3. 2-3 npm和包 (13:20)
  3. 第3章 Node的模块
    1. 3-1 Node中的模块：全局模块 (10:34)
    2. 3-2 Node中的模块：系统模块 (13:54)
    3. 3-3 Node中的模块：自定义模块 (07:23)
    4. 3-4 核心：http模块 (11:21)
  4. 第4章 Node中的数据交互
    1. 4-1 GET请求 (13:32)
    2. 4-2 POST请求 (12:34)
  5. 第5章 案例
    1. 5-1 接口（API） (05:59)
    2. 5-2 项目：实现登录和注册 (30:08)
  6. 第6章 课程回顾与总结
    1. 6-1 总结扩展 (11:45)

https://www.imooc.com/learn/1193

简介：系统的学习NodeJS的基础，熟练使用Node的核心API，了解node的运行过程，学会搭建自己的服务器，并实现我们常见的登录、注册功能，揭开后端开发的神秘面纱。

第1章 课程介绍

1-1 课程简介 (08:47)

为什么要学node

  • 使自己更全面，有大局观
  • 提升话语权
  • 升职加薪的筹码

Node的作用和应用

  • 脱离浏览器运行JS
  • 后台API编写
  • Webpack、Gulp、Npm等等
  • 中间层：服务器中负责IO读写的中间层服务器

Node的优点：

  • 性能、异步IO、处理数据、安全性

1-2 学习目标 (03:35)

登陆、注册案例

前置知识：HTML+CSS、JavaScript

第2章 Node介绍

2-1 Node的优势 (05:36)

  • 便于前端开发入门
  • 性能高
  • 利于前端代码的整合

2-2 Node环境搭建和运行 (06:35)

Node官网：https://nodejs.org/

Node环境搭建

  • 官网上下载node-v-xx.msi傻瓜式的安装包。一路下一步安装完成。
  • 检测是否安装成功：node -v
  • 运行程序：node xxx.js

2-3 npm和包 (13:20)

NPM包管理器：

NPM：node package management

  • package.json
  • NPM、CNPM
  • npm常用命令

没有包管理器的时候：

<script src="js/jquery.js"/>
<script src="js/swiper.js"/>
<script src="js/fastclick.js"/>

CNPM安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

NPM常用命令：

npm init # 初始化
npm install xxx # 安装
npm i xxx
npm uninstall xxx # 删除
npm un xxx
npm update xxx # 更新
npm install # 安装
npm i

第3章 Node的模块

  1. 全局模块（对象）process
  2. 系统模块
  3. 自定义模块

3-1 Node中的模块：全局模块 (10:34)

定义：何时何地都能访问，不需要引用

  1. process.env：环境变量

    • 代码

      console.log(process.env);

    • 命令

      node index.js

    • 结果

      {
  TERM: 'xterm-256color',
  SHELL: '/bin/bash',
  CLICOLOR: '1',
  TMPDIR: '/var/folders/jd/4db9g3vs0c57f0_fwtj6nkfc0000gn/T/',
  Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.gNREVjs4ne/Render',
  USER: 'tuyuankun',
  SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.rYrS6hZYR9/Listeners',
  __CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34',
  LSCOLORS: 'gxfxaxdxcxegedabagacad',
  PATH: '/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Develop/applications/apache-maven-3.6.2/bin:/Develop/applications/elasticsearch-7.3.1/bin:/Develop/applications/elasticsearch-head',
  TERMINAL_EMULATOR: 'JetBrains-JediTerm',
  PWD: '/Develop/learn-imooc/1193-node-base',
  XPC_FLAGS: '0x0',
  XPC_SERVICE_NAME: '0',
  M2_HOME: '/Develop/applications/apache-maven-3.6.2',
  SHLVL: '1',
  HOME: '/Users/tuyuankun',
  LOGNAME: 'tuyuankun',
  LC_CTYPE: 'zh_CN.UTF-8',
  OLDPWD: '/Develop/learn-imooc/1193-node-base/js',
  _: '/usr/local/bin/node'
}

  2. process.argv：运行参数

    • 代码

      console.log(process.argv);

    • 命令

      node index.js a b c

    • 结果

      [
  '/usr/local/Cellar/node/12.10.0/bin/node',
  '/Develop/learn-imooc/1193-node-base/index.js',
  'a',
  'b',
  'c'
]

    简易计算器：

    let num1 = parseInt(process.argv[2]);
let num2 = parseInt(process.argv[3]);
console.log(num1 + num2);
    node index.js 34 43
    77

  3. __dirname：当前目录名称

3-2 Node中的模块：系统模块 (13:54)

定义：需要require()，但不需要单独下载

  1. path：用于处理文件路径和目录路径的实用工具

    var path = require('path');
    path.dirname("/node/a/c/c/1.jpg")// 文件夹名称
path.basename("/node/a/c/c/1.jpg")// 文件名称
path.extname("/node/a/c/c/1.jpg")// 文件后缀名称
path.resolve("/node/a/b/c", "../../", "d")// /node/a/d
path.resolve(__dirname, "index.js")// index.js的绝对路径

  2. f s：用于文件读写操作

    var fs = require("fs");

    • 写操作：

      fs.writeFile("fs.write.txt", "刚下飞机", function (err) {
    if (err) {
        throw err;
    }
});
// 同步
fs.writeFileSync("fs.writeSync.txt", "分割线");

    • 读操作：

      fs.readFile("js/helloworld.js", function (err, data) {
        if (err) {
            console.log(err);
        } else {
            console.log(data.toString());
        }
    }
);
// 同步
var data = fs.readFileSync("js/helloworld.js");

    • 追加文件

      fs.writeFile("fs.write.txt", "年入百万", {flag: "a"}, function (err) {
    if (err) {
        throw err;
    }
});
      fs.appendFile("fs.write.txt", "泻药", function (err) {
    if (err) {
        throw err;
    }
});

3-3 Node中的模块：自定义模块 (07:23)

定义：require自己封装的模块

  • exports
  • module
  • require
/* mod.js */
// 1. 参数
/*exports.a = 1;
exports.b = 2;

var c = 3;*/

// 2. 对象
/*module.exports = {
    a: 1,
    b: 2
};*/

// 3. 方法
/*module.exports = function () {
    console.log("module.exports function");
};*/

// 4. 类
module.exports = class {
    constructor(name) {
        this.name = name;
    }

    show() {
        console.log(this.name);
    }
};
/* exports.js */
const mod = require("./mod");

/*console.log(mod.a);// 1
console.log(mod.b);// 2
console.log(mod.c);// undefined*/

/*mod();*/

let tuyrk = new mod("tuyrk");
tuyrk.show();

require()

  1. 如果有路径，就去路径里面找
  2. 没有的话就去node_modules里面找
  3. 路径下没有模块，就去node的安装目录里面找。

3-4 核心：http模块 (11:21)

服务器对象：http.createServer()

let fs = require("fs");
let path = require("path");
let http = require("http");

http.createServer((req, res) => {
    /*console.log("我来了。");*/

    /*res.write("index");
    res.end();*/

    console.log(req.url);
    fs.readFile(`./${req.url}`, (err, data) => {
        if (err) {
            console.log(err);
            res.writeHead(404);
            res.end("404 not found");
        } else {
            res.writeHead(200);
            res.end(data);
        }
    });
}).listen(8888);
<p>我是http.html</p>
<img src="../imgs/avatar.jpeg" alt="avatar.jpeg">

第4章 Node中的数据交互

4-1 GET请求 (13:32)

客户端与服务器交互的东西称为报文。

报文分为：报文头（信息，<=32K）、报文体（数据<2G）。

请求方式：GET、POST、PUT、DELETE

GET请求

  • 什么是GET请求？主要是获取数据。一次性传输数据
  • 数据是放在URL里面进行传输。报文头。
  • 容量小：<32K
let http = require("http");
let url = require("url");

http.createServer(((req, res) => {
    console.log(req.url);
    // 1. 无url模块，原始处理方法
    /*let [url, query] = req.url.split('?');
    console.log(url, query);*/

    // 2. 使用url模块处理路径与参数
    let {pathname, query} = url.parse(req.url, true);
    console.log(pathname, query);
})).listen(8888);
<form action="http://localhost:8888/aaa" method="get">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit" value="提交">
</form>

4-2 POST请求 (12:34)

POST请求

  • 分段传输数据

  • 数据是放在body里边进行传输。报文体

  • 容量大：2G

let http = require("http");
let querystring = require("querystring");

http.createServer(((req, res) => {
    let result = [];
    req.on("data", buffer => {
        result.push(buffer);// 分段传输数据，多次执行添加
    });

    req.on("end", () => {// 数据处理完成
        let data = Buffer.concat(result).toString();// 数组转buffer
        console.log(querystring.parse(data));// 处理queryString
    })
})).listen(8888);
<form action="http://localhost:8888/aaa" method="post">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    <input type="submit" value="提交">
</form>

总结：

  1. GET
    • url?username=xxx&password=xxx
    • 32K
    • url模块
    • url.parse(req.url, true)
  2. POST
    • 放在请求体
    • 2G
    • querystring模块
    • querystring.parse(data)

第5章 案例

5-1 接口（API） (05:59)

登录框：登陆、注册

接口设计

  • 什么是接口（API）：不同功能层之间的通信规则称为接口
  • 参数、返回值

登陆：

GET '/login'
username, password
{
  err: 1,
  msg: "密码错误"
}

注册：

POST '/reg'

5-2 项目：实现登录和注册 (30:08)

后台：

/*login.js*/
const http = require("http");
const url = require("url");
const querystring = require("querystring");
const fs = require("fs");
const path = require("path");

let user = {
    admin: "123456"
};

http.createServer(((req, res) => {
    // 获取数据
    let uri, get, post;
    if (req.method === "GET") {
        let {pathname, query} = url.parse(req.url, true);
        uri = pathname, get = query;
        complete();
    } else if (req.method === "POST") {
        let arr = [];
        uri = req.url;
        req.on("data", buffer => {
            arr.push(buffer);
        });
        req.on("end", () => {
            post = querystring.parse(Buffer.concat(arr).toString());
            complete();
        });
    }
    // 业务操作
    // function complete() {}

    // 设置状态码、编码
    function setHead() {
        res.writeHead(200, {
            "Content-Type": "text/plain;charset=utf-8"
        });
    }
})).listen(8888);

页面：

<!--login.html-->
<form>
    用户名：<input type="text" id="username"><br>
    密码：<input type="password" id="password"><br>
    <button id="login">登陆</button>
    <button id="reg">注册</button>
</form>

第6章 课程回顾与总结

6-1 总结扩展 (11:45)

作用：

  1. 写Web API
  2. 中间层
  3. 前端工程化的一些工具（webpack、gulp）

优势：

  1. 性能高
  2. 便于前端入手

npm命令：

package.json

npm i xxx
npm un xxx

三大模块

  1. 全剧模块
  2. 系统模块 require引入
  3. 自定义模块 自己封装 module.export

重点：http模块

http.createServer((req, res) => {
    // ...
})

数据通信：

  1. GET请求

    • url模块

      url.parse(req.url, true);

  2. POST请求

  • let arr = [];
req.on("data", buffer => {
    arr.push(buffer);
   // ...
});

req.on("end", () => {
    Buffer.concat(arr).toString();
});

querystring.parse(req.url); // username=tuyrk&password=123

登陆、注册

接口API、设计API

  • GET ‘/login’

  • 参数：username,password string object

  • 返回值：

    {
  err: 0,
  msg: "xxx"
}

深入学习：express/koa2、MongoDB

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 tuyrk@qq.com

赏

文章标题:1193-前端面试加分福音--node基础

文章字数:2.1k

本文作者:神秘的小岛岛

发布时间:2019-11-16, 21:34:53

最后更新:2019-11-18, 00:42:37

原始链接:https://www.tuyrk.cn/imooc/1193-node-base/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

©2019 神秘的小岛岛

Built with Hexo and 3-hexo theme

备案号：蜀ICP备18020272号-1
目录
×

喜欢就点赞,疼爱就打赏