Node.js学习第三天 初识express框架,express的基本使用

文章目录

• Expreses
• • 初始Express
  • • Express简介
    • • 什么是Express
      • 进一步了解Express
      • Express能做什么
    • Express的基本使用
    • • 安装
      • 创建基本的Web服务器
      • 监听GET请求
      • 监听POST请求
      • 把内容响应给客户端
      • 获取URL中携带的查询参数
      • 获取URL中的动态参数
    • 托管静态资源
    • • express.static()
      • 托管多个静态资源
      • 挂载路径前缀
    • nodemon
    • • 介绍
      • 安装
      • 使用

Expreses

初始Express

Express简介

什么是Express

官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。

Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。

Express 的中文官网： http://www.expressjs.com.cn/

进一步了解Express

Express能做什么

对于前端程序员来说 , 最常见的两种服务器 , 分别是

• Web网站服务器 : 专门对外提供Web网页资源的服务器
• API接口服务器 : 专门对外提供API的接口服务器

使用Express , 我们可以方便快捷地创建以上的这两种服务器

Express的基本使用

安装

在项目所处的目录中 , 运行命令 , 即可将Express安装到项目中使用

npm i express
在黑马程序员的课程中 推荐安装的是4.17.1
npm i exprss@4.17.1

从Express官方的历史版本可以看出

4.17.1版本发布将近3年后, 才出现了4.17.2版本

说明4.17.1是这段时间最稳的,也是安装最多的

创建基本的Web服务器

//1.导入Express
const express = require('express')
//2.创建web服务器
const app = express()
//3.启动web服务器
app.listen(80,() => {
    console.log('express server running at http://127.0.0.1')
})

监听GET请求

通过app.get()方法 , 可以监听客户端的GET请求

const express = require('express')
//创建web服务器
const app = express()
//监听GET请求
/*
参数1 : 请求的URL地址
参数2 : 请求对应的处理函数
        req 请求对象 
        res 响应对象
*/
app.get('/user',(req,res) =>{
    res.send({name:'zs',age:20,gender:'boy'})
})
//启动web服务器
app.listen(80,() => {
    console.log('express server running at http://127.0.0.1')
})

监听POST请求

通过app.post()方法 , 可以监听客户端的POST请求

//监听POST请求
/*
参数和上面一样
*/
app.post('/user',(req,res)=>{
    res.send('请求成功')
})
 

把内容响应给客户端

通过 res.send()方法,可以把处理好的内容, 发送给客户端

app.get('/user',(req,res) =>{
    res.send({name:'zs',age:20,gender:'boy'})
})
app.post('/user',(req,res)=>{
    res.send('请求成功')
})

获取URL中携带的查询参数

通过req.query 对象 , 可以访问到客户端通过查询字符串的形式,发送到服务器的参数,拿到这些参数后, 会把参数解析到req.query对象身上

app.get('/',(req,res)=>{
    //req.query 默认是一个空对象
    //客户端使用 ?name=za&age=20这种查询字符串形式,发送到服务器端的参数
    //可以通过req.query 对象访问到,例如
    //req.query.name      req.query.age
    console.log(req.query)
 
})

此时我们访问http:localhost/?name='zs'&id=5 , 就会看到请求的信息

获取URL中的动态参数

通过req.params对象, 可以访问到URL中的动态参数部分 , 通过:号去匹配参数到 req.params身上

app.get('/user/:id',(req,res) => {
    ///res.params 默认是一个空对象 
    // 此处的 :id是一个动态参数 , id是参数名
    // :号是动态参数的一个标志 , 这个参数名无所谓
    // 会自动去匹配这个 动态参数 到 res.params身上
    console.log(req.params)
    res.send(req.params)
})

此时我们访问http://localhost/user/58 , 就会得到数字58

托管静态资源

express.static()

express提供了一个函数 , 叫做express.static() , 通过他 ,我们可以非常方便地创建一个静态资源服务器

我们想去开放某一个目录下的文件, 只需要将这个目录静态托管即可

如果要访问一些资源,我们只需要在URL跟上资源名, 然后服务器就会去我托管的目录下去寻找并相应给客户端

app.use(express.static('目录名'));

注意 : Express在指定的静态目录中去查找文件 , 并对外提供资源的访问路径 , 因此, 存放静态资源的目录名不会出现在URL中

举个栗子 , 这是我的项目目录结构 , 我要静态托管files文件夹下载的资源

app.use(express.static(./files))
//app.use()的用法后面说 , 我也不会(手动狗头)

那么我在请求这个某个资源时 , 就不需要再加上files这个目录名 , 比如说我想要请求flies文件夹下的index.html , 那么我们只需要在URL中这么写http:127.0.0.1/index.html即可, 不需要再加上files目录名

托管多个静态资源

如果想要托管多个静态资源目录 , 那么我们只需要多次调用express.static()函数即可

举个栗子 ,我想要托管files和public目录下的静态资源,只需要这么写

app.use(express.static('./files'))
app.use(express.static('./public'))

注意 : 我们在访问静态资源时, express.static()就会根据添加目录的顺序去查找所需要的的资源文件

举个栗子 , 我的flies和public目录下都有一个叫index.html的文件,

我在这样访问时http://127.0.0.1/index.html , 就会响应给客户端files目录下的index.html文件

挂载路径前缀

前面说过了,使用express.static()静态托管的目录 ,当我们访问时,不需要在URL中给出目录名

为了确保URL易理解, 系统易维护,我们可以自定义一个路径的前缀,我们在访问里面的资源时,需要在URL中补上这个路径前缀

app.use('路径前缀',express.static('托管目录'))

举个栗子 , 我托管了files目录下的静态资源, 我还想要别人访问时加上确切的URL路径,这样我在看到这个URL时,就能一眼看出资源的准确位置,我可以这样写

app.use('/files',express.static('./files'));

访问时http://127.0.0.1/files/index.html 就这样

看个小的案例 ,同时托管两个目录, 访问files的资源时需要加上files目录名

//导入express包
const express = require('express')
//新建一个服务器
const app = express()
//静态托管两个目录
app.use('/files',express.static('./files'))
app.use(express.static('./clock'))
app.listen(80,()=>{
    console.log('app is running at http:127.0.0.1')
})

nodemon

介绍

在编写调试Node.js项目时,如果我们经常对项目作出调试 , 我们需要频繁的去关闭服务器,启动服务器 , 非常繁琐

接下来, 就有了一个好用的小工具 , nodemon , 安装了这个小工具之后,我们每次修改项目代码,他就能够监听到项目文件的变动, 然后自动帮我们重启服务器, 非常NICE!

安装

安装还用说嘛? 直接命令行 命令 , 记得一定要全局可用

npm i nodemon -g;

使用

之前我们启动服务, 是用的这个命令node xxx.js , 这样做的坏处上面也说了

现在我们把node命令替换为nodemon命令 , 使用nodemon xxx.js 就可以启动项目 , 并且自动去监听这个文件的代码变动来重启服务

注意 :是我们ctrl+s保存代码时,会帮我们重启服务

声明

本篇文章根据黑马程序员的Node.js视频课程及相关课件 整理而来
非常感谢黑马程序员能够公开这么优秀的视频教程