Node.js快速入门

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 serverresponse.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

在这里插入图片描述
)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/48726.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python | Leetcode Python题解之第274题H指数

Python | Leetcode Python题解之第274题H指数

题目&#xff1a; 题解&#xff1a; class Solution:def hIndex(self, citations: List[int]) -> int:left,right 0,len(citations)while left<right:# 1 防止死循环mid (leftright1)>>1cnt 0for v in citations:if v>mid:cnt1if cnt>mid:# 要找的答案在…
阅读更多...
哈希 -- 简单实现

哈希 -- 简单实现

在STL库中&#xff0c;有map和set两个关联式容器&#xff0c;这两个容器的底层都是以红黑树为底层。但是在后续的发展过程中&#xff0c;我们发现有些场景的数据不适合用红黑树进行存储&#xff0c;所以有人就发明了底层为哈希表的map和set,称为unordered_map 和 unordered_set…
阅读更多...
C语言中的控制语句（一）：if语句

C语言中的控制语句（一）：if语句

文章目录 &#x1f34a;自我介绍&#x1f34a;if 的单分支语句&#x1f34a;a.if 单分支判断&#x1f34a;b.if单分支选择判断 &#x1f34a;if多分支语句&#x1f34a;if多分支选择判断 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以&#xff1a;点赞关注评论收藏&a…
阅读更多...
MMCV 核心组件分析（一）：整体概述

MMCV 核心组件分析（一）：整体概述

概述 MMCV 是计算机视觉研究的基础库&#xff0c;并提供以下功能。
阅读更多...
（11）Python引领金融前沿：投资组合优化实战案例

（11）Python引领金融前沿：投资组合优化实战案例

1. 前言 本篇文章为 Python 对金融的投资组合优化的示例。投资组合优化是从一组可用的投资组合中选择最佳投资组合的过程&#xff0c;目的是最大限度地提高回报和降低风险。 投资组合优化是从一组可用的投资组合中选择最佳投资组合的过程&#xff0c;目的是最大限度地提高回报…
阅读更多...
单例模式_Golang

单例模式_Golang

目录 一、单例模式 1.1 基本概念 1.2 使用场景 二、Golang实现 2.1 懒汉模式&#xff08;Lazy Loading&#xff09; 一、单例模式 1.1 基本概念 一个类只能生成一个实例&#xff0c;且该类能自行创建这个实例的一种模式,这个定义个人感觉可以拆的通俗一些,在项目的生命周…
阅读更多...
电子电器架构 - SOA架构软件平台

电子电器架构 - SOA架构软件平台

电子电器架构 - SOA架构软件平台 我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无…
阅读更多...
Spring通过工厂方法进行配置

Spring通过工厂方法进行配置

在Spring的世界中&#xff0c; 我们通常会利用 xml配置文件 或者 annotation注解方式来配置bean实例&#xff01; 在第一种利用 xml配置文件 方式中&#xff0c; 还包括如下三小类 反射模式&#xff08;我们前面的所有配置都是这种模式&#xff09;工厂方法模式Factory Bean模…
阅读更多...
【Spark官方文档部分翻译】RDD编程指南（RDD Programming Guide）

【Spark官方文档部分翻译】RDD编程指南（RDD Programming Guide）

写在前面 内容如何选择 本翻译只翻译本人认为精华的部分&#xff0c;本人认为的Spark的一些核心理念&#xff0c;编程思想。一些特别基础的操作包括但不限于搭建环境就不在此赘述了。 配套版本 本系列基于Spark 3.3.1&#xff0c;Scala 2.12.10&#xff0c;进行翻译总结 原…
阅读更多...
Linux+InternStudio 关卡（test）

Linux+InternStudio 关卡（test）

任务地址&#xff1a; https://github.com/InternLM/Tutorial/blob/camp3/docs/L0/Linux/task.md 文档 https://github.com/InternLM/Tutorial/blob/camp3/docs/L0/Linux/readme.md 任务 ssh连接 端口映射 gradio页面 笔记&#xff1a; 1.端口映射阶段&#xff1a;输入密…
阅读更多...
【BUG】已解决：ModuleNotFoundError: No module named ‘sklearn‘

【BUG】已解决：ModuleNotFoundError: No module named ‘sklearn‘

已解决&#xff1a;ModuleNotFoundError: No module named ‘sklearn‘ 目录 已解决&#xff1a;ModuleNotFoundError: No module named ‘sklearn‘ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是…
阅读更多...
视频点播项目

视频点播项目

文章目录 视频点播技术栈与项目环境JsonCppMariaDBhttplib 工具类设计文件类Json类 数据管理模块视频信息管理&#xff08;数据表设计&#xff09;数据管理类设计 网络通信接口设计业务处理模块设计前端界面主页面播放页面 项目总结项目回顾项目结构关键技术点总结 视频点播 允…
阅读更多...
亚马逊自发货erp，虚拟自动化发货功能以及1688订单采购

亚马逊自发货erp，虚拟自动化发货功能以及1688订单采购

亚马逊自发货erp自动化功能&#xff0c;自动同步订单&#xff0c;1688订单同步。 大家好&#xff0c;今天分享一个非常实用并且节省时间的功能&#xff1a;自动化发货以及1688同步订单。 首先来看下自动化发货功能怎么操作。 →要在商品信息里面添加商品信息&#xff0c;上传…
阅读更多...
风灵月影修改器未检测到游戏怎么回事？解决方法分享

风灵月影修改器未检测到游戏怎么回事？解决方法分享

当风灵月影修改器未检测到游戏进程时&#xff0c;可能是由以下几个原因导致的&#xff1a; 1. 游戏未启动&#xff1a; 最直接的原因就是游戏本身没有被启动&#xff0c;或者游戏还未完全加载完成&#xff0c;处于启动过程中的某个阶段&#xff0c;此时修改器可能检测不到游戏…
阅读更多...
【总结】逻辑运算在Z3中运用+CTF习题

【总结】逻辑运算在Z3中运用+CTF习题

国际赛IrisCTF在前几天举办&#xff0c;遇到了一道有意思的题目&#xff0c;特来总结。 题目 附件如下&#xff1a;&#x1f4ce;babyrevjohnson.tar 解题过程 关键main函数分析如下&#xff1a; int __fastcall main(int argc, const char **argv, const char**envp){int v4…
阅读更多...
关于adcoder和codeforce 如何安装翻译插件

关于adcoder和codeforce 如何安装翻译插件

首先在扩展当中下载插件篡改猴 其次&#xff0c;点击获取新的脚本 最后搜索 atcoder better 和 codeforce better 安装即可
阅读更多...
【Spring Boot】网页五子棋项目实现，手把手带你全盘解析（长达两万3千字的干货，坐好了，要发车了......）

【Spring Boot】网页五子棋项目实现，手把手带你全盘解析（长达两万3千字的干货，坐好了，要发车了......）

目录 网页五子棋项目一、项目核心流程二、 登录模块2.1 前端输入用户信息2.2 后端进行数据库查询用户信息 三、 游戏大厅模块3.1 前端通过Ajax请求用户数据&#xff0c;后端从Session中拿取并从数据库中查询后返回3.2 前后端建立WebSocket连接&#xff0c;并进行判断&#xff0…
阅读更多...
如何处理 PostgreSQL 中死锁的情况？

如何处理 PostgreSQL 中死锁的情况？

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 如何处理 PostgreSQL 中死锁的情况&#xff1f;一、认识死锁二、死锁的症状三、死锁的检测四、预防死锁…
阅读更多...
【MySQL】：想学好数据库，不知道这些还想咋学

【MySQL】：想学好数据库，不知道这些还想咋学

客户端—服务器 客户端是一个“客户端—服务器”结构的程序 C&#xff08;client&#xff09;—S&#xff08;server&#xff09; 客户端和服务器是两个独立的程序&#xff0c;这两个程序之间通过“网络”进行通信&#xff08;相当于是两种角色&#xff09; 客户端 主动发起网…
阅读更多...
Java语言程序设计——篇六(1)

Java语言程序设计——篇六(1)

字符串 概述创建String类对象     字符串基本操作实战演练 字符串查找字符串转换为数组字符串比较实战演练 字符串的拆分与组合 概述 字符串 用一对双引号“”括起来的字符序列。Java语言中&#xff0c;字符串常量或变量均用类实现。 字符串有两大类&#xff1a; 1&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023