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

前端服务器的搭建

在本文中,我们将介绍如何安装和配置 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.mzph.cn/bicheng/48527.shtml

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

相关文章

类和对象(三)

默认成员函数 接下来继续看剩下的两个默认成员函数。 const成员函数 将const修饰的成员函数称之为const成员函数,const修饰成员函数放到成员函数参数列表的后 ⾯。const实际修饰该成员函数隐含的this指针,表明在该成员函数中不能对类的任何成员进⾏修…

秋招突击——7/17——复习{二分查找——搜索插入位置、搜索二维矩阵,}——新作{链表——反转链表和回文链表,子串——和为K的子数组}

文章目录 引言新作二分模板二分查找——搜索插入位置复习实现 搜索二维矩阵复习实现 新作反转链表个人实现参考实现 回文链表个人实现参考实现 和为K的子数组个人实现参考实现 总结 引言 今天算法得是速通的,严格把控好时间,后面要准备去面试提前批了&a…

C语言实例-约瑟夫生者死者小游戏

问题: 30个人在一条船上,超载,需要15人下船。于是人们排成一队,排队的位置即为他们的编号。报数,从1开始,数到9的人下船,如此循环,直到船上仅剩15人为止,问都有哪些编号…

C语言 | Leetcode C语言题解之第260题只出现一次的数字III

题目&#xff1a; 题解&#xff1a; int* singleNumber(int* nums, int numsSize, int* returnSize) {int xorsum 0;for (int i 0; i < numsSize; i) {xorsum ^ nums[i];}// 防止溢出int lsb (xorsum INT_MIN ? xorsum : xorsum & (-xorsum));int type1 0, type2…

【Mysql】Docker下Mysql8数据备份与恢复

[TOC] 【Mysql】Docker下Mysql8数据备份与恢复 1 创建Mysql容器 格式 docker run -d --name容器名称 -p 宿主端口号:3306 -e MYSQL_ROOT_PASSWORDmysql密码 -e MYSQL_PASSWORDmysql密码 -e TZAsia/Shanghai -v 宿主目录-数据:/var/lib/mysql -v 宿主目录-备份数据:/back…

多态性概念 OOPS

大家好&#xff01;今天&#xff0c;我们将探讨面向对象编程 (OOP) 中的一个基本概念 - 多态性。具体来说&#xff0c;我们将重点介绍其三种主要形式&#xff1a;方法重载、方法覆盖和方法隐藏。对于任何使用 OOP 语言&#xff08;例如 C#&#xff09;的程序员来说&#xff0c;…

NET 语言识别,语音控制操作、语音播报

System.Speech. 》》System.Speech.Synthesis; 语音播报 》》System.Speech.Recognition 语音识别 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Speech.Recog…

mac二进制安装operator-sdk

0. 前置条件 1. 安装go 安装步骤略。 1. 下载operator-sdk源码包 https://github.com/operator-framework/operator-sdk 1.1 选择适合当前go版本的operator版本&#xff0c;在operator-sdk/go.mod文件中可以查看Operator-sdk使用的go版本。 2. 编译 源码包下载后&#x…

C语言航空售票系统

以下是系统部分页面 以下是部分源码&#xff0c;需要源码的私信 #include<stdio.h> #include<stdlib.h> #include<string.h> #define max_user 100 typedef struct ft {char name[50];//名字char start_place[50];//出发地char end_place[50];//目的地char …

JAVA 异步编程(线程安全)二

1、线程安全 线程安全是指你的代码所在的进程中有多个线程同时运行&#xff0c;而这些线程可能会同时运行这段代码&#xff0c;如果每次运行的代码结果和单线程运行的结果是一样的&#xff0c;且其他变量的值和预期的也是一样的&#xff0c;那么就是线程安全的。 一个类或者程序…

多线程初阶(二)- 线程安全问题

目录 1.观察count 原因总结 2.解决方案-synchronized关键字 &#xff08;1&#xff09;synchronized的特性 &#xff08;2&#xff09;如何正确使用 语法格式 3.死锁 &#xff08;1&#xff09;造成死锁的情况 &#xff08;2&#xff09;死锁的四个必要条件 4.Java标准…

若依二次开发

口味改造 原&#xff1a; 改造&#xff1a; 1./** 定义口味名称和口味列表的静态数据 */ 2.改变页面样式 3.定义储存当前选中的口味列表数组&#xff0c;定义改变口味名称时更新当前的口味列表 4.改变页面样式 6.格式转换 7.定义口味列表获取焦点时更新当前选中的口味列表

【DGL系列】简单理解graph.update_all和spmm的区别

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 目录 背景介绍 源码分析 小结一下 背景介绍 我们在看GNN相关的论文时候&#xff0c;都会说到邻接矩阵与特征矩阵之间是用到了spmm&#xff0c;在很久…

深入理解Linux网络(二):UDP接收内核探究

深入理解Linux网络&#xff08;二&#xff09;&#xff1a;UDP接收内核探究 一、UDP 协议处理二、recvfrom 系统调⽤实现 一、UDP 协议处理 udp 协议的处理函数是 udp_rcv。 //file: net/ipv4/udp.c int udp_rcv(struct sk_buff *skb) {return __udp4_lib_rcv(skb, &udp_…

【web】-反序列化-to_string

<?php highlight_file(__FILE__); class A{public $s;public function __destruct(){echo "hello".$this->s;}} class B{public $cmd;public function __toString(){system($this->cmd);return 1;} } unserialize($_GET[code]); __toString()当对象被当着…

《梦醒蝶飞:释放Excel函数与公式的力量》17.1使用命名范围和工作表函数

第17章&#xff1a;使用命名范围和工作表函数 17.1 命名范围的优势 在Excel中&#xff0c;使用命名范围是一个强大且灵活的功能&#xff0c;它可以极大地提高工作效率和公式的可读性。命名范围不仅使公式更容易理解&#xff0c;还减少了错误的可能性。以下将详细介绍命名范围的…

自然语言大模型介绍

1 简介 最近一直被大语言模型刷屏。本文是周末技术分享会的提纲&#xff0c;总结了一些自然语言模型相关的重要技术&#xff0c;以及各个主流公司的研究方向和进展&#xff0c;和大家共同学习。 2 Transformer 目前的大模型基本都是Transformer及其变种。本部分将介绍Transf…

24暑假算法刷题 | Day18 | LeetCode 530. 二叉搜索树的最小绝对差,501. 二叉搜索树中的众数,236. 二叉树的最近公共祖先

目录 530. 二叉搜索树的最小绝对差题目描述题解 501. 二叉搜索树中的众数题目描述题解 236. 二叉树的最近公共祖先题目描述题解 530. 二叉搜索树的最小绝对差 点此跳转题目链接 题目描述 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差…

Python 更换 pip 源详细指南

目录 前言pip 国内源临时换源方法一&#xff1a;添加参数方法二&#xff1a;设置环境变量 永久换源方法三&#xff1a;修改配置方法四&#xff1a;pip 命令修改 总结 前言 在我们使用 Python 3 时&#xff0c;pip 是一个不可或缺的工具&#xff0c;它用于安装和管理第三方库。…

在虚拟机 CentOS7 环境下安装 MySQL5.7 数据库

配置目标 在虚拟机的 Linux CentOS7 环境下安装 MySQL5.7 版数据库&#xff0c;并能从宿主机 Windows 系统连接该数据库&#xff08;默认端口&#xff1a;3306&#xff09;。 1. 准备工作 WMware 虚拟机&#xff1a;VMware Workstation 16 ProCentOS7 镜像&#xff1a;CentO…