开启前端全栈之路—— node 基础

简介: 能够和后端程序员更加紧密的配合。网站业务逻辑前置,学习前端技术需要后端技术支撑(Ajax)。扩展知识视野,能够站在更高的角度审视整个项目。

开启前端全栈之路—— node 基础


Node开发概述


为什么要学习服务器端开发基础


  • 能够和后端程序员更加紧密的配合。
  • 网站业务逻辑前置,学习前端技术需要后端技术支撑(Ajax)。
  • 扩展知识视野,能够站在更高的角度审视整个项目。


服务器端开发要做的事情


  • 实现网站的业务逻辑。
  • 数据的增删改查。


为什么选择Node


  • 使用 JavaScript 语法开发后端应用。
  • 一些公司要求前端工程师掌握 Node。
  • 生态系统活跃,有大量开源库可以使用。
  • 前端开发工具大多基于 Node 开发。


Node是什么


  1. Node 是一个基于 Chrome V8引擎的 JavaScript 代码运行环境。


  1. 运行环境:
  • 浏览器(软件)能够运行 JavaScript 代码,浏览器就是 JavaScript 代码的运行环境。
  • Node(软件)能够运行 JavaScript 代码,Node 就是 JavaScript 代码的运行环境。


Node运行环境搭建


  1. 环境安装:Node官网

Node.js快速入门


Node.js组成


  • JavaScript 由三部分组成,ECMAScript、DOM、BOM。


  • Node.js 是由ECMAScriptNode环境提供的一些附加App组成的,包括文件、网络、路径等等一些更加强大的API。


Node.js的基础语法


所有 ECMAScript 语法在 Node 环境中都可以使用。


Node.js模块化开发


JavaScript 开发弊端


  1. JavaScript 在使用时存在两大问题:文件依赖命名冲突

文件依赖1.png

命名冲突:这种情况下,后面的值会覆盖掉前面的值。

1.png


软件中的模块化开发


一个功能就是一个模块,多个模块可以组成完整应用,抽离一个模块不会影响其他功能的运行。

1.png


Node.js模块化开发规范


  1. Node.js规定一个JavaScript文件就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到


  1. 模块内部可以使用exports对象进行成员导出,使用require方法导入其他模块。

1.png

导入模块时,后缀可以省略。


模块成员导出的另一种方式


  1. module.exports.version = version
  2. module.exports.sayHi = sayHiexportsmodule.exports的别名(地址引用关系),导出对象最终以module.exports为准
  3. 当 exports 对象和 moudle.exports对象指向的不是同一个对象时,以module.exports为准。


系统模块


什么是系统模块


Node 运行环境提供的 API都是以模块化的方式进行开发的,所以我们又称 Node 运行环境提供的 API 为系统模块。


系统模块fs文件操作


f:file 文件;s:sysstem 系统,文件操作系统。const fs = require('fs');

  1. 读取文件内容fs.readFile('文件路径/文件名称'[,'文件编码'],callback);
  2. 读取文件语法示例
// 读取上一级 css 目录下的 base.css
fs.readFile('../css/base.css','utf-8'(err,doc) => {
  // 如果文件读取发生错误,参数 err 的值为错误对象,否则 err 的值为 null。
  // doc 参数为文件内容
  if(err == null){
    // 在控制台输出文件内容
    console.log(doc)
  }
})


文件写入内容


fs.writeFile('文件路径/文件名称','数据',callback)

1.png

const content = '<h3>正在使用 fs.writeFile 写入文件内容</h3>'
fs.writeFile('../index.html',content,err ==> {
  if(err != null){
    console.log(err)
    return
  }
  console.log('文件写入成功')
})


如果写入的文件不在选择的文件路径下,系统会自动创建这个文件,


系统模块 path 路径操作

为什么要进行路径拼接?

  1. 不同操作系统的路径分割符不统一。
  2. /public/upload/avatar
  3. Windows 上是 \ /
  4. Linux 上是 /

路径拼接语法

path.join('路径','路径'...)

// 导入 path 模块
const path = require('path')
// 路径拼接
let finialPath = path.join('itcast','a','b','c.css')
// 输出结果 itcast\a\b\c.css


相对路径 VS 绝对路径


  • 大多数情况下使用绝对路径,因为相对路径有时候相对的是命令行工具的当前工作目录。
  • 在读取文件或者设置文件路径时都会选择绝对路径。
  • 使用 __dirname 获取当前文件所在的绝对路径。


第三方模块


什么是第三方模块


别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包。


第三方模块有两种存在形式


  • 以 js 文件的形式存在,提供实现项目具体功能的 API 接口。
  • 以命令行工具形式存在,辅助项目开发。


获取第三方模块


第三方模块的存储和分发npm(node package manager ):node 的第三方模块管理工具。

  1. 下载:npm install 模块名称
  2. 卸载:npm uninstall 模块名称
  3. 本地安装:将模块下载到当前项目中,供当前的项目使用。
  4. 全局安装:将模块下载到一个公共的目录中,所以项目都可以使用。
  • 命令行工具:全局安装。
  • 库文件:本地安装。


第三方模块 nodemon


  1. nodemon 是一个命令行工具,用以辅助项目开发。
  2. 在 Node.js 中,每次修改文件都要在命令行工具中重新执行该文件,非常繁琐。
  3. 使用步骤
  • 使用 npm install nodemon -g 下载它。
  • 在命令行工具中用 nodemon 命令代替 node 命令执行文件。


第三方模块 nrm


  1. nrm(npm registry manager):npm 下载地址切换工具。


  1. npm 默认的下载地址在国外,国内下载速度慢。


  1. 使用步骤
  • 使用 npm install nrm -g 下载它。
  • 查询可用下载地址列表 nrm ls。
  • 切换 npm 下载地址 nrm use 下载地址名称。
相关文章
|
20天前
|
Cloud Native 前端开发 JavaScript
前端开发者必看:不懂云原生你就OUT了!揭秘如何用云原生技术提升项目部署与全栈能力
【10月更文挑战第23天】随着云计算的发展,云原生逐渐成为技术热点。前端开发者了解云原生有助于提升部署与运维效率、实现微服务化、掌握全栈开发能力和利用丰富技术生态。本文通过示例代码介绍云原生在前端项目中的应用,帮助开发者更好地理解其重要性。
53 0
|
24天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
100 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
24天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
|
25天前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
24天前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
24天前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
|
24天前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
|
25天前
|
JavaScript 前端开发 Docker
前端的全栈之路Meteor篇(一):开发环境的搭建 -全局安装或使用容器镜像
本文介绍了如何搭建 Meteor 开发环境,包括全局安装 Meteor 工具和使用 Docker 镜像两种方法,以及创建和运行一个简单的 Meteor 项目的基本步骤。 Meteor 是一个全栈 JavaScript 框架,适用于构建实时 Web 应用程序。文章还提供了遇到问题时的解决建议和调试技巧。
|
24天前
|
JavaScript 前端开发 Serverless
前端全栈之路Deno篇:Deno2.0与Bun对比,谁更胜一筹?可能Deno目前更适合serverless业务
在前端全栈开发中,Deno 2.0 和 Bun 作为新兴的 JavaScript 运行时,各自展现了不同的优势。Deno 2.0 重视安全性和多平台兼容性,尤其是对 Windows 的良好支持和原生 TypeScript 支持;而 Bun 则以卓越的性能和简便的开发体验著称,适合快速迭代的小型项目。两者在不同场景下各具特色,Deno 更适合企业级应用和serverless,Bun 则适用于追求速度的项目。
105 1
|
24天前
|
JSON 前端开发 数据格式
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。