Node2npm 查看包的所有可下载版本命令: npm view 包名 versions 示例: npm view

node的命令

1. npm 查看包的所有可下载版本
- 命令: npm view 包名 versions
- 示例: npm view express versions
1. npm 下载指定版本的包
- 命令: npm i 包名@你需要下载的版本号
- 示例: npm i express@3.4.1
1. npm 卸载指定的包
- 命令: npm uninstall 包名 || npm un 包名
- 示例: npm uninstall express || npm un express
1. npm 下载所有的包 (package.json中记录的所有的包)
- 1. 右键json文件终端打开(这一步的目的是为了确保终端的路径是正确的)
- 1. 输入命令: **npm install || npm i **
1. npm切换淘宝源
- 命令: npm config set registry registry.npmmirror.com/
- 将来到公司,可能需要设置为公司的源
- 示例: npm config set registry 公司源的地址
- 如果npm下载的时候,下载一半卡着不动了,直接ctrl+c结束下载,或者关闭终端
1. npm 清除缓存
- 命令: npm cache clear -f (终端路径无所谓)
- 手动删除:
- 1. C盘
- 1. 用户
- 1. 用户名
- 1. AppData (这是一个隐藏的项目)
- 1. Roaming
- 1. 找到 npm-cache,然后删除这个文件夹

认识nodemon

可以理解为一个"软件", 只不过看不到而已
这个软件可以帮助我们提供一个与 node一样的环境, 去运行我们的JS代码
他就是基于node.js 开发出来的一个"软件"
安装命令: npm i nodemon -g (全局安装,这种方式安装完毕之后,你在电脑的任意一个文件目录内都可以使用)
如何使用:
- 以前 => node index.js
- 现在 => nodemon index.js
使用区别:
- node 启动的JS文件修改代码后,需要重新启动重新运行才能看到最新的效果
- nodemon 启动的JS文件修改代码后, 不需要重新启动, 直接能看到每次更新的代码
使用场景:
- node 项目书写完毕后,使用一次
- nodemon 项目正在开发的时候使用,这样可以避免每次修改代码需要重新在终端执行一次node

express开启基础服务器.js

需求: 借助 express 框架帮助我们搭建一个简易的服务器
因为express可以理解为第三方包
所以使用流程为:
- 1. 通过 npm下载到本地
- 1. 引入到当前文件中
- 1. 按照说明文档去使用

    // 0. 引入第三方包
    const express = require('express')
    // 1. 创建一个服务,为什么调用express就能得到一个服务器,这是框架写好的东西,我们只需要记住就行了
    const server = express()
    // 2. 监听一个端口号
    server.listen(8080, () => {
    console.log('服务开启成功,端口号为8080') //此时就可以去页面中访问这个服务器,直接输入localhost:端口号
})

启动终端, 输入nodemon 文件名, 然后打开浏览器输入localhost:8080 运行

开启静态资源

先准备文件:client文件夹>view文件夹>index.html

需求: 前端会给我们一个写完了的静态页面,我们负责放在服务器中
配置服务器,将前端给我们的"静态资源"展示出去

    // 0. 引入第三方包
    const express = require('express')
    //  1. 创建一个服务
    const server = express()
    /**
     * 重点: 不要纠结哪来的方法,这些方法都是框架给的!!!
     * 1.1 配置静态资源
     *    将来如果有请求的路径是/static,会运行后边的内容
     * 
     *    将来如果有请求的路径是/static,会将它切换为/client
     *    如果我们的页面路径是: http://localhost:8080/static/view/index.html
     *      相当于我们写了http://localhost:8080/client/view/index.html
     * */ 
    server.use('/static', express.static('./client'))
    // 2. 监听一个端口号
    server.listen(8080, () => {
      console.log('服务开启成功,端口号为8080') //此时就可以去页面中访问这个服务器,直接输入localhost:端口号
    })

启动终端, 输入nodemon 文件名, 然后打开浏览器输入http://localhost:8080/static/view/index.html 运行

修改inde.html文件内容,引入client文件夹下css文件夹下的index.css文件和client文件夹下js文件夹下的index.js文件

因为服务器内做了配置,只要是以'/static'开头的访问都会去到'/client这个目录内
- 具体配置需要查看index.js中的server.use() 开启静态资源
修改内容如下: <link rel="stylesheet" href="../css/index.css"> <script src="../js/index.js"></script>
换种方式引入: <link rel="stylesheet" href="/static/css/index.css"> <script src="/static/js/index.js"></script>

接收前端请求

接收前端请求.js(服务器端文件)

    // 0. 引入第三方包
    const express = require('express')
    //  1. 创建一个服务
    const server = express()
    // 1.1 配置静态资源
    server.use('/static', express.static('./client'))
    // 1.2 服务器的代码, 接收前端请求
    server.get('/goods/list', (req, res) => {
      // console.log('如果一个请求是get方式,并且地址是/goods/list的话,我会输出')
      /**
       * 第一个形参: 内部为请求报文
       * 第二个参数: 内部为响应报文,需要返回给前端的内容,放在这个形参内就好了
       * */ 
      /**
       * send() 由express框架提供,用来给前端返回一些内容
       * */ 
      res.send({
        code: 1,
        msg: '您请求的 /goods/list 接口成功'
      })
    })
    server.post('/users/info', (req, res) => {
      // 如果请求是post方式,并且请求的路径是/users/info,那么会执行这个函数
      res.send({
        code: 1,
        msg: '您请求的/users/info 地址成功'
      })
    })
    // 2. 监听一个端口号
    server.listen(8080, () => {
      console.log('服务开启成功,端口号为8080')
    })

修改client文件夹下js文件夹下的index.js文件

    console.log('我是index.js中输出的一串文本')
    // 前端的代码, 发送一个请求
    function myAjax1() {
      // console.log('向服务端发起一个请求')
      const xhr = new XMLHttpRequest()
      xhr.open('get', '/goods/list')
      xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText))
      }
      xhr.send()
    }
    myAjax1()

    function myAjax2() {
      // console.log('向服务端发起一个请求')
      const xhr = new XMLHttpRequest()
      xhr.open('post', '/users/info')
      xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText))
      }
      xhr.send()
    }
    myAjax2()

引入controller目录

新建controller文件夹,在其下面新建users.js文件和goods.js文件

user.js文件如下:

    // 专门存储请求与用户有关的请求处理函数
    exports.postUsersInfo = (req, res) => {
      res.send({
        code: 1,
        msg: '您请求的/users/info 地址成功'
      })
    }
    exports.postUsersSetName = (req, res) => {
      res.send({
        code: 1,
        msg: '您请求的/users/setName 地址成功'
      })
    }

goods.js文件如下:

    // 专门存储与请求商品有关的处理函数
    exports.getGoodsList = (req, res) => {
      res.send({
        code: 1,
        msg: '您请求的 /goods/list 接口成功'
      });
    }
    exports.getGoodsInfo = (req, res) => {
      res.send({
        code: 1,
        msg: '您请求的 /goods/info 接口成功'
      })
    }

服务端代码如下:

    // 0. 引入第三方包
    const express = require('express')
    const { getGoodsList, getGoodsInfo } = require('./controller/goods')
    const { postUsersInfo, postUsersSetName } = require('./controller/users')

    //  1. 创建一个服务
    const server = express()
    // 1.1 配置静态资源
    server.use('/static', express.static('./client'))
    // 1.2 服务器的代码, 接收前端请求
    server.get('/goods/list', getGoodsList)
    server.get('/goods/info', getGoodsInfo)
    server.post('/users/info', postUsersInfo)
    server.post('/users/setName', postUsersSetName)
    // 2. 监听一个端口号
    server.listen(8080, () => {
      console.log('服务开启成功,端口号为8080')
    })

注释: 在服务器端代码中server.get()的第二个参数,当建好goods.js文件并且导出代码写好后,在引入的时候只需要敲一部分代码,找到对应的变量,点回车,可以直接生成引入第三方包.

引入路由表.js

修改服务端代码如下:

    // 0. 引入第三方包
    const express = require('express')
    const { getGoodsList, getGoodsInfo } = require('./controller/goods')
    const { postUsersInfo, postUsersSetName } = require('./controller/users')
    //  1. 创建一个服务
    const server = express()
    // 1.1 配置静态资源
    server.use('/static', express.static('./client'))
    // 1.2 服务器的代码, 接收前端请求
    // server.get('/goods/list', getGoodsList)
    // server.get('/goods/info', getGoodsInfo)
    // server.post('/users/info', postUsersInfo)
    // server.post('/users/setName', postUsersSetName)
    /**
     * 新的概念:路由表
     *    如何配置路由表
     *        express 提供给我们了一个制作路由表的方法
     *        语法: express.Router()
     *        返回值: 一张空的路由表
     * */ 
    const GoodsRouter = express.Router()
    // 向空的路由表上添加内容
    GoodsRouter.get('/list', getGoodsList)
    GoodsRouter.get('/info', getGoodsInfo)
    // 注册使用这个路由表
    server.use('/goods', GoodsRouter)

    // 在创建一张空的路由表
    const UsersRouter = express.Router()
    // 向空的路由表上添加内容
    UsersRouter.post('/info', postUsersInfo)
    UsersRouter.post('/setName', postUsersSetName)
    // 注册使用这个路由表
    server.use('/users', UsersRouter)
    // 2. 监听一个端口号
    server.listen(8080, () => {
      console.log('服务开启成功,端口号为8080')
    })

引入路由总表与router目录

准备文件:

先创建一个client文件夹,在其下边新建三个文件夹分别是css,js,view,在这三个文件夹中分别创建文件为index.css文件,index.js文件,index.html文件

client文件夹下的css文件夹下index.css文件:

    body {
      background-color: greenyellow;
    }
    h1 {
      color: palevioletred;
      font-family: '宋体';
    }

client文件夹下的js文件夹下index.js文件:

    // 前端的代码, 发送一个请求
    function myAjax1() {
      // console.log('向服务端发起一个请求')
      const xhr = new XMLHttpRequest()
      xhr.open('get', '/goods/list')
      xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText))
      }
      xhr.send()
    }
    myAjax1()
    function myAjax2() {
      // console.log('向服务端发起一个请求')
      const xhr = new XMLHttpRequest()
      xhr.open('post', '/users/info')
      xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText))
      }
      xhr.send()
    }
    myAjax2()

client文件夹下的view文件夹下index.html文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <!-- <link rel="stylesheet" href="../css/index.css"> -->
      <link rel="stylesheet" href="/static/css/index.css">
    </head>
    <body>
      <h1>hello,我是前端写的静态页面</h1>
      <h1>但是我是由服务端帮我放在服务器上</h1>
      <!--
        因为服务器内做了配置,只要是以'/static'开头的访问都会去到'/client这个目录内
        具体配置需要查看index.js 1.1 步 开启静态资源
        -->
      <!-- <script src="../js/index.js"></script> -->
      <script src="/static/js/index.js"></script>
    </body>
    </html>

先创建一个cotroller文件夹,在其下边新建两个分表users.js文件和goods.js文件

goods.js文件如下:

    // 专门存储与请求商品有关的处理函数
    exports.getGoodsList = (req, res) => {
      res.send({
        code: 1,
        msg: '您请求的 /goods/list 接口成功'
      });
    }
    exports.getGoodsInfo = (req, res) => {
      res.send({
        code: 1,
        msg: '您请求的 /goods/info 接口成功'
      })
    }

users.js文件如下:

    // 专门存储请求与用户有关的请求处理函数
    exports.postUsersInfo = (req, res) => {
      res.send({
        code: 1,
        msg: '您请求的/users/info 地址成功'
      })
    }
    exports.postUsersSetName = (req, res) => {
      res.send({
        code: 1,
        msg: '您请求的/users/setName 地址成功'
      })
    }

先创建一个router文件夹,在其下边新建两个分表users.js文件和goods.js文件

router文件夹下的users.js文件如下

    const express = require('express')
    const { postUsersInfo, postUsersSetName } = require('../controller/users')
    // 在创建一张空的路由表
    const UsersRouter = express.Router()
    // 向空的路由表上添加内容
    UsersRouter.post('/info', postUsersInfo)
    UsersRouter.post('/setName', postUsersSetName)
    // 导入当前路由表
    module.exports = UsersRouter

router文件夹下的goods.js文件如下

    // 专门存放goods的路由表
    const express = require('express')
    const { getGoodsList, getGoodsInfo } = require('../controller/goods')

    // 创建一张路由分表
    const GoodsRouter = express.Router()
    // 向空的路由表上添加内容
    GoodsRouter.get('/list', getGoodsList)
    GoodsRouter.get('/info', getGoodsInfo)

    // 导出当前的路由分表(给 路由总表使用)
    module.exports = GoodsRouter

服务器端文件如下:

    // 0. 引入第三方包
    const express = require('express')
    const GoodsRouter = require('./router/goods')
    const UsersRouter = require('./router/users')
    //  1. 创建一个服务
    const server = express()
    // 1.1 配置静态资源
    server.use('/static', express.static('./client'))
    // 1.2 使用这个路由分表
    server.use('/goods', GoodsRouter)
    server.use('/users', UsersRouter)
    // 2. 监听一个端口号
    server.listen(8080, () => {
      console.log('服务开启成功,端口号为8080')
    })

引入总表:

在router文件夹下新建一个index.js文件:

    // 专门存放goods的路由表
    const express = require('express')
    const GoodsRouter = require('./goods')
    const UsersRouter = require('./users')
    // 在创建一张路由总表
    const Router = express.Router()

    // 向路由总表上 添加一些路由分表
    Router.use('/goods', GoodsRouter)
    Router.use('/users', UsersRouter)

    // 导出路由总表,给服务器使用
    module.exports = Router

修改client文件夹下的js文件夹下index.js文件:

    // 前端的代码, 发送一个请求
   function myAjax1() {
     const xhr = new XMLHttpRequest()
     xhr.open('get', '/api/goods/list')

     xhr.onload = function() {
       console.log(JSON.parse(xhr.responseText))
     }
     xhr.send()
   }
   myAjax1()

   function myAjax2() {
     const xhr = new XMLHttpRequest()
     xhr.open('post', '/api/users/info')
     xhr.onload = function() {
       console.log(JSON.parse(xhr.responseText))
     }
     xhr.send()
   }
   myAjax2()

引入总表后服务器端文件修改如下:

    // 0. 引入第三方包
    const express = require('express')
    const Router = require('./router')
    //  1. 创建一个服务
    const server = express()  
    // 1.1 配置静态资源
    server.use('/static', express.static('./client'))
    // 1.2 使用这个路由总表
    server.use('/api', Router)
    // 2. 监听一个端口号
    server.listen(8080, () => {
      console.log('服务开启成功,端口号为8080')
    })

注: 在终端输入nodemon 文件名,打开浏览器输入http://localhost:8080/static/view/index.html 运行
- 控制台输出结果:

根据引入路由总表与router目录中的文件修改get请求接收参数

修改client文件夹下的js文件夹下index.js文件:

    // 前端的代码, 发送一个请求
    function myAjax1() {
      const xhr = new XMLHttpRequest()
      xhr.open('get', '/api/goods/list?current=1&pageSize=12')
      xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText))
      }
      xhr.send()
    }
    myAjax1()
    function myAjax2() {
      const xhr = new XMLHttpRequest()
      xhr.open('post', '/api/users/info')
      xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText))
      }
      xhr.send()
    }
    myAjax2()
    function myAjax3() {
      const xhr = new XMLHttpRequest()
      xhr.open('get', '/api/goods/info?goodsId=10086')
      xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText))
      }
      xhr.send()
    }
    myAjax3()

修改cotroller文件夹下的goods.js文件:

    exports.getGoodsList = (req, res) => {
      // 1. 拿到参数
      const query = req.query;
      // 2.取数据库查询
      // 3.将查询到的数据,返回给前端
      res.send({
        code: 1,
        msg: '/goods/list请求成功',
        tips: `您当前请求的是第${query.current}页的数据,一共${query.pageSize}条`
      })
    }
    exports.getGoodsInfo = (req, res) => {
      /**
       * 当前函数会接收到一个参数 goodsId
       * 我们拿到之后,应该会去数据库查到对应的商品,然后将商品详情返回给前端
       * 
       * 在当前服务器中,我们使用的是express框架,所以我们可以借助框架,少做很多事
       * 比如当前请求的参数,express帮我们放在req.query 中
       * 
       * 注意:只有get方式可以通过req.query拿到
       * */ 
      // console.log(req.query)
      // 1. 接收到参数
      const query = req.query;
      // 2. 去数据库查询数据

      // 3. 将查询到的数据,返回给前端
      // console.log('服务器是这个函数处理请求')
      res.send({
        code: 1,
        msg: '/goods/info请求成功',
        tips: `你携带的参数是${query}, 查询到的商品详情为XXX`
      })
    }

服务器端文件如下:

    // 0.导入第三方模块
    const express = require('express')
    const Router = require('./router')
    // 1.开启服务
    const server = express()
    // 1.1开启静态服务
    server.use('/static', express.static('./client'))
    // 1.2配置请求路由
    server.use('/api', Router)
    // 2.监听一个端口号
    server.listen(8080, () => {
      console.log('服务器开启成功')
    })

注: 在终端运行nodemon 文件名后,打开浏览器输入http://localhost:8080/static/view/index.html 运行
运行结果:

根据引入路由总表与router目录中的文件修改post请求接收参数

修改client文件夹下的js文件夹下index.js文件:

    // 前端的代码, 发送一个请求
    function myAjax1() {
      const xhr = new XMLHttpRequest()
      xhr.open('get', '/api/goods/list?current=1&pageSize=12')
      xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText))
      }
      xhr.send()
    }
    myAjax1()
    function myAjax2() {
      const xhr = new XMLHttpRequest()
      xhr.open('post', '/api/users/info')
      xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText))
      }
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
      xhr.send('id=20040216')
    }
    myAjax2()
    function myAjax3() {
      const xhr = new XMLHttpRequest()
      xhr.open('get', '/api/goods/info?goodsId=10086')
      xhr.onload = function() {
        console.log(JSON.parse(xhr.responseText))
      }
      xhr.send()
    }
    myAjax3()

修改cotroller文件夹下的users.js文件:

    exports.postUsersInfo = ((req, res) => {
   /**
     *  get 请求的时候 参数是拼接在 路径后的, 所以 express 能够直接帮助我们解析出来
     *  但是 post 的方式, 参数是在 请求体中的, 因为 请求体的东西比较多, 所以 express 不会帮我们解析
     *  所以就只能我们自己来写代码接收参数了~
     *  如果不想自己写, 就能找人帮你写, 现在恰好有一个人写好了一个接收参数的代码, 上传到 npm 仓库中
     *  我们就可以把他当成一个第三方模块, 下载 导入 使用
     *  这个第三方包的名字就叫 body-parser, 这个第三方包比较特殊, 是 express 所依赖的第三方包
     *  所以我们没有下载但是 node_modules 也有
     *  但是! express 在每年都会说一句 请不要使用因为明年我就不依赖了, 需要你自己下载
     */
  // 1. 拿到参数
  const myBody = req.body
  // 2. 取数据库查询对应的用户详情
  // 3. 将查询到的数据,返回给前端
  res.send({
    code: 1,
    msg: '/users/info地址成功',
    tips: `您请求的是ID ${myBody.id} 的用户`
  })
})
exports.postUsersSetName = (req, res) => {
  res.send({
    code: 1,
    msg: '/users/setName地址成功',
  })
}

修改服务器端文件如下:

    // 0.导入第三方模块
    const express = require('express')
    const Router = require('./router')
    const bodyParser = require('body-parser')
    /**
     *  请熟读并背诵全文
     *  在 express 框架中
     *      如果是 get 请求, 那么参数会被 express 框架解析到 req.query 中
     *      如果是 post 请求, 那么参数不会被 express 框架解析
     *          我们需要利用一个第三方包帮我们去解析 (body-parser)
     *          这个第三方包会将我们的参数解析到 req.body 中
    */
    // 1.开启服务
    const server = express()
    // 1.1 解析post参数
    // 解析 application/x-www-form-urlencoded (普通字符串)
    server.use(bodyParser.urlencoded({ extended: false }))
    // 解析 application/json (json字符串)
    server.use(bodyParser.json())
    // 1.2开启静态服务
    server.use('/static', express.static('./client'))
    // 1.3配置请求路由
    server.use('/api', Router)
    // 2.监听一个端口号
    server.listen(8080, () => {
      console.log('服务器开启成功')
    })

注:在终端运行nodemon 文件名后,打开浏览器输入http://localhost:8080/static/view/index.html 运行
运行结果:

Node2

node的命令

认识nodemon

express开启基础服务器.js

开启静态资源

接收前端请求

引入controller目录

引入路由表.js

引入路由总表与router目录

根据 引入路由总表与router目录 中的文件修改get请求接收参数

根据 引入路由总表与router目录 中的文件修改post请求接收参数

根据引入路由总表与router目录中的文件修改get请求接收参数

根据引入路由总表与router目录中的文件修改post请求接收参数