Node.js
1、Node.js介绍与安装
官网：https://nodejs.cn/
介绍：简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。
Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。
安装：
在官网下载并安装完成后
在命令窗口中输入:node -v
npm -v
有版本号证明安装成功
2、Nodejs入门
控制台输出字符串、使用函数、进行模块化编程
2.1、快速入门-Hello World
1.创建文件夹NODEJS
2.创建文件helloworld.js
类似于java中的sout
console.log("hello world")
输出结果:hello world
2.2、Node-实现请求响应
1.创建httpserver.js
//导入模块是required 就是类似于java中的import
const http = require('http');
//1：创建一个httpserver服务
http.createServer(function(request,response){
//浏览器怎么认识hello server
response.writeHead(200,{'Context-type':'text/plain'});
//这句话的含义是：告诉浏览器将以text-plain去解析hello server这段数据
//给浏览器输出内容
response.end("<strong>hello server!!!</strong>");
}).listen(8888);
console.log("你启动的服务是：http://localhost:8888启动成功")
2.运行服务器程序
3.服务器启动成功后，在浏览器输入：//localhost:8888/查看webserver运行成功，并输出Html页面
4.停止服务:ctrl+c
2.3、Node-操作MYSQL数据库
1.安装mysql依赖
npm install mysql
2.定义db.js进行操作
//1:导入mysql依赖包
const { error } = require("console");
var mysql = require("mysql");
//2.创建一个mysql的connection对象
//3.配置数据连接的信息
var connction = mysql.createConnection({
host:"127.0.0.1",
port:3306,
user:"root",
password:"jinjiaqi123",
database:"testdb"
})
//4.开辟连接
connction.connect();
//5.执行crud
connction.query("select * from user",function(error,results,fields){
//如果查询出错，直接抛出
if(error)throw error;
//查询成功
console.log("results = ",results);
});
//6.关闭连接
connction.end();
3.新建数据库
4.运行结果
3、NPM管理器
3.1、简介
NPM全程：Node Package Manager,是Node.js管理工具，里面的所有模块都是开源免费的，也是Node.js的包管理工具，相当于前端的Maven
#在命令提示符输入npm -v 可查看当前的npm版本
npm -v
3.2、使用npm管理项目
1.创建文件夹npm
2.项目初始化
#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init
#按照提示输入相关信息，如果用默认值则直接回车即可
#name：项目名称
#version：项目版本号
#description：项目描述
#keywords:{Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改
快速安装和依赖第三方模块：
快速安装依赖和第三方模块
npm install xxx 或者 npm i xxx模块名安装模块放在什么地方？
- 安装的模块会放入到项目的node_modules文件夹中
安装模块如何使用呢？
- const 模块名 = required(“模块名”)
模块和package.json有什么关系呢？
- 通过npm install xxx 会记录在package.json这个文件中
- 就类似于maven中的pom.xml一个含义，记录作用：复用
- 通过npm install可以直接把package.json所依赖的模块全部自动下载下来，这样就可以避免重复下载模块。很方便去集成的第三方模块
如果安装模块很慢怎么办？
npm install -g -cnpm --registry=https://registry.npm.taobao.org如何运行？
- node xxx.js 运行过程.js是可以省去的
如何下载多个
npm install jquery vue redis mysql cnpm install jquery vue redis mysql下载指定的版本号
npm install xxx@版本号如何卸载模块呢？
npm uninstall vue jquery
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.创建文件example.js，下面是一段ES6代码
//转码前
//定义数据
let input =[1,2,3]
//将数组的每个元素+1
input = input.map(item => item+1)
console.log(input)
4.配置.babelrc
Babel的配置文件是.babelrc，存放在项目录的根目录下，该文件用来设置转码规则和插件，如下
{
"presets": ["es2015"],
"plugins": []
}
5.安装转码器，在项目中安装
npm install --save-dev babel-preset-es2015
6.转码
#npm install --save-dev babel-preset-es2015
#转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
#整个目录转码
mkdir dist2
# --out-file 或 -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 dist
npm run build
5、模块化
5.1、简介
模块化规范：
- CommonJS模块化规范
- ES6模块化规范
5.2、CommonJS规范
每一个文件就是一个模块，有自己的作用域，在一个文件里面定义的变量、函数、类都是私有的，对其他文不可见
1.创建"module"文件夹
2.创建mokuai-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.创建文件导入测试
//require
const m = require('./四则运算.js')
console.log(m.sum(1,2))
4.在终端进行测试
node .\导入测试.js
CommonJS使用 exports 和 require 来导出、导入模块
5.3、ES6模块化规范
ES6使用export 和 import 来导出、导入模块
1.创建文件夹
2.创建src/userApi.js文件，导出模块
export default{
getList(){
console.log("获取数据列表");
},
save(){
console.log("保存数据");
}
}
3.创建src/userComponent.js文件，导入模块
import user from "./userApi";
user.getList()
user.save()
//默认不支持 es6 语法的import
4.初始化项目
npm init -y
5.配置.babelrc
{
"presets": ["es2015"],
"plugins": []
}
6.安装转码器，在项目中安装
npm install --save-dev babel-preset-es2015
7.定义运行脚本，package.json中增加"build"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d dist"
},
8.执行命令转码
npm run build
9.运行程序
node dist/userComponent.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/common.js
//输出
exports.info = function(str){
//往控制台输出
console.log(str);
//往浏览器输出
document.write(str);
}
3.创建文件src/util.js
//相加函数
exports.add = (a,b) => a + b;
4.创建文件src/main.js
//导入util
const util = require("./util");
//导入common
const common = require("./common");
common.info("hello world,"+util.add(1,2));
5.穿件文件webpack.config.js
//导入path模块 node.js内置模块
const path = require("path");
//定义JS打包的规则
module.exports = {
//入口函数从哪里开始进行编译打包
entry:"./src/main.js",
//编译成功后的内容输出到哪里去
output:{
//定义输出指定的目录_dirname当前项目根目录，生成一个dist文件
path:path.resolve(__dirname,"./dist"),
//合并的js文件存储在dist/bundle.js中
filename:"bundle.js"
}
}
6.在终端输入npm run dev进行打包
7.编写index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
8.查看网页的输出结果
遇到的问题：
解决方法：在package.json中加入下面的代码
输入npm run dev ,打包成功
6.4、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
output:{
...
},
module:{
rules:[{
test:/\.css$/, //打包规则应用到以css结尾的文件上
use:['style-loader','css-loader']
}
]
}
3.在src文件夹创建style.css
body{
background-color: aquamarine;
}
4.修改main.js引入css
//导入css
require("./style.css");
5.运行编译原理
npm run dev
6.在浏览器中查看Index.html
首先我们需要安装相关的Loader插件
- css-loader是将css装载到JavaScript中
- style-loader是让JavaScript认识Css
npm install --save-dev style-loader css-loader
2.修改webpack.config.js
output:{
...
},
module:{
rules:[{
test:/\.css$/, //打包规则应用到以css结尾的文件上
use:['style-loader','css-loader']
}
]
}
3.在src文件夹创建style.css
body{
background-color: aquamarine;
}
4.修改main.js引入css
//导入css
require("./style.css");
5.运行编译原理
npm run dev
6.在浏览器中查看Index.html
)
