前端进阶篇 - 悦读

Node.js

1. 第一个nodejs程序

创建一个hello.js 编写 console.log(“hello nodejs”); 在终端运行node hello.js

2. 实现请求响应

// 导入模块 require
const http = require('http');
// 1. 创建一个http服务
http.createServer(function (request, response) {
    // 告诉浏览器以html的方式解析数据
    response.writeHead(200, { 'Content-type': 'text/html' });
    // 给浏览器输出内容
    response.end("<strong>hello server!!!</strong>");
    // 2. 监听一个端口 8888
}).listen(8888);
console.log("你启动的服务是：http://localhost:8888 启动成功");

// 3. 启动运行 node httpServer.js
// 4. 在浏览器访问http://localhost:8888

3. 操作mysql数据库

参考：https://www.npmjs.com/package/mysql

安装mysql依赖
npm install mysql

// 1.导入mysql依赖包,mysql属于第三方模块
var mysql = require("mysql");
// 2. 创建MySQL的connection连接对象
// 3. 配置数据库连接信息
var connection = mysql.createConnection({
    host:"127.0.0.1",
    port:3305,
    user:'root',
    password:'root',
    database:"demo"
});
// 4. 开辟连接
connection.connect();
// 5. 执行crud
connection.query("select * from user", function (error, results, fields) {
    // 如果查询出错，直接跑出
    if (error) throw error;
    // 查询成功
    console.log("result---->",results);
});
// 6. 关闭连接
connection.end();

在这里插入图片描述

因此node.js是一种服务端的语言

ES6

1. let和const

<script>
    // 传统定义变量和常量的方式 统一使用var
    var name1 = "张三";
    var link1 = "https://www.baidu.com";
    var PI1 = Math.PI;
    // ES6定义的方式
    let name2 = "李四";
    let link2 = "https://www.baidu.com";
    // 定义常量
    const PI2 = Math.PI;
</script>

2. 区别

<script>
     // let和const会解决 
     // 1. var的变量穿透的问题 
     for(var i=0;i<5;i++){
          console.log(i);
     }
     console.log(i);// 会打印出 0 1 2 3 4 5,但根据循环只能打印出0 1 2 3 4,这就造成变量穿透

     for(let i=0;i<5;i++){
          console.log(i);
     }
     console.log(i); // 使用let后,就会报错
     // 2. 常量修改的问题
     var PI = Math.PI;
     PI = 3.14;
     // 用var定义的常量可以被修改,使用const后不可修改
</script>

3. 模板字符串

以前使用"" / ‘’ ，现在使用 `

<script>
    var person = {
       name:"张三",
       address:"山东",
       link:"https://blog.csdn.net/weixin_44960905"
   };
   var msg1 = "姓名:"+person.name+"  家乡:"+person.address+"  博客地址为:"+person.link;
   console.log(msg1);
   // ES6 模板字符串
   var msg2 = `姓名:${person.name}  家乡:${person.address}  博客地址为:" + ${person.link}`
   console.log(msg2);
</script>

4. 函数默认参数

<script>
    // 函数默认参数
    function sum(a,b=100){
         return a+b;
     }
     var result = sum(100);
     console.log(result);
</script>

5. 箭头函数

<script>
        // 原来
        var sum = function(a,b){
            return a + b;
        }
        // 箭头函数 简化一
        var sum = (a,b)=>{
            return a + b;
        }
        // 箭头函数 简化二
        var sum = (a,b)=>a+b;

        // 简化步骤：
        // 1. 去掉function
        // 2. 在括号后面加箭头
        // 3. 如果只有return可以直接省去花括号、return、分号;如果有逻辑体,不能省略
        // 4. 如果参数只有一个 括号也可省略
</script>

6. 对象初始化简写

<script>
        let student1 = {
            name:"张三",
            age:12,
            sex:"男",
            sayHi:function(){
                console.log("hello");
            }
        };
        // ES6简写
        // 1: 如果key和value的名字一致，可以只定义一次
        // 2: 如果value是一个函数，可以把:function去掉
        var name = "张三";
        var age = 12;
        var sex = "男";
        let student2 = {
            name:name,
            age:age,
            sex:sex,
            sayHi(){
                console.log("hello");
            }
        };
</script>

<form action="">
        <p>用户名:<input type="text" name="username" id="username"/></p>
        <p>密码:<input type="text" name="password" id="password"></p>
        <input type="button" value="登录" id="loginbtn">
    </form>

    <script>
       // document.getElementById("loginbtn").onclick = function(){};
       $("#loginbtn").click(function(){
            var username = $("#username").val();
            var password = $("#password").val();
            var params = {username,password}; // key与value一致
            $.ajax({
                type:"post",
                url:"",
                data:params,
                success(){  //删除 :function
                }
            });
       });  
    </script>

7. 对象解构

快捷获取对象属性和行为的方式

<script>
        // 获取对象属性和方法的方式
        // 1. .
        // 2. []
        var name = "张三";
        var age = 12;
        var sex = "男";
        let student2 = {
            name: name,
            age: age,
            sex: sex,
            sayHi() {
                console.log("hello");
            }
        };
        // 方式一：通过.的方式
        console.log(student2.age);
        console.log(student2.sex);
        student2.sayHi();
        // 方式二：通过[]的方式
        console.log(student2["age"]);
        console.log(student2["sex"]);
        student2["sayHi"]();
        // 方式三：ES6
        var {age,sex,sayHi} = student2; 
        // 等价于 var age = student2.age; var sex = student2.sex; sayHi();
    </script>

8. 对象传播操作符

把一个对象中的属性传播到另一个对象中

<script>
       let student1 = {
       name: "张三",
       age: 12,
       sex: "男",
       sayHi: function () {
             console.log("hello");
          }   
      };
      // 结构
     var {name,age,...student2} = student1;
     console.log(student2); // student2中只有sex和sayHi,即带...的属性包含对象中所有未结构的属性或方法
</script>

9. 数组Map和reduce

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

 <script>
        var arr = [1,2,3,4,5,6,7,8,9];
        // 对arr中的每一个元素 乘2
        // 方式一
        let newarr1 = [];
        for(let i=0;i<arr.length;i++){
            newarr1.push(arr[i]*2);
        }
        // 方式二 map
        var newarr2 = arr.map(function(item){
            item = item * 2;
            return item;
        });
         console.log(arr); // arr[1,2,3,4,5,6,7,8,9]
        // 方式二使用箭头函数
        var newarr3 = arr.map(item=>item*2);
        console.log(newarr3); // newArr3[2,4,6,8,10,12,14,16,18]
        // 使用map对基本类型数据的数组进行修改时,不会修改原数组
//------------------------------------------------------------------

        var students1 = [
            {name:"小明",age:15},
            {name:"小红",age:16},
            {name:"小三",age:12}
        ];
        console.log(students1);

        var students2 = students1.map(function(student){
            student.age = student.age + 1;
            return student;
        });
        console.log(students2);
        // 需要注意的是 map对对象类型的数组中,对象的属性进行修改时,原数组会发生改变

    </script>

总结：如果数组是基本数据类型的，使用map后，不会对原数组进行修改
如果数组是引用数据类型的，使用map对对象的属性进行修改后，会对原数组进行修改

reduce(function(),初始值(可选))：
接收一个函数(必须)和一个初始值(可选)，该函数接收两个参数：第一个参数是上一次reduce处理的结果，第二个参数是数组中要处理的下一个元素。
reduce()会从左到右依次把数组中的元素用reduce处理，并把处理结果作为下一次reduce的第一个参数。如果是第一次，会把前两个元素作为计算函数，或者把用户指定的初始值作为起始参数。

 <script>
         var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
         // a=1,b=2 
         // a=3,b=3
         // a=6,b=4
         //......
         var newArr = arr.reduce(function(a,b){
             return a + b;
         });
         console.log(newArr); //输出45
</script>

Npm

node：node包管理器，类似于maven
安装完Node之后，系统中就存在了，可用 npm -v 检查版本
作用：

快速构建nodejs工程 npm init 或者 npm init -y 得到一个packge.json的文件类似于 pom.xml文件
快速安装依赖第三方模块

快速安装和依赖第三方模块
1.快速安装第三方模块？
通过npm install xxx 或者 npm i xxx

2.安装模块在什么地方？
在产生的node_modules文件夹中

3.如何使用安装的模块？
const mysql = require(“mysql”);
4.模块和package.json关系？
下载的模块的版本信息会保存在package.json中,如果再建一个新项目可以使用npm install直接package.json中所依赖的模块全部下载下来

5.如果安装很慢？
npm install -g cnpm --registry=https://registry.npm.tabao.org
使用国内镜像 cnpm

6.如何运行？
node xxxx.js .js可省略终止运行 ctrl+c

7.如何下载多个？
npm install vue jquery redis mysql
cnpm install vue jquery redis mysql

8.如何下载指定版本号？
npm install xxx@版本号官方网址：https://www.npmjs.com/package/

9.如何卸载？
npm uninstall vue jquery

Babel

可以将ES6代码转为ES5代码，从而在现有环境执行

安装
npm install -g babel-cli
cnpm install -g babel-cli
查看是否安装成功
babel --version

1.创建babel文件夹
2.初始化项目
npm init -y
3.创建文件src/example.js.

//转码前 定义数据
let input = [1, 2, 3];
// 将数组的每个元素 +1 
input = input.map(item => item + 1);
console.log(input);

4.配置 .babelrc
{
“presets”: [“es2015”],
“plugins”: []
}

5.安装转换器
cnpm install --save-dev babel-preset-es2015

6.转码
babel src -d dist
得到转码后的文件

"use strict";
//转码前 定义数据
var name1 = "张三";
var PI = Math.PI;
var input = [1, 2, 3];
// 将数组的每个元素 +1
input = input.map(function (item) {
  return item + 1;
});
console.log(name1);
console.log(PI);
console.log(input);

自定义脚本：
1.改写package.json
{
“scripts”:{
“build”:“babel src\example.js -o dist\compiled.js”
},
}
2.转码的时候,执行下面命令
mkdir dist
npm run build

模块化

1.CommonJS规范

const sum = function (a, b) {
    return a + b;
}

const sub = function (a, b) {
    return a - b;
}

const mul = function (a, b) {
    return a * b;
}

const div = function (a, b) {
    return a / b;
}

// module.exports = {
//     sum: sum,
//     sub: sub,
//     mul: mul,
//     div: div
// }

module.exports = {
    sum,
    sub,
    mul,
    div
}

const m = require('./四则运算.js');

console.log(m.sum(30,10));
console.log(m.sub(30,10));
console.log(m.mul(30,10));
console.log(m.div(30,10));

2.ES6规范

使用export和import来导入导出
userAPI.js

export function getList() {
    // 在真实业务中,此处需要异步请求后端获取数据
    console.log("获取用户列表");
}

export function save() {
    console.log("保存数据");
}

userTest.js

import {getList,save} from './userAPI.js'
getList();
save();

node userTest.js 运行出错，不支持ES6语法，使用babel进行转码

另一种方式：

export default{
    getList() {
        // 在真实业务中,此处需要异步请求后端获取数据
        console.log("获取用户列表");
    },
    save() {
        console.log("保存数据");
    }
}

import user from './userAPI.js'
user.getList();
user.save();

Webpack

前端资源加载/打包工具，将多种静态资源js、css、less转化成一个静态文件，减少页面的请求

安装：

npm install -g webpack webpack-cli
webpack -v

webpack合并js
1.创建一个nodejs项目, npm init -y
2.创建一个src目录
3.在src存放两个需要合并的js utils.js和common.js
common.js

exports.info = function (str) {
    // 往控制台输出
    console.log(str);
    // 往浏览器输出
    document.write(str);
}

utils.js

// 相加函数
exports.add = (a, b) => a + b;

4.准备一个入口文件main.js，其实就是模块集中进行引入

const util = require('./utils');
const common = require("./common");
common.info("hello world,"+util.add(211,985));

5.在根目录下定义一个webpack.config.js文件配置打包的规则

// 导入path模块  nodejs的内置模块
const path = require('path');
// 定义JS打包规则
module.exports = {
    // 入口函数 从哪里开始编译打包
    entry: './src/main.js',
    // 编译成功后,把内容输出到哪里
    output: {
        path: path.resolve(__dirname, "./dist"), //__dirname 当前项目的根目录
        filename:'bundle.js',
    }
}

6.执行webpack查看效果
webpack合并css
1.安装style-loader和css-loader
webpack本身只能处理javascript模块，如果要处理其他类型的文件，就需要使用loader进行转换
loader可以理解为模块和资源管理器
css-loader是将css装载到javascript，style-loader是让javascript认识css

npm install --save-dev style-loader css-loader

2.修改webpack.config.js

module: {
        rules: [
            {
                test: /\.css$/,//把项目中所有的.css文件进行打包
                use:["style-loader","css-loader"]
            }
        ]
    }

3.创建一个style.css

body{
    background-color: brown;
}

4.在main.js中引入
require(‘./style.css’);
5.webpack