大前端进阶

最新推荐文章于 2024-06-14 11:01:38 发布

Nakano_May

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量154

点赞数

文章标签：前端 java javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_53729147/article/details/127790906

版权

1、NodeJs

1.1、NodeJs安装与介绍

目标了解nodejs，并且在本带安装好这个软件

官网：http://nodejs.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版本:

下载地址：https://nodejs.org/zh-cn/download

帮助文档：https://nodejs.org/zh-cn/docs

关于Nodejs：https://nodejs.org/zh-cn/about

安装默认安装即可，安装完成之后，查看是否安装成功：

node -v

小结：

NodeJs是一门计算机语言，运行在系统中的v8(jvm)引擎中。文件的后缀是  js  运行的命令是： node

对于NodeJs中常用模块的了解：https://blog.csdn.net/weixin_48255917/article/details/115612417

1.2、Nodejs入门

目标：控制台输出字符串、使用函数、进行模块化编程

1、创建文件夹 nodejs

2、创建 helloword.js

类似于java中的 System.out。println(“”);

console.log("Hello Word!!!");

运行： node helloword.js

结果：hello word!!!

3、打开命令行终端：Ctrl + Shift + y || command + shift + y 然后切换终端 || control + `(就是反引号)

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

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

小结

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

1.3、Node - 实现请求响应

1、创建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("hello server!");
 }).listen(8888);
 console.log("你启动的服务是:http://localhost:8888以启动成功!");
 // 2：监听一端口8888
 // 3：启动运行服务 node httpserver.js
 // 4: 在浏览器访问http://localhost:8888

2、运行服务器程序：

node httpserver.js

3、服务器启动成功后，在浏览器输入：http://loaclhost:8888/ 查看webserver成功运行，并输出html页面

4、停止服务： ctrl + c || control + c

1.4、Node - 操作MySQL数据库

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

1、安装mysql依赖

npm install mysql

这里需要在文件夹里面创建node_modules然后安装npm install mysql依赖就会将其自动导入进去！

2、定义 db.js 进行操作

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

3、新建数据库：debtest 和表 kss_user表

DROP TABLE IF EXISTS `kss_user`;
CREATE TABLE `kss_user`  (
  `id` int(11) NOT NULL,
  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
-- ----------------------------
-- Records of kss_user
-- ----------------------------
INSERT INTO `kss_user` VALUES (1, '学相伴');
INSERT INTO `kss_user` VALUES (2, '广东');
SET FOREIGN_KEY_CHECKS = 1;

这里可能会遇到的问题：

node Js：默认不支持8.0网上说，所以如果遇到连接不上数据库那么请试试下面的这个解决方案：https://blog.csdn.net/bianxia123456/article/details/118358652

Navicat连接mysql报错：Client does not support authentication protocol requested by server；

解决方案如下：

1、use mysql;
2、alter user 'root'@'localhost' identified with mysql_native_password by '********';  —这里的*****就是你mysql的密码
3、flush privileges;

4、运行 db.js

ndoe db.js

2、ES6

2.1、ES6的概述

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语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

小结：

ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。

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

变量和常量的严格区分

新建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 = "https://www.kuangstudy.com";
        var PI = Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);

        // ES6的定义方式
        let name2 = "学相伴";
        let link2 = "https://www.kuangstudy.com";
        const PI2 = Math.PI;
        console.log(name2);
        console.log(link2);
        console.log(PI2);
    </script>
</body>
</html>

运行浏览器，查看结果：

ES6/02-let-const和var的区别：

<!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>
        // let 和 const解决
        // 1.var的变量穿透问题
        // 2.常量修改的问题
        for(let i=0;i<5;i++){
            console.log(i);
        }

        // 这里就造成了变量穿透 编译失败在java中
        // console.log(i);

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

        // 在实际开发和生产中，如果是小程序，uniapp或者一些脚手架中，可以大胆的使用let与const
        // 但是如果你是web开发，建议使用var ，因为在一些低版本的浏览器还是不支持let和const
    </script>
</body>
</html>

2.3、ES6的语法：模板字符串

以前：我们都是使用‘’ 或者“”来把字符串套起来

现在：``[反引号]

ES6/03-模板字符串.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 person = {
            name:"飞哥粉丝",
            address:"广东学相伴",
            link:"https://www.kuangstudy.com"
        };
        
        let address = "传统--我是"+person.name+"正在"+person.address+"学习，并且观看视频，在官网："+person.link+"平台";
        console.log(address);

        // 这里直接使用反引号，然后通过${}进行拼接
        let address2 = `ES6--我是${person.name}正在${person.address}学习，并且观看视频，在官网：${person.link}平台`;
        console.log(address2);
    </script>
</body>
</html>

2.4、函数默认参数

函数默认参数：在方法的参数后面加上一个默认值即可

ES6/04-函数默认参数.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>
        // 函数默认参数
        // 这里如果a，b没有赋值，默认是undefined
        function sum(a=100,b=100){
            return a+b;
        }
        // 设置了默认的参数之后这里可以不写
        // 如果只写一个100 输出结果为NaN
        var result = sum(100);
        console.log("result:",result);
    </script>
</body>
</html>

2.5、箭头函数

箭头函数

箭头函数简化函数的定义，可以让我们不用使用function关键字

箭头函数最直观的三个特点：

不需要function关键字来创建函数
省略return关键字
继承上下文的this关键字

ES6/05-箭头函数.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>
        // 箭头函数 - 重点 (在未来的项目开发中：比如小程序，uniapp，一些常见的脚手架)
        var sum = function(a,b){
            return a+b;
        }

        // 箭头函数 改进1
        var sum = (a,b)=>{
            return a+b ;
        }
        // 箭头函数 改机2
        var sum = (a,b) => a+b;

        // 通过上面的例子你发现了什么规律
        // 1.去掉function
        // 2.去掉括号后面加箭头
        // 3.如果逻辑代码中只有return可以直接省去。(如果有逻辑题，就不能使用)，比如
        // 4.如果参数只有一盒，就可以把括号也省去(如果有多个参数就不能省去)，比如
        var sum2 = (a,b)=>{
            var num = a+b;
            return num;
        }

        // var sum = (a,b)=>a + b;
        var arr = [1,2,3,4,5,6];
        // var newarr = arr.map(function(obj){
        //     return obj * 2;
        // });
        // 改变
        var newarr = arr.map(obj=>obj * 2);
        console.log(newarr);
    </script>
</body>
</html>

2.6、对象初始化简写

它是指：如果一个对象中的key和value的名字一样的情况下可以定义成一个

ES6/06-对象简写.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>
        let info = {
            title:"广东学相伴",
            link:"http://www.kuangstudy.com",
            go:function(){
                console.log("我骑着小黄车来上班");
            }
        };

        let title = "广东学相伴";
        var link = "https://www.kuangstudy.com";
        var link
        let info2 = {
            title,
            link,
            go(){
                console.log("我骑着小黄车来上班");
            }
        }
        console.log(info2);
        console.log(info2.title);
        console.log(info2.link);
        info2.go();
    </script>
</body>
</html>

ES6/06-对象简写案例.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>
    
    <form action="">
        <p>账号：<input type="text" id="account"></p>
        <p>密码：<input type="text" id="account"></p>
        <p><input type="button" value="登录" id="loginbtn"></p>
    </form>

    <script>
        // document.getElementById("loginbtn").onclick = function(){}

        $('#loginbtn').on("click",function(){
            var account = $("#account").val();
            var password = $("#password").val();
            // 对象简写的应用场景
            var params = {account,password};
            // 执行异步请求
            $.ajax({
                type:"post",
                url:"xxx",
                /* 原始写法：
                data:{account:account,password:password},
                success:function(){

                }*/
                data:params,
                success(){

                }
            })
        });

    </script>

</body>
</html>

2.7、对象解构

对象解构 —- es6提供一些获取快捷获取对象属性和行为方式

ES6/07-对象解构.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>
        // 对象是通过key：value存在，获取对象的属性和方法的方式有两种
        // 1：通过 .
        // 2：通过 []

        var title = "广东学相伴";
        var link = "https://www.kuangstudy.com";
        var link
        let info2 = {
            title,
            link,
            go(){
                console.log("我骑着小黄车来上班");
            }
        };

        // 通过.的方法
        console.log(info2);
        console.log(info2.title);
        console.log(info2.link);
        info2.go();

        // 通过[]的方法
        console.log(info2);
        console.log(info2["title"]);
        console.log(info2["link"]);
        info2["go"]();

        // es6对象解构 - 其实就是快速获取属性和方法的方式一种形式
        var {title,link,go} = info2;
        // 还原代码
        // var title = info2.title;
        // var link = info2.link;
        console.log(title,link);
        go();

        // 这里有一个小问题，为什么对象取值要提供两种方式，一个是 . 一个是[]

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

这里面有一个注意点就是解构的时候之前必须是var声明的，否则就会报错！

2.8、传播操作符[…]

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

Spread Operator

ES6/08-传播操作符.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 person = {
            name:"学相伴",
            address:"广东",
            link:"https://www.kuangstudy.com",
            phone:123456,
            go(){
                console.log("开始工作");
            }
        }

        // 解构出来
        var {name,address,...person2} = person;
        console.log(name);
        console.log(address);
        console.log(person2);
    </script>
</body>
</html>

ES6/09-传播操作符的案例分析.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>
        // java ---- 后台
        // 数据格式：var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
        // 异步请求
        // $.post("/user/serch",function(res){
            // res = pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100;
            var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
            var {users,...userPage2} = userPage;
            console.log(userPage.users)
        // })
    </script>
</body>
</html>

2.9、数组map和reduce方法使用

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

讲解：

数组中国新增了map和reduce方法。

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

ES6/10-数组map.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>
        // 要对qrr数组每个元素*2
        let arr = [1,2,3,4,5,6,7];
        // 传统的方式
        let newarr = [];
        for(let i=0;i<arr.length;i++){
            newarr.push(arr[i]*2);
        }
        console.log(newarr);

        // map -- 自带循环功能，并且会把处理的值填回对应的位置
        var newarr2 = arr.map(ele => ele*2);
        console.log(newarr2);

        // map处理对象的数据
        var users = [{age:1,name:"小明"},{age:2,name:"小赵"},{age:3,name:"小孔"}];
        var newusers = users.map(ele =>{
            ele.age = ele.age + 1;
            ele.check = true;
            return ele;
        });
        console.log(newusers);
    </script>
</body>
</html>

reduce()

reduce(function(),初始值(可选)) ：

接收一个函数(必须)和一个初始值(可选)，该函数接收两个参数：

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

ES6/11-数组reduce.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 arr = [1,2,3,4,5,6,7,8,9,10];
        var result = arr.reduce(function(a,b){
            return a+b;
        })
        console.log("results = ",result);
    </script>
</body>
</html>

例：

// 要对qrr数组每个元素*2
let arr = [1,2,3,4,5,6,7];
// 传统的方式
let newarr = [];
for(let i=0;i<arr.length;i++){
    newarr.push(arr[i]*2);
}
console.log(newarr);

// map -- 自带循环功能，并且会把处理的值填回对应的位置
var newarr2 = arr.map(ele => ele*2);
console.log(newarr2);

// map处理对象的数据
var users = [{age:1,name:"小明"},{age:2,name:"小赵"},{age:3,name:"小孔"}];
var newusers = users.map(ele =>{
    ele.age = ele.age + 1;
    ele.check = true;
    return ele;
});
console.log(newusers);

// es6 可以在nodejs，uniapp 微信小程序中得到广泛支持，你可以大胆去使用这些新语法。

总结：

这里ES6所有的内容都可以在nodejs中运行
es6 可以在nodejs，uniapp 微信小程序中得到广泛支持，你可以大胆去使用这些新语法。

注意：这里接下来所有的学习都会下载一定的插件或者安装东西，因为我个人是mac，所以说明一下可能的问题：

如果下载没有成功：可以试试去掉 -g 看看可是否可以成功！

3、NPM包管理器

3.1、简介

官方网站：https://www.npmjs.com/

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

3.2、使用npm管理项目

1、创建文件夹

2、项目初始化

1.npm : node package manager ,node包管理器，类似于maven
作用：
    1：快速构建nodejs工程
    - npm init  /  npm init -y
        - 得到package.json 这个文件里的内容如下：
        {
            "name": "npmpro",   // 工程名
            "version": "1.0.1",   // 版本
            "description": "我是一个node工程",  // 描述
            "main": "index.js", // 入口js
            "scripts": {    // 运行脚本
                "test": "echo \"Error: no test specified\" && exit 1"
            },
            "keywords": [
                "node"  // 关键词
            ],
            "author": "学相伴", // 开发者
            "license": "ISC"   // 授权协议
        }
        类似于：pom.xml 文件作用管理依赖。

    2：快速安装和依赖第三方模块。比如：npm install mysql redis等等。
        2-1：快速安装依赖第三方模块？
            npm install xxxx  或者  npm i xxxx模块名
        2-2：安装模块放在什么地方？
            安装的模块放入到项目的node_modules文件夹中
        2-3：安装模块如何使用呢？
            - require
            // 导入模块redis
            const redis = require("redis");
            // 导入模块mysql
            const mysql = require("mysql");
        2-3：模块和package.json有什么关系吗？
          "dependencies": {
                "jquery": "^3.6.0",
                "mysql": "^2.18.1",
                "redis": "^4.0.4",
                "vue": "^3.2.31"
            }
            通过npm install xxx 会记录在package.json这个文件中
            就类似于maven中pom.xml一个含义，记录作用：复用。
            1：package.json记录的依赖模块
            2：通过npm install可以直接把package.json所依赖的模块全部自动下载下来
            这样就可以避免重复下载模块。很方便去集成的第三模块。
            3：为什么不直接带你去拷贝：node_modules 呢。当然可以，
            为什么不直接拷贝，因为，下载模块的依赖过多文件过大，混乱文件很多，一般几万到几十万的文件


        2-4：如果安装模块很慢怎么办？
            npm install -g cnpm --registery=https://registry.npm.taobao.org
        2-5：如何运行？
            node xxx.js 运行过程.js是可以省略的 终止命令：CTRL+C 多次执行
        2-6：如何下载多个？
            npm install jquery mysql redis vue
            cnpm install jquery mysql redis vue

        2-7：下载指定的版本号
            npm install xxx@版本号
            具体的版本号：查看官方网址   https://www.npmjs.com/

    3：如何卸载模块呢？
        npm unistall vue jquery

#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y

3.3、修改npm镜像

1、修改npm镜像

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/

淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

2、设置镜像地址

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

3、npm命令：

# 查看版本
 npm -v  | node -v
 # npm 命令行简写
   -g：为--global 全局
   -s：save 
   -D：--save-dev 开发环境
    i：安装
 # 安装模块到默认
 npminstall express 或npm i express
 # 安装与卸载
 npm install | npm i || npm unistall 
 # 将i5ting_toc 安装为全局包
 npm install -g i5ting_toc
 # 调用 i5ting_toc,轻松实现 md 转 html 的功能 -o代表默认浏览器打开
 i5ting_toc -f 要转换的md文件路径 -o
 # 开发依赖包与核心依赖包
 开发：npm i 包名 -D  || npm i 包名 --save-dev
 核心：npm i 包名
 # 查看当前下包的镜像
 npm config get registry
 # 将下载的镜像切换为淘宝镜像
 npm config set registry https://registry.npm.taobao.org 
 # nrm 解决下包问题慢的问题
 npm i nrm -g
 # 查看所有可用的镜像源
 nrm ls
 # 将下包的镜像切换为 taobao 镜像
 nrm use taobao
 # 查看npm配置信息
 npm config list
 # 清理npm缓存
 npm cache clean
 # 清理项目中没有使用过的包
 npm prune

3.4、npm install

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint
#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目

3.5、其他命令

#更新包(更新到最新版本)
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

4、Babel

4.1、简介

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

4.2、安装

安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

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

4.3、Babel的使用

1、创建babel文件夹

2、初始化项目

npm init -y

3、创建文件 src/example.js ，下面是一段ES6代码：

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

4、配置 .babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

{    
  	 "presets": [],
  	 "plugins": []
}

presets字段设定转码规则，将es2015规则加入 .babelrc：

{    
  	"presets": ["es2015"],    
    "plugins": []
}

5、安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

6、转码

# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2

4.4、自定义脚本

1、改写package.json

{
    // ...
    "scripts": {
        // ...
        "build":  "babel src\\example.js -o dist\\compiled.js"
    },
}

2、转码的时候，执行下面的命令

mkdir distnpm
run build

5、模块化

5.1、简介

模块化产生的背景

随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”(class)，包(package)等概念，也不支持”模块”(module)。

模块化规范

CommonJS模块化规范
ES6模块化规范

5.2、CommonJs规范

每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

1、创建“module”文件夹

2、创建 module-common-js/四则运算.js

// 工具类
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 di = function(a,b){
    return a/b;
}


// module.exports = {
//     sum,
//     sub,
//     mul,
//     di
// }

3、导出测试中的成员

// 导出给别人使用
module.exports = {
    sum:sum,
    sub:sub,
    mul:mul,
    di:di
}

简写

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

4、创建moudle\commonjs/导入测试

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

console.log(m.sum(1,2))
console.log(m.sub(1,2))
console.log(m.mul(1,2))
console.log(m.di(1,2))

// commons js 模块化开发！  exports   require   必须导出了才能使用

// es6 模块化开发！

5、运行程序

node 导入测试.js

CommonJS使用 exports 和require 来导出、导入模块。

5.3、ES6模块化规范

ES6使用 export 和 import 来导出、导入模块。

1、创建 moudle-es6 文件夹

2、创建 src/userApi.js 文件，导出模块

export function getList() {
    console.log('获取数据列表')
}
export function save() {
    console.log('保存数据')
}

3、创建 src/userTest.js文件，导入模块

//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from './userApi.js'
getList()
save()

注意：这时的程序无法运行的，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

4、初始化项目

npm init -y

5、配置 .babelrc

{
    "presets": ["es2015"],
    "plugins": []
}

6、安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

7、定义运行脚本，package.json中增加”build”

{
    // ...
    "scripts": {
       "build": "babel src -d dist"
    }
}

8、执行命令转码

npm run build

9、运行程序

node dist/userTest.js

5.4、ES6模块化写法2

1、创建 src/userApi.js ，导出模块

export default {
    getList() {
        console.log('获取数据列表2')
    },
    save() {
        console.log('保存数据2')
    }
}

2、创建 src/userTest.js，导入模块

import user from "./userApi.js"
user.getList()
user.save()

3、执行命令转码

npm run build

4、运行程序

node dist/userTest.js

6、Webpack

6.1、什么是webpack？

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

6.2、webpack安装

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

6.3、初始化项目

1、创建webpack文件夹

npm init -y

2、创建src文件夹

3、src下创建common.js

exports.info = function (str) {
     document.write(str);
 }

4、src下创建utils.js

exports.add = function (a, b) {
     return a + b;
 }

5、src下创建main.js

const common = require('./common');
 const utils = require('./utils');
 common.info('Hello world!' + utils.add(100, 200));

7.4、JS打包

1、webpack目录下创建配置文件webpack.config.js

// 导入path模块 nodejs内置模块
 const path = require("path");
 
 // 定义JS打包的规则
 module.exports = {
     // 1：入口函数从哪里开始进行编译打包
     entry:"./src/main.js",
     // 2：编译成功后把内容输出到哪里去
     output:{
         //2-1：定义输出的指定目录 __dirname当前项目根目录，产生一个dist文件夹 
         path:path.resolve(__dirname,"./dist"),
         // 2-2：合并的js文件存储在 dist/bundle.js文件中
         filename:"bundle.js"
     }
 }

以上配置的意思是：读取当前项目目录下src文件夹中的main.js(入口文件)内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

2、命令行执行编译命令

webpack --mode=development
 #执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
     //...,
     "dev": "webpack --mode=development"
  }

运行npm命令执行打包

npm run dev

3、webpack目录下创建index.html ，引用bundle.js

<body>
     <script src="dist/bundle.js"></script>
 </body>

4、浏览器中查看index.html

6.5、Css打包

1、安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件

css-loader 是将 css 装载到 javascript

style-loader 是让 javascript 认识css

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

2、修改webpack.config.js

// 导入path模块 nodejs内置模块
 const path = require("path");
 
 // 定义JS打包的规则
 module.exports = {
     // 1：入口函数从哪里开始进行编译打包
     entry:"./src/main.js",
     // 2：编译成功后把内容输出到哪里去
     output:{
         //2-1：定义输出的指定目录 __dirname当前项目根目录，产生一个dist文件夹 
         path:path.resolve(__dirname,"./dist"),
         // 2-2：合并的js文件存储在 dist/bundle.js文件中
         filename:"bundle.js"
     },
     module:{
         rules:[{
             test:/\.css$/, // 把项目中所有的.css结尾的文件进行打包
             use:["style-loader","css-loader"]
         }]
     }
 }

3、在src文件夹创建style.css

body{
     background:pink;
 }

4、修改main.js，在第一行引入style.css

require('./style.css');

5、运行编译命令

npm run dev

6、浏览器中查看index.html ，看看背景是不是变成粉色啦？

把这些知识都学习完毕了，那我们之后学习 Vue 就轻松啦！这些都是现在前端工程师的基础！

7、Vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

官网地址：https://panjiachen.github.io/vue-element-admin-site/zh/

运行工程和编译工程

# 克隆项目
 git clone https://github.com/PanJiaChen/vue-element-admin.git
 # 进入项目目录
 cd vue-element-admin
 # 安装依赖
 npm install
 # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
 npm install --registry=https://registry.npm.taobao.org
 # 本地开发 启动项目
 npm run dev

注意如果老是安装失败：

请删除 node-modules 然后执行npm install
或者换个网络

启动完成后会自动打开浏览器访问 http://localhost:9527，你看到下面的页面就代表操作成功了。

小结

nodejs项目几要素

package.json (npm init \ npmt init -y)
node_modules (npm install -g jquery/npm iinstall jquery)
运行是使用：查看官网提供几乎所有的nodejs都启动和打包都是如下：
- npm run dev (开发运行)
- npm run build (打包)

探究：package.json

1：在发布项目或者拷贝项目的时候，node_moudles其实是没意义的。因为它仅仅在开发和打包的时候使用

2：如果托管代码其实没必要，为什么。因为你package.json文件中已经记录了这些模块坐标。我们可以直接使用npm install 去重新安装和生成node-modules 。所以的nodejs项目下载以后第一个要执行的命令都是npm install的原因也就是如此。

3：这也就是为什么官方不提供node-modules的原因。因为你可以直接用npm install 去下载

异步操作：

Promise
async / await
generator、yield

generator、yield

<!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>
     <script>
 
         // function* 这种声明方式 (function关键字后跟一个星号)会定义一个生成器函数 (generator function)，它返回一个  Generator  对象。
 
 
         // function *show(n,m){
 
         //     alert(`${n},${m}`)
 
         //     alert('a')
 
         //     let a = yield
 
         //     alert('b')
         // }
 
         // let generator =  show(20,30)
 
         // generator.next(12) // 第一个next没发给yield传参
         // generator.next(5)
 
         // ------------------------------
 
         function *show(){
 
             alert('a')
 
             let a = yield 12
 
             alert('b')
 
             // return;
         }
 
         let gen = show()
 
         let res1 = gen.next()
         console.log(res1);  // {value: 12, done: false}
 
         let res2 = gen.next() // {value: undefined, done: false} 这个结果要靠return来完成！
         console.log(res2)
 
 
     </script>
 </head>
 <body>
     
 </body>
 </html>

在这里我们需要使用npm命令下载runner ，然后进行使用！

<!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>
     <script src="runner.js"></script>
 </head>
 <body>
     <script>
         runner(function *(){
             let data1 = yield $.ajax({url: "data1.txt",dataType: "json"})
             let data2 = yield $.ajax({url: "data1.txt",dataType: "json"})
             let data3 = yield $.ajax({url: "data1.txt",dataType: "json"})
 
             console.log(data1,data2,data3);
         })
 
     </script>
 </body>
 </html>

总结：

Promise 适合读取大量数据
generator 逻辑性数据适合

KOA

cnpm i koa
cnpm i koa-mysql

const Koa = require('koa');
 const mysql = require('koa-mysql');
 const app = new Koa();
 
 var db = mysql.createPool({ user: 'root', password: '123456', database: 'jdbc', host: 'localhost' });
 
 // response
 app.use(function *() {
     let data = yield db.query("select * from jdbc.users")
     this.data = data;
   });
   
   app.listen(8080);

Nakano_May

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大前端进阶

1、NodeJs1.1、NodeJs安装与介绍目标了解nodejs，并且在本带安装好这个软件官网：http://nodejs.cn/介绍：Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V...
复制链接

扫一扫