Node2

钮祜禄_欧包
170 阅读9分钟

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')
    })
复制代码
avatar
文章
阅读
粉丝