什么是前端和后端

后端的主要工作

  1. 后端为前端程序员暴露API接口；
  2. 后端也要操作数据库；
  3. 优化后端业务的性能；

前端的主要工作

  1. 绘制网页的页面（HTML）
  2. 写CSS样式美化页面、写JS做网页交互（更多的是网页的特效）
  3. 借助于 XHR（.get $.post）请求后端的接口；实现前后端分离开发
  4. 使用前端的（框架）去完成界面的开发
  5. 总结：前端的主要工作：用户能看到的东西，基本上都是前端做出来；

前后端协作流程

  • 将来进入工作，大家会接触到【前后端分离开发】；
  • 协作开发的流程：后端为我们暴露数据接口，前端单纯的调用后端接口；
  • 在当前Node阶段中，我们学习的是 后端开发；
  • 在Node阶段，我们主要教大家如何写后端的接口；

环境安装

LTS 和 Current 版本区别

  1. LTS 是长期稳定版的意思（这个安装包用起来比较稳定）【推荐在企业中使用】
  2. Current 是最新特征版，这个安装包中有最新的Node特性，但是，可能有一些潜藏的Bug未解决；【推荐学习或尝鲜去使用】

下载安装

查看 Node 版本号

打开终端，在命令行输入命令node -v即可如何进入终端呢？

  1. 使用快捷键windows徽标 + R打开运行面板，输入 cmd 后直接回车；
  2. 在任意目录的空白位置，先按住shift键不松开，然后，在空白位置，鼠标右键单击，会出来一个右键菜单，选择在此处打开 powershell/cmd 窗口【将来第二种方式用的会多一些】

环境变量

什么是环境变量

Path环境变量的作用：能够让我们通过命令行的形式，快速启动一些应用程序；

系统环境变量和用户环境变量的区别
  1. 用户环境变量，是每个用户私有的，用户之间不会共享；
  2. 全局环境变量，是共享的，只要你能登录这台计算机，就能访问到全局的环境变量；【今后在配置环境变量的时候，推荐直接配置到系统环境变量】
通过命令行快速启动应用程序时，路径的查找规则
  1. 先在当前 cmd 终端的目录中查找，如果有则直接运行；
  2. 如果当前目录中没有，则去全局的path环境变量中查找；

浏览器中的 JavaScript

Javascript的诞生

  1. JS 诞生 和 网景公司 有关；form
  2. JS 诞生的需求，就是为了做客户端表单验证的；
  3. JS作者刚把JS创建出来之后，它叫 LiveScript -> Javascript

浏览器一战

主角是 IE 和 网景浏览器；

  1. 一战的果实：ECMAScript 规范的确立！
  2. 短暂的和平期：在和平期阶段，JS都在做什么事情呢（进行表单的验证、做简单的网页动效、狗皮膏药），一战之后，JS能力有限，当时被称作是“脚本语言”

浏览器二战

在 2008 年，二战开始了；谷歌chrome、IE、火狐（浴火重生）在 2008 年，谷歌 利用 XHR 这个对象，实现了网页的局部刷新；2010 - 2013年左右，公司中，不管是Java，还是.NET, 还是 PHP（会不会Ajax）

  1. 二战的果实：XHR 对象的诞生； chrome 浏览器的 JS V8 解析引擎；

注意

在 一战 和 二战期间，JS 只能运行在 浏览器中；浏览器中的JS组成部分：ECMAScript核心 + DOM + BOM浏览器属于前端环境，所以，之前的JS只运行在前端浏览器中；也就是，无法使用Javascript实现后端编程；

Node中的Javascript

Node.js 的诞生，解放了Javascript，从此之后，Javascript 就可以在 服务器端运行了；

ECMAScript

Node中的Javascript也有一个ECMAScript核心

没有 BOM 和 DOM

Node中并没有浏览器的概念，所以，BOM和 DOM ，Node中不需要，因此，就把它们给剔除了；

全局成员

  1. console
  2. setInterval
  3. setTimeout
  4. ...其它全局成员

模块系统

  1. Node中自己扩展出来的一套API规范

Node中的JS组成部分

ECMAScript核心 + 全局成员 + 模块系统成员（这是Node平台所独有的）全局成员（console.log, setTimeout setInterval）模块系统成员（就是Node中的一些核心模块，提供了一些后端编程的能力）

ECMAScript 规范 和 浏览器中的JS 以及 Node 中的 JS 之间的关系

  1. ECMAScript 规范（标准）：就是一本书，这本书中记录了基本的语法定义；
  2. 浏览器中的 JS：浏览器中的JS是一门具体的编程语言，实现了 ECMAScript 规范；
  • 浏览器中的JS组成部分： ECMAScript 核心 + DOM + BOM
  1. Node中的JS：也是一门具体的编程语言，也实现了 ECMAScript 规范；
  • Node中的JS组成部分： ECMAScript 核心 + 全局成员 + 模块系统成员

画图说明 浏览器中JS 和 Node中JS的区别

总结-什么是 Node.js

基于 Chrome 的V8 JS 解析引擎之上，解放了Javascript的编程能力，为 Javascript 提供了 后端编程的能力；所以说，Node.js 是 一个后端编程的平台，用到的语言是Javascript；

Node.js 环境中执行JS代码的两种方式

REPL 环境

  1. 如何进入 REPL 环境： 打开任意终端，直接输入 node 并回车，就会进入到 REPL 环境中；
  2. 如何离开 REPL 环境：按两次ctrl + c 就能退出 REPL 环境；
  3. REPL中，每个字母代表什么意思呢：
  • R： Read 的意思，每当我们输入完毕代码之后，只要敲击回车，Node环境就会读取用户输入的代码
  • E：Evaluate 的意思，表示把 Read 进来的用户代码，调用 类似于 Eval 的函数，去解析执行
  • P：Print 输出的意思；把第二步中解析执行的结果，输出给用户；
  • L：Loop 循环的意思，表示当输出完毕之后，进入下一次的 REP循环

node 命令【推荐形式】

直接使用node 要执行的js文件的路径 来执行指定的JS文件

  1. 使用 ↑ 快速定位到上一次执行的命令
  2. 使用 tab 键能够快速补全路径
  3. 使用 cls 可以清屏

ECMAScript 6常用语法

let 与 const

之前定义变量，用 var 关键字，用var有没有缺点：1. 变量提升问题 2. 没有块级作用域let特性：

  • 没有变量提升
  • 有 { } 作用域const特性：
  • 没有变量提升的问题
  • const 定义的常量，无法被重新赋值
  • 当定义常量的时候，必须定义且初始化，否则报语法错误

变量的解构赋值

所谓的解构赋值，就是把 某个对象中的属性，当作变量，给解放出来，这样，今后就能够当作变量直接使用了

  • 可以使用 :为解构出来的变量重命名
// 变量的解构赋值
  const { name : name123, age, gender } = person
  console.log(name123)

字符串扩展

  1. 模板字符串
  2. startsWith() 和 endsWith()
  • startsWith() 用来判断字符串，是否以指定的字符开头，如果是，返回值是 true，否则返回 false
  • endsWith() 用来判断字符串，是否以指定的字符结尾；如果是，返回值是 true，否则返回 false
  1. padStart() 和 padEnd()

函数扩展

  1. 形参默认值
function add(x, y = 0) {
    return x + y;
  }
  1. 解构赋值和形参默认值结合使用
  2. rest参数
// ------------------rest参数-------------------
    function add(...args) {
      console.log(args instanceof Array)

     let total = 0
     args.forEach(item => {
       total += item
     })
     console.log(total)
   }

   add(1, 2, 3, 4)
  1. 扩展运算符
// ----------------------扩展运算符--------------
    function add(...values) {
      let total = 0
      values.forEach(item => {
        total += item
     })

     console.log(total)
   }

   const arr = [1, 2, 3]
   add(...arr)

箭头函数【今后我们会每天写箭头函数的】

  1. 如何把 function 改成 箭头函数呢： 先把 function 删掉，然后，在 () 和 { } 之间，添加一个 => 就好了
  2. 箭头函数的特性： 箭头函数内部的 this, 永远和 箭头函数外部的 this 保持一致；
  3. 箭头函数，本质上就是一个匿名函数
  4. 最标准的箭头函数格式是 ( 参数列表 ) => { 函数体 }
  5. 变体1： 如果 箭头函数左侧的 形参列表中，只有一个 形参，那么，( ) 可以省略 ( x ) => { console.log(x) } 可以改造成 x => { console.log(x) }
  6. 变体2：如果 箭头函数右侧的 函数体中，只有一行代码，那么， { } 可以省略 (x, y) => {console.log(x + y)} 可以改造成 (x, y) => console.log(x + y)
  7. 变体3：如果箭头函数 左侧 只有一个形参，右侧只有一行代码，那么， 左侧的 () 和 右侧的 {} 都可以省略 ( x ) => { console.log(x) } 可以改造成 x => console.log(x)
  8. 注意： 如果我们省略了 右侧的 { }， 那么，默认就会把 右侧函数体中的代码执行结果，返回出去 (x, y) => { return x + y } 可以简写成 (x, y) => x + y

对象中定义方法和属性的便捷方式

文件操作

文件读取

文件写入

文件追加

fs模块中路径操作问题【难点】

读取文件信息 fs.stat

读取指定目录中所有文件的名称 fs.readdir

练习：

  1. 复制指定的 1.txt 文件，并重命名为 1 - copy.txt
  2. 整理成绩.txt文件中的数据到成绩 - ok.txt文件中，整理好的文件中，格式类似于：
小红：99
小白：100
小黄：70
小黑：66
小绿：88

路径操作

  1. path.join([...paths])
  2. path.sep
  3. path.basename(path[, ext])
  4. path.dirname(path)
  5. path.extname(path)