【jeecg-boot项目开发crm】：平台技术点——day03【 Node.js 入门、ES6基础、Npm 命令、Babel、模块化、Webpack】：狂神教程

本文档介绍了Node.js的基础知识，包括安装、创建HTTP服务器以及操作MySQL数据库。同时，深入讲解了ES6的新特性，如let和const命令、模板字符串、函数默认参数、箭头函数、对象初始化简写、传播操作符、数组map和reduce方法。此外，还探讨了模块化、NPM、Babel、Webpack及其在实际开发中的应用。

狂神教程文档

一、Node.js

1.1 Node.js介绍与安装

目标：了解nodejs、并且在本地安装好这个软件

官网： http://nodejs.cn/

一路安装，cmd中输入node -v，如果能出来版本号就证明安装成功了
并且，新版本安装后会自带npm，也可以输入npm -v，来查看

介绍：

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。
简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。底层架构是：javascript. 文件后缀：.js
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

1.2.2、Node - 实现请求响应

创建httpserver.js

// 导入模块是require 就类似于import java.io 
const http = require('http');	//*****
// 1: 创建一个httpserver服务
http.createServer(function(request,response){
   
   
    // 浏览器怎么认识hello server!!! 
    response.writeHead(200,{
   
   'Content-type':'text/plain'}); //这句话的含义是：告诉浏览器将
    // 以text-plain去解析hello server 这段数据。
    // 给浏览器输出内容
    response.end("<strong>hello server!!!</strong>");
}).listen(8888);
console.log("你启动的服务是：http://localhpst:8888以启动成功!!");
// 2: 监听一端口8888
// 3: 启动运行服务 node httpserver.js
// 4: 在浏览器访问http://localhost:8888

运行服务器程序；
node httpserver.js
停止服务是ctrl + c

1.2.3、Node-操作MYSQL数据库【了解，学习里面安装第三方依赖的模块】

官方文档没有mysq的模块
需要自己去依赖对应的模块（第三方的）
参考：https://www.npmjs.com/package/mysql
1：安装mysql依赖
npm install mysql：就会下载到前端项目目录中node_modules下

在这里插入图片描述

二、ES6

2.1、ES6的概述

在这里插入图片描述

制定JavaScript规范，标准和语法的组织，这些组织是浏览器的厂商（谷歌，火狐等等）

ECMAScript的快速发展：

在这里插入图片描述

ES6前是Jquery的天下。
ES6: 是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

小结：

ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。
它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。
新技术的学习只是提高我们的开发效率

2.2、ES6的语法：let和const命令

原来变量和常量都是var
变量和常量的严格区分（改进）。

let：变量
const：常量

核心代码：

创建一个ES6文件夹，新建E:\study\ES6\01-let和const定义.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //传统定义变量和常量的方式，var
        var name = "海马体";
        var link = "http://www.ceeeeb.com";
        var PI = Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);

        //ES6定义的方式
        let name2 = "海马体";
        let link2 = "http://www.ceeeeb.com";
        console.log(name2);
        console.log(link2);

        //定义常量
        const PI2 = Math.PI;
        console.log(PI2);

    </script>
</body>
</html>

运行如下：

直接用浏览器打开之后，按F12即可在console中看到结果

注：启动默认模板`! + space`就可以创建

如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

let，const和var的区别

let和const解决var的变量穿透问题，和常量修改的问题

变量穿透问题的演示

 for(var i = 0; i < 5; i++){
     console.log(i);
 }
 //这里结果是5，就造成了变量穿透
 console.log(i);

在这里插入图片描述
解决：就是将var改为let，这样编译之后就会报错

 for(let i = 0; i < 5; i++){
     console.log(i);
 }
 //这里结果是5，就造成了变量穿透
 console.log(i);

在这里插入图片描述
2. 常量修改问题（正常比如PI常量修改它没有任何意义，但是var可以修改）

//2常量修改的问题的演示
var PI = Math.PI;
PI = 100;
console.log(PI);

在这里插入图片描述

这里就将PI修改成了100
解决：用const代替var，这样编译之后就会报错

const PI = Math.PI;
PI = 100;
console.log(PI);

在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>

【jeecg-boot项目开发crm】：平台技术点——day03【 Node.js 入门、ES6基础、Npm 命令、Babel、模块化、Webpack】：狂神教程

一、Node.js

1.1 Node.js介绍与安装

二、ES6

2.1、ES6的概述

ECMAScript的快速发展：

小结：

2.2、ES6的语法：let和const命令

核心代码：

运行如下：

注：启动默认模板! + space就可以创建

let，const和var的区别

注：启动默认模板`! + space`就可以创建