Node.js快速入门

朝暮7822024-07-26 12:42

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

js 复制代码 
console.log("hello world")

输出结果:hello world

2.2、Node-实现请求响应

1.创建httpserver.js

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进行操作

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

cmd 复制代码 
#在命令提示符输入npm -v 可查看当前的npm版本
npm -v

3.2、使用npm管理项目

1.创建文件夹npm

2.项目初始化

cmd 复制代码 
#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init
#按照提示输入相关信息，如果用默认值则直接回车即可
#name：项目名称
#version：项目版本号
#description：项目描述
#keywords:{Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改

快速安装和依赖第三方模块：

  • 快速安装依赖和第三方模块

    cmd 复制代码 
    npm install xxx 或者 npm i xxx模块名

  • 安装模块放在什么地方？

    • 安装的模块会放入到项目的node_modules文件夹中

  • 安装模块如何使用呢？

    • const 模块名 = required("模块名")

  • 模块和package.json有什么关系呢？

    • 通过npm install xxx 会记录在package.json这个文件中
    • 就类似于maven中的pom.xml一个含义，记录作用：复用
    • 通过npm install可以直接把package.json所依赖的模块全部自动下载下来，这样就可以避免重复下载模块。很方便去集成的第三方模块

  • 如果安装模块很慢怎么办？

    cmd 复制代码 
    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工具，用于命令行转码

cmd 复制代码 
npm install -g babel-cli
#查看是否安装成功
babel --version

4.3、Babel的使用

1.创建babel文件夹

2.初始化项目

npm init -y

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

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

4.配置.babelrc

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

js 复制代码 
{
    "presets": ["es2015"],
    "plugins": []
}

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

cmd 复制代码 
npm install --save-dev babel-preset-es2015

6.转码

cmd 复制代码 
#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

js 复制代码 
{
    //...
    "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

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.创建文件导入测试

js 复制代码 
//require
const m = require('./四则运算.js')

console.log(m.sum(1,2))

4.在终端进行测试

js 复制代码 
node .\导入测试.js

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

5.3、ES6模块化规范

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

1.创建文件夹

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

js 复制代码 
export default{
    getList(){
        console.log("获取数据列表");
    },
    save(){
        console.log("保存数据");
    }
}

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

js 复制代码 
import user from "./userApi";

user.getList()
user.save()

//默认不支持 es6 语法的import

4.初始化项目

npm init -y

5.配置.babelrc

js 复制代码 
{
    "presets": ["es2015"],
    "plugins": []
}

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

cmd 复制代码 
npm install --save-dev babel-preset-es2015

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

json 复制代码 
  "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

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

3.创建文件src/util.js

js 复制代码 
//相加函数
exports.add = (a,b) => a + b;

4.创建文件src/main.js

js 复制代码 
//导入util
const util = require("./util");
//导入common
const common = require("./common");

common.info("hello world,"+util.add(1,2));

5.穿件文件webpack.config.js

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

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

js 复制代码 
  output:{
        ...
    },
    module:{
        rules:[{
            test:/\.css$/, //打包规则应用到以css结尾的文件上
            use:['style-loader','css-loader']
        }
    ]
    }

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

css 复制代码 
body{
    background-color: aquamarine;
}

4.修改main.js引入css

js 复制代码 
//导入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

js 复制代码 
  output:{
        ...
    },
    module:{
        rules:[{
            test:/\.css$/, //打包规则应用到以css结尾的文件上
            use:['style-loader','css-loader']
        }
    ]
    }

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

css 复制代码 
body{
    background-color: aquamarine;
}

4.修改main.js引入css

js 复制代码 
//导入css
require("./style.css");

5.运行编译原理

npm run dev

6.在浏览器中查看Index.html

)

相关推荐
一个很帅的帅哥5 小时前
实现浏览器的下拉加载功能(类似知乎)
开发语言·javascript·mysql·mongodb·node.js·vue·express
Bang邦9 小时前
使用nvm管理Node.js多版本
前端·node.js·node多版本管理
新知图书9 小时前
Node.js快速入门
node.js
FakeOccupational11 小时前
nodejs 007:错误npm error Error: EPERM: operation not permitted, symlink
前端·npm·node.js
亦舒.11 小时前
JSDelivr & NPM CDN 国内加速节点
前端·npm·node.js
代码搬运媛11 小时前
code eintegrity npm err sha512
前端·npm·node.js
猿来如此呀14 小时前
运行npm install 时，卡在sill idealTree buildDeps没有反应
前端·npm·node.js
八了个戒17 小时前
Koa (下一代web框架) 【Node.js进阶】
前端·node.js
谢尔登1 天前
【Node.js】RabbitMQ 不同交换器类型的使用
node.js·rabbitmq·ruby
weixin_441018351 天前
webpack的热更新原理
前端·webpack·node.js
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07浏览器插件——ModHeader 的分享和学习08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CCF-CSP认证考试 202406-3 文本分词 100分题解