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:# 要找的答案在…
阅读更多...
php并发提高20倍

php并发提高20倍

opcache扩展 负责 opcode 缓存&#xff0c;专注于提高 PHP 代码的执行效率 apcu扩展 用于应用级数据缓存&#xff0c;专注于减少 I/O 操作和计算密集型任务的重复执行 大杀器swoole扩展 在实际应用中&#xff0c;Swoole 能够将 PHP 服务器的并发处理能力提升数十倍到数百倍…
阅读更多...
哈希 -- 简单实现

哈希 -- 简单实现

在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…
阅读更多...
web前端 React 框架面试200题（七）

web前端 React 框架面试200题（七）

面试题 185. 如果想要在组件第一次加载后获取该组件的dom元素&#xff0c;应当在以下哪个生命周期中进行 &#xff1f; A&#xff1a;componentDidUpdate() B&#xff1a;componentDidMount() C&#xff1a;componentWillUnmount() D&#xff1a;shouldComponentUpdate()答案&…
阅读更多...
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号2

HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号2

基础认证题库请移步&#xff1a;HarmonyOS应用开发者基础认证题库 注&#xff1a;有读者反馈&#xff0c;题库的代码块比较多&#xff0c;打开文章时会卡死。所以笔者将题库拆分&#xff0c;单选题20个为一组&#xff0c;多选题10个为一组&#xff0c;题库目录如下&#xff0c;…
阅读更多...
MMCV 核心组件分析（一）：整体概述

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

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

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

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

订单管理系统需求规范

1. 引言 1.1 目的 本文档旨在明确描述订单管理系统的功能、非功能性需求以及约束条件&#xff0c;以指导系统的分析、设计、开发、测试和部署。 1.2 范围 本系统将支持在线订单处理&#xff0c;从客户下单到完成配送的全过程管理&#xff0c;包括库存管理、支付处理、订单跟…
阅读更多...
TypeScript与面向对象编程

TypeScript与面向对象编程

引言 TypeScript简介 TypeScript是JavaScript的一个超集&#xff0c;由微软开发&#xff0c;它在JavaScript的基础上添加了类型系统和对ES6的新特性的支持。TypeScript最终会被编译成纯JavaScript代码&#xff0c;以便在任何支持JavaScript的环境中运行。 面向对象编程&…
阅读更多...
单例模式_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模…
阅读更多...
Composition API实现逻辑复用

Composition API实现逻辑复用

抽离逻辑代码到一个函数函数命名约定为useXxxx格式&#xff08;react Hooks也是&#xff09;在setup中去引用这个函数 如下经典鼠标位置例子&#xff1a; // useMousePosition.ts import { onMounted, onUnmounted, ref } from "vue";const useMousePosition () &…
阅读更多...
【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;输入密…
阅读更多...
编译linux kernel时，如何增加一个include路径？

编译linux kernel时，如何增加一个include路径？

编译linux kernel时增加一个include路径的方法&#xff0c;使用 EXTRA_CFLAGS : make O/path/to/build/dir ARCHyour_arch CROSS_COMPILEyour_cross_compiler EXTRA_CFLAGS"-I/your/new/path" 其中 EXTRA_CFLAGS"-I/your/new/path" 就是要增加的include路径…
阅读更多...
线段树分治+可撤销并查集 学习笔记

线段树分治+可撤销并查集 学习笔记

题目一般是给你边或者点的出现时间区间[Li,Ri]&#xff0c;问你在某些时间里1能访问到的点或者点的数量。 先考虑暴力的思路&#xff0c;就是对于一个具体的时间节点&#xff0c;我们去暴力地得知当前边/点是否出现&#xff0c;并且跑图查看是否联通。 由于一个具体的时间节点…
阅读更多...
使用 hutool工具实现导入导出功能。

使用 hutool工具实现导入导出功能。

hutool工具网址 Hutool参考文档 pom依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.20</version></dependency><dependency><groupId>org.apache.poi</gro…
阅读更多...
ASP.NET Core在启动过程中使用数据库实例的几种方式

ASP.NET Core在启动过程中使用数据库实例的几种方式

ASP.NET Core项目启动过程中若要调用SqlSugarClient实例操作数据库数据&#xff08;假设操作函数如下&#xff09;&#xff0c;特此记录以下几种方式&#xff1a; public class PublicDataBuffer {public static List<EnvironmentRecord> DataBuffer new List<Envir…
阅读更多...
最新文章

Copyright @ 2022~2023