前端培训-中级阶段(44)- Node 10.x介绍及使用

简介: 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。支持 windows、linux、macOS、Docker 镜像。

Node.js 与浏览器的区别


  1. 在浏览器中,大多数时候做的是与 DOM 或其他 Web 平台 API(例如 Cookies)进行交互。 当然,那些在 Node.js 中是不存在的。 没有浏览器提供的 documentwindow、以及所有其他的对象。


  1. 在浏览器中,不存在 Node.js 通过其模块提供的 API,例如文件系统访问功能。


  1. 在 Node.js 中,可以控制运行环境。 除非构建的是任何人都可以在任何地方部署的开源应用程序,否则你能知道会在哪个版本的 Node.js 上运行该应用程序。 与浏览器环境(你无法选择访客会使用的浏览器)相比起来,这非常方便。


  1. Node.js 使用 CommonJS 模块系统,而在浏览器中,则还正在实现 ES 模块标准。
    在实践中,这意味着在 Node.js 中使用 require(),而在浏览器中则使用 import


当然,如果你不想看上面那些内容,我们可以看下面的表格


特性 Node 浏览器 备注
顶级对象 global window
AJAX require('http') XMLHttpRequest 可以考虑使用 axios 跨平台
文件系统 require('fs') × 听说 chrome 要加,没仔细研究如何保证安全
模块系统 CommonJS,require() ES,import babel 在手,都是小问题
运行环境 服务器 客户端 其实环境的问题还是存在的
HTML、HTML5、css、css3 ×
事件循环 √,和浏览器的不一致,node 自己也修改过 √,基本上各个厂商的能保持一致
流概念、二进制数据 √,Buffer,Stream √,Blob,ArrayBuffer


Node 可以做什么?


web 服务器


启动一个 web 服务器


// 依赖 http 模块创建 web 服务器
const http = require('http')
// 设置监听的端口
const hostname = '127.0.0.1'
const port = 3000
// 创建一个 web 服务
const server = http.createServer((req, res) => {
 res.statusCode = 200
// 注意一下编码问题哟
 res.setHeader('Content-Type', 'text/plain; charset=UTF-8')
 res.end('你好,欢迎访问 https://www.lilnong.top')
})
// 使用上面设置好的端口监听
server.listen(port, hostname, () => {
console.log(`服务器运行在 http://${hostname}:${port}/`)
})


脚本程序


获取当前目录下面的所有 json 文件,进行处理 node app.js


// app.js 文件
const fs = require("fs");
const path = require('path');
const readDir = (entry, paths = []) => {
    const dirInfo = fs.readdirSync(entry);
    dirInfo.forEach(item=>{
        const location = path.join(entry,item);
        const info = fs.statSync(location);
        if(info.isDirectory()){
            console.log(`dir:${location}`);
            readDir(location, [item]);
        }else{
            if(/.json$/.test(location)){
                // readFile(location, paths)
            }
        }
    })
}
// console.log('__dirname', __dirname)
readDir(__dirname);


交互式使用


上面的代码我们可以直接在 cmd 中使用


bVbO8o6.webp.jpg



相关文章
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
337 0
|
9月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
7715 23
|
11月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
257 10
|
JSON 前端开发 JavaScript
socket.io即时通信前端配合Node案例
本文介绍了如何使用socket.io库在Node.js环境下实现一个简单的即时通信前端配合案例,包括了服务端和客户端的代码实现,以及如何通过socket.io进行事件的发送和监听来实现实时通信。
304 2
|
前端开发 JavaScript
node接收前端上传的图片,单文件、多文件同name、多文件不同name
本文介绍了在Node.js中使用multer模块接收前端上传的图片,包括单文件上传、多文件上传(同name和不同name)以及任意类型文件上传的方法。
492 0
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
451 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
|
JavaScript 前端开发 关系型数据库
前端node学习路线
【8月更文挑战第21天】前端node学习路线
428 8
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
Web App开发 JavaScript 前端开发
对于 前端 解释下 node.js的必要性
对于 前端 解释下 node.js的必要性
171 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改