nodejs笔记【2】

本文介绍了Node.js的安装问题,包括安装慢的原因及解决办法,详细讲解了如何使用nrm和cnpm管理下载源,如何创建和使用package.json文件,以及在安装过程中可能遇到的问题及其解决策略。同时,还提供了相关命令的使用示例。

1. 安装慢原因与解决办法


原因:因为 npmjs.com 的服务器在国外,所有有时候下载速度很慢,或者总是断开

解决:解决方案就是更换下载源,最好是国内的下载源

  • 安装 nrm,通过nrm更换下载源,更换之后,仍然使用 npm 命令安装模块
  • 安装 cnpm,以后通过cnpm 安装,安装后,使用 cnpm 安装模块

2. nrm安装

介绍:

通过安装 nrm 的方式,可以选择和切换下载源

操作步骤:

  • 使用npm install nrm –g 下载它
  • 查询可用下载地址列表 nrm ls
  • 切换npm下载地址 nrm use 下载地址名称
  • 下载模块 npm install 模块名称

3. cnpm安装


3.1 官网文档地址

地址链接

3.2 安装后的位置

位置:C:\Users\六个花生\AppData\Roaming\npm\node_modules

3.3 下载方式

  • 默认下载(特别慢,不推荐)

    npm install -g cnpm
    
  • 使用淘宝镜像下载

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

3.4 安装成功后,使用 cnpm 命令安装第三方模块,如

 cnpm install jquery

3.5 总结:

  • 无论使用 nrm 还是 cnpm 都需要使用 npm 下载包
  • 使用 nrm 切换下载源之后,仍然使用 nmp 命令安装包
  • 安装 cnpm 后,需要使用 cnpm 命令安装包,才会从淘宝镜像下载,如果仍然使用 npm 命令,仍然会从默认的下载源安装

3.6 也可以两种方式都不用,而是使用安装包的时候指定下载源

npm install mysql --registry=https://registry.npm.taobao.org

4. package.json 文件

在个项目拷贝给他人时,删除 node_modules,他人再使用 nmp 命令进行恢复安装

这就需要一个文件能够记录,当前项目都使用了哪些模块,这个文件就是 package.json

4.1 创建package.json

默认情况下,是没有此文件的,可以使用命令生成此文件

新建项目,然后在此项目下打开命令行工具,运行如下命令

npm init -y

4.2 package.json文件内容如下

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4.3 安装模块

npm install mysql

在这里插入图片描述

4.4 删除node_modules

将项目拷贝给别人时,直接删除 node_modules 目录即可

4.5 恢复安装

运行如下命令,即可根据package.json 中的记录恢复安装

npm install

4.6 总结:

  • 创建项目后首先执行 npm init -y 命令,创建 package.json 文件
  • 将项目发送给别人之前,先删除 node-modules 目录
  • 别人接受并打开项目后,运行 npm install命令,根据 package.json 中的 dependencies 属性安装相关的包

5. 遇到的问题


5.1 用npm install nrm -g安装nrm包的时候,出错,百度原因提示可能npm版本过低(已解决,有疑问)

解决办法:

  1. 运行npm install -g npm
  2. 再运行npm install nrm -g(原本这步结束后本应该成功,单还是报原来的错误)
  3. 最终我重启了vscode,重新运行npm install nrm -g成功

总结

  • 并不知道运行npm install -g npm命令是否对后来操作有用
  • 重启绝对有用

5.2 没有使用命令删除干净出现错误(解决,我没遇到过,只是记录一下)

在这里插入图片描述

命令删除

npm uninstall cnpm

5.3 一直运行[nodemon] restarting due to changes...,不更新我的代码(已解决)

在这里插入图片描述

  1. 配置环境变量

  2. 在环境变量中分别加入 C:\WindowsC:\Windows\system32C:\Windows\System32\wbem

    在这里插入图片描述

  3. 再次打开vscode就可以运行成功

    在这里插入图片描述

还有其他人的解决办法,我试验成功一个别的没看

链接地址

6. 用到的命令


  • nrm 安装命令:npm install nrm –g`

  • 查询下载地址列表:nrm ls

    在这里插入图片描述

  • 切换npm下载地址:nrm use 下载地址名称

    在这里插入图片描述

  • 下载模块:npm install 模块名称

  • 使用cnpm安装第三方模块:cnpm install jquery

  • 指定下载源:npm install mysql --registry=https://registry.npm.taobao.org

  • 创建package.json文件:npm init -y

  • 恢复安装命令: npm install

  • 启动命令:npmmon 文件名

  • 删除命令:npm uninstall 模块名

7. 案例实现(全部代码写在了最后)


7.1 效果

在这里插入图片描述

7.2 过程

  1. 新建一个js文件,例如index.js

    在这里插入图片描述

  2. 里面写内容

    • 引入系统模块 http

      // const 是常量 不可修改
      const http = require('http');
      
    • 创建http服务,设置常量接收

      // 创建 http 服务  设置常量接收
      const app = http.createServer();
      
    • 启动服务

      // 启动服务
      app.listen(3000,function(){
          console.log('服务成功启动:http://127.0.0.1:3000');
      })
      

      在这里插入图片描述

    • 监测客户端的请求,并给予响应

      // 监测客户端的请求,并给予响应
      app.on('request',function(req,res){
          // console.log(req.url);
          if(req.url=='/index' || req.url=='/'){
              res.end('index');
          }else if(req.url=='/order'){
              res.end('order');
          }else if(req.url=='/my'){
              res.end('my');
          }else{
              res.end('sorry');
          }
      })
      

      在这里插入图片描述

    • 新建文件夹,例如html文件夹。里面新建几个文件,我建了4个(index.htmlorder.htmlmy.htmlerror.html)

      在这里插入图片描述

    • 里面随便写写样式进行测试,以index.html文件为例

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              h1{
                  font-size: 20px;
                  font-weight: 900;
                  color: red;
              }
          </style>
      </head>
      <body>
          <h1>home</h1>
      </body>
      </html>
      
    • index.js代码更新

      // 引入fs模块
      const fs = require('fs');
      // 监测客户端的请求,并给予响应
      app.on('request',function(req,res){
          // console.log(req.url);
          if(req.url=='/index' || req.url=='/'){
              let result = fs.readFileSync('html/index.html','utf8')
              res.end(result);
          }else if(req.url=='/order'){
              let result = fs.readFileSync('html/order.html','utf8')
              res.end(result);
          }else if(req.url=='/my'){
              let result = fs.readFileSync('html/my.html','utf8')
              res.end(result);
          }else{
              let result = fs.readFileSync('html/error.html','utf8')
              res.end(result);
          }
      })
      
    • 终端敲入nodemon .\index.js 打开看效果

      在这里插入图片描述

7.3 最终代码

  • index.js页面

    // 引入系统模块 http
    // const 是常量 不可修改
    const http = require('http');
    // 引入fs模块
    const fs = require('fs');
    // 创建 http 服务  设置常量接收
    const app = http.createServer();
    // 监测客户端的请求,并给予响应
    app.on('request',function(req,res){
        // console.log(req.url);
        if(req.url=='/index' || req.url=='/'){
            let result = fs.readFileSync('html/index.html','utf8')
            res.end(result);
        }else if(req.url=='/order'){
            let result = fs.readFileSync('html/order.html','utf8')
            res.end(result);
        }else if(req.url=='/my'){
            let result = fs.readFileSync('html/my.html','utf8')
            res.end(result);
        }else{
            let result = fs.readFileSync('html/error.html','utf8')
            res.end(result);
        }
    })
    // 启动服务
    app.listen(3000,function(){
        console.log('服务成功启动:http://127.0.0.1:3000');
    })
    
  • index.html页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            h1{
                font-size: 20px;
                font-weight: 900;
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>home</h1>
    </body>
    </html>
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值