大前端进阶 - 悦读

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，==早期网站主要内容都是静态，以图片和文字为主==，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷。

当下国内的大部分互联网公司只有前端工程师和后端工程师，中间层的工作有的由前端来完成，有的由后端来完成。

1.下载安装VScode

官方网站：https://code.visualstudio.com/

打开然后一直下一步安装即可，文件路径自己配置

2.中文界面配置

1.首先安装中文插件：Chinese (Simplified) Language Pack for Visual Studio Code

2.右下角弹出是否重启，点击Restart

3.汉化成功

4.有些机器重启后如果界面没有变化，则【Ctrl+Shift+p】

5.在搜索框中输入“configure display language”，回车

6.选择’zh-cn’

7.重启

3.插件安装

为方便后续开发，建议安装如下插件

4.设置字体大小

左边栏Manage -> settings -> 搜索 “fonts” -> Font size

5.开启完整的Emmet语法支持

设置中搜索 Emmet：启用如下选项，必要时重启vs(按住Tab可以自动补全)

6.视图

查看—> 外观—> 向左移动侧栏(默认)，也可以看自己喜好

2.Nodejs

1.Nodejs介绍与安装

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

中文官网：http://nodejs.cn/

官网：https://nodejs.org/zh-cn/

介绍：

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的速度非常快，性能非常好。

下载对应你系统的Node.js版本:

安装默认安装即可安装完成之后在命令行窗口查看自己的文件是否安装成功，非常建议默认安装，如不默认安装需要配置环境变量等

小结

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。文件后缀是 js 运行的命令是：node

2.快速入门-Hello World

1.创建文件夹 NodeJs

2.打开文件夹，创建 helloworld.js

//类似于java中的 System.out.println("");
console.log('Hello World!!!')

在终端(Ctrl+`)运行：node helloworld.js

结果：hello world!!!

浏览器的内核包括两部分核心：

DOM渲染引擎
javaScript解析器(js引擎)
js运行在浏览器内核中的js引擎内部

小结

==Node.js是脱离浏览器环境运行的JavaScript程序，基于V8 引擎==

3.Node - 实现请求响应

1.创建httpservlet.js

// 导入模块是require 就类似于import java.io 
const http = require('http');
// 1: 创建一个httpserver服务 http.createServer:在计算机上创建服务
http.createServer(function(request,response){
    // 浏览器怎么认识hello server!!! 
    //writeHead:告诉浏览器  'Content-type':'text/plain':以纯文本(plain)的方式解析hello server 这段数据
    response.writeHead(200,{'Content-type':'text/html'}); //'text/html':以html的方式
    // 给浏览器输出内容 response.end：结束响应，告诉客户端所有消息已经发送
    response.end("<strong>hello server!!!</strong>");
}).listen(8888);  //.listen(8888)：监听的端口
console.log("你启动的服务是：http://localhpst:8888以启动成功!!");
// 2: 监听一端口8888
// 3: 启动运行服务 node httpservlet.js
// 4: 在浏览器访问http://localhost:8888

2.在终端运行服务器程序；node httpservlet.js
3.服务器启动成功后，在浏览器中输入： http://localhost:8888 查看是否成功运行，并输出html页面。
4.停止服务：在终端输入 ctrl + c

4.Node-操作MYSQL数据库

类似于java的jdbc导jar包使用

1.安装mysql依赖(类似于maven的依赖)

在终端输入 npm install mysql

2. 在navicat 新建数据库testnodejs_js，新建表sm_user，设计表，添加字段

3.新建并定义db.js进行操作

//1: 导入mysql依赖包,  mysql属于第三方的模块就类似于 java.sql一样的道理
var mysql = require("mysql");
// 1: 创建一个mysql的Connection对象
// 2: 配置数据连接的信息 
var connection =mysql.createConnection({//createConnection：建立连接
    host:"127.0.0.1",
    port:3306,
    user:"root",
    password:"000000",
    database:"testnodejs_db"  //你要连接的数据库名
});
// 3：开辟连接：connect
connection.connect();
// 4: 执行curd
connection.query("select * from sm_user",function(error,results,fields){
    // 如果查询出错，直接抛出
    if(error)throw error;
    // 查询成功
    console.log("results = ",results);
});
// 5: 关闭连接
connection.end();
// 最后一步：运行node db.js 查看效果

4.在终端运行db.js

如果想开发更复杂的基于Node.js的应用程序后台，需要进一步学习Node.js的Web开发相关框架 express，art-template、koa等。

3.Es6

1.ES6的概述

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

ECMAScript的快速发展：

编程语言JavaScript是ECMAScript的实现和扩展。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。

[类型]– 布尔型、数字、字符串、对象等。

[原型和继承]

内建对象和函数的

[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似[node.js]的非浏览器环境。

ECMAScript标准的历史版本分别是1、2、3、5。

那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。

ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话

ECMAScript是一门充满活力的语言，并在不断进化中。

未来版本的规范中将持续进行重要的技术改进

2009年发布的改进版本ES5，引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[严格模式]以及[JSON]对象。

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