文章目录
1. 基础概述2. Nodejs2.1 Nodejs 了解和快速入门2.2 Nodejs 实现 Httpserver 服务（实现请求响应）2.3 Nodejs 操作 MySQL 数据库
3. ES63.1 ES6 的概述3.2 ES6 的语法：let 和 const 命令3.3 ES6 的语法：模板字符串3.4 ES6 的语法：函数默认参数与箭头函数3.5 ES6 的语法：对象的初始化的简写3.6 ES6 的语法：对象解构3.7 ES6 的语法：传播操作符3.8 ES6 的语法：数组 map 和 reduce 方法使用（了解）mapreduce
Nodejs 小结
4. NPM 包管理器4.1 简介1. 用来快速构建 nodejs 工程2. 快速安装和依赖第三方模块
7. webpack7.1 什么是 webpack7.2 webpack 安装7.3 初始化项目7.4 JS 打包
视频链接 文档链接
1. 基础概述
前端开发和前端开发工具Nodejs 安装及快速入门ES6 新语法Npm 包管理器Babel 的安装作用模块化管理Webpack 打包和编译如何快速构建一个 nodejs 项目 vue-admin-element如何快速构建一个 nodejs 项目 antd
2. Nodejs
2.1 Nodejs 了解和快速入门
介绍： Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与 PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
简单说 Node.js 就是运行在服务端的 JavaScript，Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台，底层架构是：JavaScript，文件后缀.js
Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 JavaScript 的速度非常快，性能非常好。
第一个 Node.js 程序 创建一个文件夹 Nodejs 以管理员身份打开 VS code 用 VS code 打开该文件夹 创建 helloworld.js 写代码：
//类似于：System.out.println("hello world!");
console.log("hello world")
运行 （自动补全 Tab键）
2.2 Nodejs 实现 Httpserver 服务（实现请求响应）
创建 httpserver.js
// 导入模块是 require 就类似于 import java.io
const http = require('http');
//1. 创建一个 httpserver 服务
http.createServer(function(request, response){
// 浏览器怎么认识 hello server!!!
//告诉浏览器以 text-plain 的方式去解析 hello server!!! 这段数据。
response.writeHead(200,{'Content-type':'text/plain'});
// 给浏览器输出内容
response.end("hello server!!!");
}).listen(8888);
console.log("你启动的服务是：http://localhost:8888 已启动成功")
//2. 监听一个端口8888
//3. 启动运行服务 node httpserver.js
//4. 在浏览器访问 http://localhost:8888
运行服务器程序 node httpserver.js 服务器启动成功后，在浏览器中输入：http://localhost:8888/ 查看 webserver 成功运行，并输出 html 页面 停止服务：ctrl + c
2.3 Nodejs 操作 MySQL 数据库
安装 mysql 依赖 cnpm install mysql 定义 db.js 进行操作
//导入 mysql 依赖包，mysql 属于第三方的模块，就类似于 java.sql
var mysql = require("mysql");
const Connection = require("mysql/lib/Connection");
//1. 创建一个 mysql 的 Connection 对象
//2. 配置数据连接的信息
var connection = mysql.createConnection({
//ip，端口，账号，密码，要操作的数据库
host:"127.0.0.1",
port:3306,
user:"root",
password:"root",
database:"testdb"
})
//3. 开辟连接
connection.connect();
//4. 执行 curd
// 进行增删改查
connection.query("select * from dbtest",function(error,results,fields){
// 如果查询出错，直接抛出异常
if(error) throw error;
// 否则查询成功
console.log("results = ",results);
});
//5. 关闭连接
connection.end();
// 最后一步：运行node db.js 查看效果
新建数据库：testdb和dbtest表 运行
3. ES6
3.1 ES6 的概述
ECMAScript ECMAScript 是一种由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言，这种语言在万维网上应用广泛，它往往被成为 JavaScript，所以它可以理解为是 JavaScript 的一个标准，但实际上后两者是 ECMA-262 标准的实现和扩展。
ECMAScript 是前端 js 的语法规范，可以应用在各种 js 环境中，如：浏览器或 node.js 环境。 它有很多版本：es1/2/3/5/6，很多新特性，可以在 js 环境中使用这些新特性。
3.2 ES6 的语法：let 和 const 命令
变量和常量的严格区分。
let 和 const 的定义
3.3 ES6 的语法：模板字符串
以前，使用""或''把字符串套起来
现在：使用 ``（反引号）
3.4 ES6 的语法：函数默认参数与箭头函数
默认参数
箭头函数
3.5 ES6 的语法：对象的初始化的简写
核心代码
如果一个对象中的 key 和 value 的名字一样的情况下可以定义成一个。
3.6 ES6 的语法：对象解构
核心代码：
对象解构：es6 提供一些快速获取对象属性和行为的方式。
3.7 ES6 的语法：传播操作符
把一个对象的属性传播到另外一个对象中
因为 name 和 address 已经被解构出来了，剩下的就全部给 person2 对象，快速把剩余属性给另外一个对象
3.8 ES6 的语法：数组 map 和 reduce 方法使用（了解）
map
在开发里临时给一个对象添加一个属性，非常麻烦。 可以使用这个方法。
reduce
reduce(function(), 初始值(可选)): 接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：
第一个参数是上一次 reduce 处理的结果第二个参数是数组中要处理的下一个元素
reduce()会从左到右依次把数组中的元素用 reduce 处理，并把处理的结果作为下一次 reduce 的第一个参数。如果是 第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
Nodejs 小结
学习先去掌握一些常用的，然后再去拓展 ES6 的所有语法可以在 nodejs、uniapp、微信小程序中得到广泛的支持
4. NPM 包管理器
4.1 简介
官方网站：https://www.npmjs.com/ NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。
#在命令提示符输入 npm -v 可查看当前npm版本
npm -v
作用：
1. 用来快速构建 nodejs 工程
打开终端，输入npm init 初始化 得到一个 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 文件，用于管理依赖
#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y
2. 快速安装和依赖第三方模块
2-1：如何快速安装依赖第三方模块？ 使用 npm install 安装依赖包的最新版， npm install xxxx 或 npm i xxx模块名
2-2：安装模块放在什么地方？ 模块安装的位置：项目目录\node_modules
2-3：安装的模块如何使用？
// 导入模块redis
const redis = require("redis")
2-4：模块和 package.json 有什么关系？
"dependencies": {
"mysql": "^2.18.1",
"redis": "^4.6.6",
"vue": "^3.3.2"
}
通过npm install xxx 下载的模块会记录在 package.json 文件中，就类似于 maven 中的 pom.xml，记录的作用：复用。
把 package.json 文件直接扔给新项目， 直接执行 npm install，会自动下载。
2-5：如何运行？ node xxxx.js 运行过程中.js可以省去 终止命令行：CTRL + c
如何卸载模块？ npm uninstall vue
7. webpack
7.1 什么是 webpack
webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
webpack 可以将多种静态资源 js、css、less 转换为一个静态文件，减少了页面的请求。
7.2 webpack 安装
1、全局安装 npm install -g webpack webpack-cli 2、安装后查看版本号 webpack -v
7.3 初始化项目
创建 webpack 文件夹 npm init -y创建 src 文件夹src下创建 common.js
exports.info = function (str) {
document.write(str);
}
src下创建 utils.js
exports.add = function (a, b) {
return a + b;
}
src下创建 main.js
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));
7.4 JS 打包
推荐链接
您阅读本篇文章共花了：
发表评论