WEB前端09-前端服务器搭建(Node.js/nvm/npm)

news2024/9/21 20:31:09

前端服务器的搭建

在本文中,我们将介绍如何安装和配置 nvm(Node Version Manager)以方便切换不同版本的 Node.js,以及如何设置 npm(Node Package Manager)使用国内镜像,并搭建一个简单的前端服务器。

1.Node.js简介

什么是 Node.js?

Node.js 是一个基于 Chrome V8 引擎构建的 JavaScript 运行时,允许开发者在服务器端运行 JavaScript 代码。特别适用于需要处理大量并发连接的应用程序。与传统的服务器端技术不同,Node.js 使用事件驱动的非阻塞 I/O 模型,这使得它非常轻量和高效。

为什么学习Node.js?

实时应用: Node.js 非常适合构建实时应用,如聊天程序、在线游戏和协作工具。它的事件驱动模型可以高效地处理大量并发连接,确保实时性。

API 服务器: 由于 Node.js 的高性能和非阻塞 I/O 特性,它是构建 RESTful API 和 GraphQL 服务器的理想选择。Node.js 可以处理大量并发请求,确保 API 的响应速度。

单页应用(SPA): 通过与前端框架(如 React、Vue 和 Angular)结合,Node.js 可以用于构建单页应用的后端服务,提供数据接口和认证服务。

微服务架构: Node.js 非常适合实现微服务架构。开发者可以将应用程序拆分为多个小型服务,每个服务专注于特定功能,使用轻量级通信协议进行交互。

如何开始使用 Node.js

  1. 安装 Node.js: 访问 Node.js 官网 下载并安装最新的稳定版本。安装完成后,可以通过以下命令检查版本:

    node -v
    npm -v
    
  2. 初始化项目: 使用 NPM 初始化一个新项目:

    mkdir my-node-app
    cd my-node-app
    npm init -y
    

    这将生成一个 package.json 文件,用于管理项目依赖和配置信息。

  3. 安装依赖: 例如,安装 Express 框架以快速搭建 Web 服务器:

    npm install express
    
  4. 编写代码: 创建一个简单的服务器文件 app.js

    const express = require('express');
    const app = express();
    
    app.get('/', (req, res) => {
      res.send('Hello, Node.js!');
    });
    
    app.listen(3000, () => {
      console.log('Server is running on http://localhost:3000');
    });
    
  5. 运行服务器

    node app.js
    

    打开浏览器访问 http://localhost:3000,你将看到 “Hello, Node.js!” 的欢迎信息。

2. 掌握 nvm

Node.js 是现代 Web 开发中的重要工具之一,然而随着项目需求的变化,不同项目可能需要使用不同版本的 Node.js。这时,Node 版本管理器(nvm)就显得尤为重要。nvm 允许我们在同一台机器上轻松地安装、切换和管理多个版本的 Node.js。本篇博客将介绍 nvm 的安装、配置和使用方法。

  • 什么是 nvm?

nvm,全称 Node Version Manager,是一个用于管理多个 Node.js 版本的命令行工具。它使开发者能够在不同项目间灵活切换 Node.js 版本,确保项目的兼容性和稳定性。

  • 安装nvm
1. **卸载现有的 Node.js**:在安装 nvm 之前,需要先卸载掉系统中现有的 Node.js。
2. **选择目录时避免空格**:在安装 nvm 和 Node.js 时,选择的目录中一定不要出现空格。
3. **以管理员身份运行命令提示符**:执行 nvm 命令时,建议使用【以管理员身份运行】的 cmd 程序。
4. **设置国内镜像地址**:为了加快下载速度,建议首次运行前设置好国内镜像地址:
//nvm node_mirror 
 http://npm.taobao.org/mirrors/node/
//nvm npm_mirror 
 https://npm.taobao.org/mirrors/npm/

查看可用的 Node.js 版本:

nvm list available

建议安装 LTS(长期支持版):

nvm install 版本号

安装后,可以通过 nvm list 查看已安装的版本,并进行版本切换:

nvm use 版本号

安装后,nvm 会自动添加环境变量,但可能需要手工添加 Node.js 的 PATH 环境变量。

3. 检查 npm

npm 是 JavaScript 的包管理器,类似于 Java 世界的 Maven。为了确保 npm 使用国内镜像,可以进行如下设置:

检查当前镜像:

npm get registry

如果返回的不是 https://registry.npm.taobao.org/,需要进行设置:

npm config set registry https://registry.npm.taobao.org/

解决 npm 安装包时的 CERT_HAS_EXPIRED 错误

在安装 npm 包时遇到 CERT_HAS_EXPIRED 错误,通常是由于证书过期或网络问题。可以通过以下几种方法来解决:

  • 1. 更新 npm

首先,尝试更新 npm 版本:

npm install -g npm
  • 2. 更改 npm 的 registry 源

可以尝试将 npm 的 registry 源更改为官方源或其他可用的镜像源:

  1. 设置 npm 使用官方源:

    npm config set registry https://registry.npmjs.org/
    
  2. 或者使用其他镜像源,例如腾讯的镜像源:

    npm config set registry https://mirrors.cloud.tencent.com/npm/
    
4. 搭建前端服务器

接下来,我们将使用 npm 和 express 搭建一个简单的前端服务器。

  1. 新建一个保存项目的文件夹,进入文件夹并执行以下命令:

    npm install express --save-dev
    
    //Express 是一个轻量级且灵活的 Node.js Web 应用框架,提供了丰富的功能用于构建单页、多页和混合 Web 应用。它基于 Connect 中间件架构,允许开发人员在请求处理链中插入各种中间件,从而实现复杂的功能。
    

    image-20240721112626616

  2. 修改 package.json 文件:

    {
      "type": "module",
      "devDependencies": {
        "express": "^4.19.2"
      }
    }
    
    • 其中 devDependencies 是通过 npm install --save-dev 添加的依赖。(相当于pom.xml)
  3. 编写 main.js 代码:

    import express from 'express'
    const app = express()
    
    app.use(express.static('./'))
    app.listen(7070)
    
    //解释
    import express from 'express':
    这行代码使用ES6的模块导入语法,从Node.js的Express框架中导入express模块。
    
    const app = express():
    这行代码创建了一个Express应用程序实例,将其赋值给变量app。Express是一个流行的Node.js Web应用程序框架,用于简化构建Web应用程序和API。
    
    app.use(express.static('./')):
    这行代码设置Express应用程序使用内置的express.static中间件。该中间件用于提供静态文件,比如HTML、图像、样式表和客户端JavaScript文件,而不需要通过路由来处理。'./'表示将当前目录作为静态资源目录,即Web服务器根目录。
    
    app.listen(3000):
    这行代码启动Express应用程序监听3000端口上的HTTP请求。当运行该代码后,Express将开始监听来自3000端口的所有HTTP请求,并将其分配给相应的路由或静态文件处理。
    
  4. 运行前端服务器:

    node main.js
    

image-20240721114422420

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Merge-On-Read

基本介绍 Iceberg的Merge-On-Read Merge-On-Read,顾名思义,就是在读取的时候进行合并,是与Copy-On-Write相反的一种模式 在Iceberg中,Merge-On-Read同样用于行级更新,整体过程如下 当更新数据时,Iceber…

巴黎奥运会倒计时 一个非常不错的倒计时提醒

巴黎奥运会还有几天就要开幕了,大家应该到处都可以看到巴黎奥运会的倒计时,不管是电视上,还是网络里,一搜索奥运会,就会看到。倒计时其实是一个我们在生活中很常用的一个方法,用来做事情的提醒,…

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(九)-无人机区域地面探测与避让(DAA)

引言 3GPP TS 23.256 技术规范,主要定义了3GPP系统对无人机(UAV)的连接性、身份识别、跟踪及A2X(Aircraft-to-Everything)服务的支持。 3GPP TS 23.256 技术规范: 【免费】3GPPTS23.256技术报告-无人机系…

【CSS in Depth 2 精译_020】3.3 元素的高度

当前内容所在位置(可进入专栏查看其他译好的章节内容) 第一章 层叠、优先级与继承(已完结) 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位(已完结) 2.1 相对…

Linux:Linux进程概念

目录 前言 1. 冯诺依曼体系结构 2. 操作系统 2.1 什么是操作系统 3. 进程 3.1 基本概念 3.2 描述进程——PCB 3.3 进程和程序的区别 3.4 task_struct-PCB的一种 3.5 task_struct的内容分类 4. 查看进程 4.1 通过系统文件查看进程 4.2 通过ps指令查看进程 4.3 …

Redis7(二)Redis持久化双雄

持久化之RDB RDB的持久化方式是在指定时间间隔,执行数据集的时间点快照。也就是在指定的时间间隔将内存中的数据集快照写入磁盘,也就是Snapshot内存快照,它恢复时再将硬盘快照文件直接读回到内存里面。 RDB保存的是dump.rdb文件。 自动触发…

记录些Spring+题集(3)

百万QPS下热点数据的收集方案 在高并发场景下,如京东、淘宝的秒杀活动开始时候,会有很多的用户同时抢购秒杀商品,由于同一个场次成百上千种商品参与秒杀活动,但是热点的商品往往就只有那么几十个左右,此时系统的90%的…

linux桌面运维---第八天

1、rm命令: 用法:删除一个文件或者目录。 语法:rm [选项] name... 选项: -f 即使原档案属性设为唯读,亦直接删除,无需逐一确认。-r 将目录及以下之档案亦逐一删除。需要进行一一确认 2、ln命令&#…

Lamp 小白菜鸟从入门到精通

前言 “LAMP包”的脚本组件中包括了CGIweb接口,它在90年代初期变得流行。这个技术允许网页浏览器的用户在服务器上执行一个程序,并且和接受静态的内容一样接受动态的内容。程序员使用脚本语言来创建这些程序因为它们能很容易有效的操作文本流&#xff0…

SpringBoot限制请求访问次数

本篇文章的主要内容是SpringBoot怎么限制请求访问次数。 当我们的服务端程序部署到服务器上后,就要考虑很多关于安全的问题。总会有坏人来攻击你的服务,比如说会窃取你的数据或者给你的服务器上强度。关于给服务器上强度,往往就有高强度给服务…

【ffmpeg入门】安装CUDA并使用gpu加速

文章目录 前言CUDACUDA是什么CUDA 的主要组成部分CUDA 的优点CUDA 的基本编程模型安装CUDA ffmpeg使用gpu加速为什么需要使用gpu加速1. 提高处理速度2. 减少 CPU 负载3. 提高实时处理能力4. 支持高分辨率和复杂编码格式5. 提供更好的可扩展性6. 提高能效 ffmpeg使用gpu加速常用…

在项目中加入 husky + lint-staged + eslint,代码检测格式化

背景 由于日常工作的多人协作中,会因为个人代码编写风格导致代码在不同人电脑上,会有异常代码格式的提示,为了解决这个小问题,我们可以使用 husky lint-staged 来对代码进行一定程度上的格式化,使格式风格统一&#x…

初谈Linux信号-=-信号的产生

文章目录 概述从生活角度理解信号Linux中信号信号常见的处理方式理解信号的发送与保存 信号的产生core、term区别 概述 从生活角度理解信号 你在网上买了很多件商品,再等待不同商品快递的到来。但即便快递没有到来,你也知道快递来临时, 你该…

【 DHT11 温湿度传感器】使用STC89C51读取发送到串口、通过时序图编写C语言

文章目录 DHT11 温湿度传感器概述接线数据传送通讯过程时序图检测模块是否存在 代码实现总结对tmp tmp << 1;的理解对sendByte(datas[0]/10 0x30);的理解 DHT11 温湿度传感器 使用80C51单片机通过读取HDT11温湿度传感的数据&#xff0c;发送到串口。 通过时序图编写相应…

Windows下lapack的编译

文章目录 LAPACK库LAPACK库的地址LAPACK库的安装和编译 LAPACK库 LAPACK&#xff08;Linear Algebra PACKage&#xff09;库&#xff0c;是用Fortran语言编写的线性代数计算库&#xff0c;包含线性方程组求解&#xff08;AXb&#xff09;、矩阵分解、矩阵求逆、求矩阵特征值、…

javac详解 idea maven内部编译原理 自制编译器

起因 不知道大家在开发中&#xff0c;有没有过下面这些疑问。有的话&#xff0c;今天就一次解答清楚。 如何使用javac命令编译一个项目&#xff1f;java或者javac的一些参数到底有什么用&#xff1f;idea或者maven是如何编译java项目的&#xff1f;&#xff08;你可能猜测底层…

4核16G服务器支持多少人?4C16G服务器性能测评

租赁4核16G服务器费用&#xff0c;目前4核16G服务器10M带宽配置70元1个月、210元3个月&#xff0c;那么能如何呢&#xff1f;配置为ECS经济型e实例4核16G、按固定带宽10Mbs、100GB ESSD Entry系统盘。 那么问题来了&#xff0c;4C16G10M带宽的云服务器可以支持多少人同时在线&…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] LYA的生日派对座位安排(200分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线…

原神运行闪退报错怎么办解决办法 crossover24运行exe游戏程序错误没反应

对于Mac用户来说&#xff0c;能够在Mac上体验Windows游戏是一种极大的便利。然而&#xff0c;当尝试运行热门游戏《原神》时&#xff0c;一些用户可能会遇到闪退或报错的问题。这不仅影响了游戏体验&#xff0c;也让人倍感挫败。幸运的是&#xff0c;有多种方法可以帮助解决这些…

优化德育评估流程:智慧职校的考核类型设置功能

智慧职校德育管理系统的引入标志着教育领域向着更加智能化、高效化方向迈进的重要一步。其中&#xff0c;考核类型设置功能作为系统的核心模块之一&#xff0c;扮演着不可或缺的角色。这一功能的创新之处在于它赋予了学校前所未有的灵活性和自主权&#xff0c;让教育者能够根据…