2.Node.js快速入门
Node.js笔记
- Node.js
- Node.js安装
- 快速入门
- 创建测试工程
- 使用函数
- 使用模块
- 创建http服务
- 服务端渲染
- 接收参数
- 资源管理器NPM
- 工程创建
- 本地安装
- 全局安装
- 修改镜像
- Webpack快速入门
- 安装webpack
- 快速入门
- css打包
Node.js
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
Node.js安装
1、下载对应你系统的Node.js版本:
https://nodejs.org/en/download/ 资料 文件夹中已经提供。
2、选安装目录进行安装
完成以后，在控制台输入：
C:\Users\jack>node -v
v10.17.0
快速入门
创建测试工程
创建一个工程demo1，使用开发工具打开，这里使用的是WebStorm2020.1版本；
创建一个node01.js文件，在里面输入：
使用函数
使用模块
每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可
见。每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）
是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
创建node03.1.js
exports.add = function (a, b) {return a + b;
}
创建node03.2.js
var demo = require('./node03.1');
console.log(demo.add(10, 20));
命令行执行
D:\autobackup\备课教案\node\code\demo1>node node03.2.js
30
创建http服务
http为node内置的web模块。创建node04.js文件
/*http server*/
const http = require('http')http.createServer((req, res) => {res.writeHead(200, {'Content-Type': 'text/plain'});res.write('hello world');res.end('\n');
}).listen(8000)console.log("服务器监听8000端口")
执行：
node node04.js
浏览器访问地址：http://localhost:8000
服务端渲染
创建node05.js
/*http server*/
const http = require('http')http.createServer((req, res) => {res.writeHead(200, {'Content-Type': 'text/html'});for (var i = 0; i < 5; i++) {res.write('<h1>hello world</h1>');}res.end('\n');
}).listen(8000)console.log("服务器监听8000端口")
通过浏览器访问
接收参数
创建文件node06.js
/*http server*/
const http = require('http')
const url = require('url')http.createServer((req, res) => {// 解析url地址中的查询字符串,true将解析后的参数转成对象var params = url.parse(req.url, true).query;res.writeHead(200, {'Content-Type': 'text/html'});for (var key in params) {res.write(`<h1>${key}:${params[key]}</h1>`);}res.end('\n');
}).listen(8000)console.log("服务器监听8000端口")
通过url访问：http://localhost:8000/?username=jack&age=20
访问结果：
资源管理器NPM
npm全称Node Package Manager，是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven 。
通过npm 可以很方便地下载js库，管理前端工程。
现在的node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本
工程创建
创建一个空的文件夹 demo2，使用WebStorm打开，在终端执行 npm init
D:\autobackup\备课教案\node\code\demo2>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fields
and exactly what they do.Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.Press ^C at any time to quit.
package name: (demo2)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\autobackup\备课教案\node\code\demo2\package.json:{"name": "demo2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}Is this OK? (yes)D:\autobackup\备课教案\node\code\demo2>index.js 是入口文件，相当于java中的main函数，可以指定，默认是index.js
按照提示输入相关信息，如果是用默认值则直接回车即可。
name: 项目名称
version: 项目版本号
description: 项目描述
keywords: {Array}关键词，便于用户搜索到我们的项目
最后会生成 package.json 文件，这个是包的配置文件，相当于maven的pom.xml
之后也可以根据需要进行修改。
本地安装
全局安装
全局安装
npm install express -g
默认的全局安装路径
{sys.user}/node_modules
修改镜像
D:\autobackup\备课教案\node\code\demo2>npm install -g nrm
npm WARN deprecated mkdirp@0.3.5: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to u
se Promises in 1.x.)
npm WARN deprecated coffee-script@1.7.1: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\jack\AppData\Roaming\npm\nrm -> C:\Users\jack\AppData\Roaming\npm\node_modules\nrm\cli.js
+ nrm@1.2.1
added 494 packages from 880 contributors in 22.259sD:\autobackup\备课教案\node\code\demo2>nrm lsnpm -------- https://registry.npmjs.org/yarn ------- https://registry.yarnpkg.com/cnpm ------- http://r.cnpmjs.org/taobao ----- https://registry.npm.taobao.org/nj --------- https://registry.nodejitsu.com/npmMirror -- https://skimdb.npmjs.com/registry/edunpm ----- http://registry.enpmjs.org/D:\autobackup\备课教案\node\code\demo2>nrm use taobaoRegistry has been set to: https://registry.npm.taobao.org/D:\autobackup\备课教案\node\code\demo2>Webpack快速入门
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpackjs
安装webpack
npm install webpack -g
npm install webpack-cli -g
webpack -v
快速入门
工程结构
创建src文件夹，在src下创建bar.js
export default function bar(str) {document.write(str);
}
在src下创建done.js
export default function add(a, b) {return a + b;
}
在index.js编写如下代码
import bar from "./src/bar";
import add from "./src/done";bar('10+20=' + add(10, 20))
创建webpack.config.js
const path = require('path');module.exports = {entry: './index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'}
};
执行webpack命令进行打包后生成dist文件夹，生成文件bundle.js
创建index.html引用bundle.js
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title><script src="./dist/bundle.js"></script>
</head>
<body></body>
</html>
css打包
安装style-loader和 css-loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。 Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css
npm install style-loader css-loader --save-dev
–save-dev ： 不会在打包的时候打包。
编写css
修改index.js
重新打包 webpack后访问页面
2.Node.js快速入门相关推荐
- 54 Node.js快速入门
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.Node开发概述 1.1 为什么要学习服务器端开发基础 能够与后端程序员更加紧密的配合 ...
- Node.js快速入门
一.简介 1.什么是Node.js 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎, ...
- 万字长文--详解Node.js(快速入门)
Node.js基础与扩展 Node.js 1.初识Node.js与内置模块 1.1 Node.js初识 1.2 fs文件系统模块 1.3 path路径模块 1.4 http模块 2.模块化 2.1 模 ...
- node.js快速入门指南
Node.js迅速蹿红,衍生了一个强大的开源社区.支持企业,甚至还拥有属于自己的技术大会.我把这种成功归结于它的简介,高校,同时提高了编程生产力. Node.js 的前置知识很多,例如以下知识 Jav ...
- Node.js快速入门之基础模块及常用api
目录 Node特点 模块化 文件 文件读取 文件写入 文件删除 Buffer(缓存数据) 读取/删除目录 输入输出 文件流 写入流 读取流 先流入后流出的整个流程 管道流 Node事件 Os模块和pa ...
- 最新Node.JS入门视频教程20集 Node.JS快速入门编程教材 Node.JS视频（偏重基础）
本套NodeJS教程共20集,同时包含源码.教程内容有点偏重基础,非常适合零基础的朋友学习! 下载地址:百度网盘
- Node.js：入门资料
<快速搭建 Node.js 开发环境以及加速 npm> http://fengmk2.com/blog/2014/03/node-env-and-faster-npm.html <N ...
- node爬虫快速入门
node爬虫 初入前端,刚刚接触node,对于耳闻已久的node爬虫非常神往,所以有了这篇文章,项目代码在文章末尾 需求 抓取天涯论坛重庆地区板块的文章列表信息. 使用工具 node.js super ...
- Node.js开发入门—语音合成示例
出于项目需要,搞了一个语音合成(TTS)的小示例,使用的是OKVoice. 我想在PC上测试,OKVoice的快速接入API可以实现我的目的,文档在这里:http://dev.okvoice.com/ ...
- Node.js核心入门（二）
目录: Node.js核心入门(一) 全局对象 常用工具 事件机制 Node.js核心入门(二) 文件系统访问 HTTP服务器与客户端 文件系统 fs fs 模块是文件操作的封装,它提供了文件的读取. ...
最新文章
- 115.什么是SHELL
- 李飞飞：云原生分布式数据库面临哪些机遇与挑战？
- linux 查询 lib信息,怎么查看linux是否使用 libarchive
- jzoj3738-[NOI2014模拟7.11]理想城市(city)【树,模型转换】
- LeetCode 273. 整数转换英文表示
- 组装服务器配置清单_2020年组装电脑配置清单列表
- zabbix监控jmx
- Android HIDL第一个HelloWorld demo
- 如何实现一个遵从设计原则的积分兑换系统2
- 【原创】有关Buffer使用，让你的日志类库解决IO高并发写
- 韩国瑜：打造高雄全台首富 3月内完成施政总体检
- android js回调函数,JavaScript回调函数的几种用法
- 洛谷P2386放苹果
- [赛后总结]G2022 Regular Contest 04总结
- 深度学习——李宏毅第一课2020
- matlab中load函数是什么意思,MATLAB中load函数的用法
- php 手机当扫描仪,只会用华为手机拍照就输了，打开相机的这个功能，手机秒变扫描仪...
- 每天一个设计模式之备忘录模式（Memento Pattern）
- mysql 函数权限控制_MySql授权和撤销权限操作
- meshlab比较模型误差