JAVAEE细细看框架15 - NodeJS & ES6

1. NodeJS

1.1 概述

Node.js是一个运行代码和处理web请求的平台。其内置了chrome浏览器的v8引擎.

Node.js相当于Java中的JDK和Tomcat的结合体.

1.2. Nodejs模块化编程

概述：所谓的模块化编程,其实就是让当前js文件可以调用另外一个js文件中的代码.

步骤：

exports.名字=函数/变量 把方法、变量给导出
var 对象名 = require(“目标js文件的相对路径”) 引入
对象名.函数/变量 使用方法、变量

注意：

require()中,一般都写相对路径, 而且,在同一级目录下时,不能省略**./**
省略**./** 代表引入node.js的内置模块
如果路径想写绝对路径,则必须写磁盘绝对路径

扩展:

exports也可以写为module.exports

module代表当前模块对象

1.3. 创建Nodejs Web服务器

概述：使用node.js, 搭建一个web服务器

步骤：

1.引入node.js的内置模块-http

2.调用引入模块的方法,创建web服务器,并监听指定端口

3.处理请求,响应数据

案例:

//1.引入node.js的内置模块-http
var http = require("http");
//2.调用引入模块的方法,创建web服务器,并监听指定端口
http.createServer(function (request, response) {

    //发送http头部
    //参数1：响应状态码，200表示成功
    //参数2：响应头部信息，Content-Type内容类型：包含了html代码的文本
    response.writeHead(200, {"Content-Type": "text/html;charset=utf-8"});

    //发送响应数据
    response.end("<h1>hello node.js!!!</h1>");
    
}).listen(8888);	//监听8888端口,这时,只要运行当前js文件,则服务就启动了

//打印数据
console.log("服务器运行在 http://127.0.0.1:8888 ");

1.4. 处理Nodejs中Web请求参数

1.4.1 GET请求

需求：获取GET请求http://127.0.0.1:8888?id=123&name=test中的参数并输出

步骤：

创建web服务器；
引入url模块；
利用url解析请求地址中的参数和值并输出
启动测试；

案例：

//1.引入node.js的内置模块-http
var http = require("http");
//2.引入url模块,用来解析get请求的参数
var url = require("url");

//3.调用http模块的createServer方法,创建web服务器,并监听指定端口
http.createServer(function (request, response) {

    // 4.通过url模块的parse方法,处理请求参数
    //   结果是 {username:'zhangsan', age:'23'}
    var params = url.parse(request.url, true).query;

    // 5.设置响应头
    response.writeHead(200, {"Content-Type": "text/html;charset=utf-8"});
    // 6.遍历处理结果,并响应回前台页面
    for(var key in params){
        response.write( key + " = " + params[key]);
        response.write("\n");
    }
    response.write("<h1>hello node.js!!!</h1>");
    // 7.响应结束
    response.end("");

}).listen(8888);

console.log("服务器运行在 http://127.0.0.1:8888?username=zhangsan&age=23");

1.4.2 POST请求

需求：获取POST请求中的参数并输出

步骤：

创建web服务器；
引入querystring模块；
利用querystring解析请求地址中的参数和值并输出
启动测试；

案例：

//1.引入node.js的内置模块-http
var http = require("http");
//2.引入querystring模块（解析post请求数据）
var querystring = require('querystring');

//3.调用http模块的createServer方法,创建web服务器,并监听指定端口
http.createServer(function (request, response) {

    //4.获取POST请求中的参数
    //4.1.创建空字符,用来叠加post请求中的数据片段
    var data = '';
    //4.2.注册data事件,用来接收数据（每当收到一段表单提交的数据，该方法会执行一次）
    request.on('data', function (chunk) {
        data += chunk;
    });
    //4.3.注册end事件，所有数据接收完成后, 执行该方法
    request.on('end', function () {
        //4.4.对url进行解码（url会对中文进行编码）
        data = decodeURI(data);
        //4.5.使用querystring的parse方法,对参数进行解析
        //    结果是 {username:'zhangsan', age:'23'}
        var dataObject = querystring.parse(data);
       
        // 注意,必须在该end事件内部,对参数进行处理,否则,参数获取不到
        // 5.设置响应头
        response.writeHead(200, {"Content-Type": "text/html;charset=utf-8"});
        // 6.遍历处理结果,并响应回前台页面
        for (var key in dataObject) {
            response.write("---" + key + " = " + dataObject[key]);
            response.write("\n");
        }
        response.write("<h1>hello node.js!!!</h1>");
    	// 7.响应结束
    	response.end("");
    });


}).listen(8888);

console.log("服务器运行在 http://127.0.0.1:8888");

1.5. 包资源管理器NPM

概述：

npm其实就是一个专门用来下载JS文件的一个工具. 其操作类似于Maven.

在前端开发中,会使用到各种各样的js文件, 为了下载js方便,所以就有了npm

1.5.1 下载JS文件

命令：

npm install 模块名		#本地安装(下载)指定模块(JS文件)
npm install 模块名	-g	#全局安装(下载)指定模块(JS文件)

区别：

本地安装：将下载的模块(JS文件), 安装到当前项目中；

全局安装：将下载的模块(JS文件), 安装到全局目录中, 以便于在windows命令行窗口中使用

1.5.2 其他操作

① 切换NPM镜像

Npm在下载js文件时, 默认使用的是国外的服务器, 如果想快速下载指定的js的话,就需要切换npm的默认下载路径, 或者使用cnpm来下载

## 使用nrm 切换镜像源
npm install nrm -g
nrm use taobao

## 使用cnpm下载
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install 模块名

② 初始化项目

Npm可以用于对项目进行初始化. 可以根据当前项目所引用的资源(JS)来生成一个package.json文件

该文件的内部, 详细描述了当前项目的基本信息

命令：

npm init -y		#初始化当前项目,根据当前项目资源状况,生成项目的package.json文件

文件内容：

{
  "name": "ittest_test",//项目名
  "version": "1.0.0",    //项目版本
  "description": "",     //项目描述
  "main": "demo1.js",    //项目的入口js文件
  "scripts": {           //js脚本,执行 npm run test, 相当与执行"echo \"Error: ..."
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",          //作者
  "license": "ISC",      //许可证，可以使人知道使用的权利和限制的。
  "dependencies": {      //生产环境的依赖(项目正常运行所需要的js文件,在项目打包时,会把这些内容给包含进去)
    "jquery": "^1.11.3"
  },
  "devDependencies": {   //开发环境的依赖(项目开发阶段所需的js文件,在项目打包时,不会把这些内容给包含进去)
    "css-loader": "^3.0.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "style-loader": "^0.23.1",
    "babel-preset-es2015": "^6.24.1"
  }
}

1.6. WebPack打包

**概述: **

可以将多个静态资源js、css等打包成一个js文件。换句话说, 就是所谓的webpack可以把多个文件合并.

webpack在使用之前需要先进行安装.

安装：

npm install webpack -g
npm install webpack-cli -g

1.6.1 打包JS

目标：创建2个js文件，使用webpack命令打包js文件到 dist/bundle.js 文件中并测试。

分析：

实现步骤：

创建2个js文件；
创建入口文件main.js；
创建webpack的配置文件；
运行webpack命令；
创建index.html页面进行测试

小结：

webpack打包js的配置文件(webpack.config.js)：

var path = require("path");

module.exports = {
    //入口文件
    entry: "./src/main.js",
    output: {
        //路径
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    }
}

webpack可以将多个js文件打包成一个js

1.6.2 打包css

目标：

安装style-loader css-loader组件，创建并使用css文件，使用webpack命令打包js文件到 dist/bundle.js 文件中并测试。

cnpm install style-loader css-loader --save-dev
cnpm install less less-loader --save-dev

分析：

实现步骤：

安装转换css的组件；
修改配置文件；
创建css文件；
修改入口文件，加载css文件；
打包并测试

小结：

webpack打包css文件需要安装转换的组件，并修改配置文件：

var path = require("path");

module.exports = {
    //入口文件
    entry: "./src/main.js",
    output: {
        //路径
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

2. ES6概述&创建测试工程

概述：

ES6, 其实就是ECMAScript的第6代版本, 所以, 所谓的ES6, 其实就是JS的新语法,新特性

2.11. let和const命令及模板字符串

概述：

let 用来定义变量, let定义的变量只能在它所在的代码块中使用

const 用来定义常量，常量值不允许改变

模板字符串：

也是字符串, 但内容可以随意换行

内部可以使用**${变量}**来直接引用某个变量

案例:

//let命令-定义变量
let a = 10;  //相当于原来的 var a = 10,  let定义的为局部变量,不能自动提升作用域

//const命令-定义常量
const b = 20;  //该常量不允许修改'

//模版字符串
let s = `这里边可以引入数据${b},也可以随意换行`;
//1.可以随意换行
//2.可以使用${变量},直接引用某个变量

2.12. 解构表达式

概述：

可以对数组、对象的元素或者属性按顺序、名称的方式进行赋值到对应变量中。

案例:

//定义变量(对象)
let arr = [2,3,4];
//定义三个变量 -> x,y,z
// 1.把arr中的第0个元素赋值给x
// 2.把arr中的第1个元素赋值给y
// 3.把arr中的第2个元素赋值给z
let [x, y, z] = arr;
console.log(x);
console.log(y);
console.log(z);
console.log("-----------------------");

//定义变量(对象)
let person = {name: "test", age: 13, language: ["java", "js", "css"]};
//定义三个变量 -> name,age,language
// 1.把person中的name属性的值,赋值给变量name
// 2.把person中的age属性的值,赋值给变量age
// 3.把person中的language属性的值,赋值给变量language
let {name, age, language} = person;
console.log(name);
console.log(age);
console.log(language);
console.log("-----------------------");

2.13. 函数优化

目标：箭头函数的好处；对象的函数属性简写，箭头函数与解构表达式的应用

小结：

箭头函数：可以不用编写基础函数的解构（如：function），直接使用 =>

        var print = function (obj) {
            console.log(obj);
        };
        print("print");
        //箭头函数
        var print2 = obj => console.log(obj);
        print2("print2");

        var sum = function (a, b) {
            return a+b;
        };
        console.log(sum(1,2));

        //箭头函数
        var sum2 = (a,b) => a+b;
        console.log(sum2(1,2));

        var sum3 = (a,b) => {
            console.log(a+b);
            return a+b;
        };
        console.log(sum3(1,2));

        let person = {
            "name": "test",
            learn1: function (course="java") {
                console.log(this.name + " 在学习 " + course);
            },
            //箭头函数；不能使用this
            learn2: (course) => console.log(person.name + " 在学习 " + course),
            //简写
            learn3(course){
                console.log(this.name + " 在学习 " + course);
            }
        };
        person.learn1("java");
        person.learn2("js");
        person.learn3("css");

        const person = {
            name:"test",
            age:13,
            language:["java","js","css"]
        };
         function hello(person) {
             console.log("hello " + person.name);
         }
         hello(person);

         //箭头函数、解构表达式
        var hello2 = ({name}) => console.log("hello2 " + name);
        hello2(person);

2.14. map方法使用

目标：数组中map方法的应用场景

小结：

map方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组。

2.15. reduce方法使用

目标：数组中reduce方法的应用场景

小结：

reduce方法会从左到右依次把数组中的元素用函数处理（reduce方法的第一个参数），会返回一个执行结果。

let arr = [1, 2, 3]

arr.reduce((a,b)=>a+b)

第1次：(1,2) => 1+2

第2次：(3, 3) => 3+3 --------》 6

2.16. promise应用示例

目标：promise的应用场景及示例

小结：

promise是一个对象，保存着预期事件执行的结果；可以应用在异步操作时候，指定异步操作的成功与失败的结果。

const promise = new Promise(function (resolve, reject) {
    setTimeout(()=>{
        let num = Math.random();
        if(num < 0.5){
            resolve("操作成功！num=" + num);
        } else {
            reject("操作失败！num=" + num);
        }
    },300);
});

promise.then(function (msg) {
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
});

2.17. 对象的扩展方法使用

目标：Object对象中的keys/values/assign的作用

小结：

Object的方法：

keys：获取对象的属性名
values：获取对象的属性值
entries：获取对象的属性和属性值
assign：可以将对象进行拷贝

2.18. 数组的扩展方法使用

目标：数组中的find/findIndex/includes的作用

小结：

数组的扩展方法：

find：根据函数条件查找数组中符合条件的元素
findIndex：与find类似，返回的不是元素而是元素对应的索引号
includes：判断指定的元素是否存在

2.19. 安装babel

目标：安装babel及了解babel的作用

小结：

babel是一个javaScript语法编译器，可以将es6的语法进行转换并执行。

需要安装babel：

cnpm install babel-preset-es2015 --save-dev 
cnpm install babel-cli -g

编写.babelrc文件，指定es的版本

可以通过命令去执行对应的js文件：babel-node

2.20. export和import联合应用

目标：export和import的联合应用场景；使用export导出模板文件，import引入模板文件

小结：

可以通过export导出模块，通过import导入模块并使用其内容。

导出有两种方式：命名导出和默认导出。

因为浏览器默认不支持export和import命令，所以需要安装babel对export和import进行解析和执行。

ZMW_iOS

发布了78 篇原创文章 · 获赞 30 · 访问量 3628

私信关注