nodeJS Express初体验 快速搭建web服务器 托管静态资源 API接口服务器

冰镇生鲜
837 阅读5分钟

本文已参与[新人创作礼]活动， 一起开启掘金创作之路。

前言

什么是Express？ Express是基于NodeJS开发的第三方模块，她可以：

  • 快速搭建API接口服务器 处理前端发来的GET、POST请求
  • 快速搭建web服务器 托管静态资源

Express 和nodeJS内置的http模块非常相似，如果你会http模块，那么上手Exprees将非常轻松。

事实上，Express就是基于http模块封装出来的第三方npm包，类似于JavaScript和jQuery的关系，因此，掌握Express将大大的提高我们的开发效率。

正文

Express安装使用

前面提到Express是一个第三方包，

那么想要使用一个第三方模块，当然得事先在项目文件夹下执行npm下载一下她

npm install express@4.17.1

执行结果：

image.png

好，现在我们手上已经有了Express包，接着就可以开始自由发挥了

新建一个js文件，导入我们的express，监听80端口

const express = require('express')

const app =  express()

app.listen(80, () => {
    console.log('express server running at http://localhost')
})

使用node命令将我们的代码跑起来

node demo.js

image.png

image.png

这里浏览器默认发起了GET请求，

但是我们代码只是简单编写了一个服务器监听80端口，并没有具体代码处理GET请求

因此显示 Cannot GET /

不过这并不妨碍我们学习Express

使用Express 搭建web服务器 托管你的静态web网站

1、浅尝 express.static()

Express 拥有一个非常友好的中间件函数

  • express.static()

通过它，我们可以非常方便地创建一个静态资源服务器，

提供

  • 图像、
  • HTML 文件、
  • CSS 文件、
  • JavaScript 文件、
  • ·······诸如上诉文件之类的静态文件

使用也非常简单

我们只需加载如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：

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

详细演示

比如我有一个写好的web网站小demo：

image.png

她现在只能本地打开查看，效果如下：

image.png

为了使之能够通过ip地址+端口号的方式，被当前局域网下的其他计算机通过浏览器访问到

首先，我们将源代码文件拷贝到 express项目下的public文件夹

image.png

接着，创建demo2.js文件，写入代码：

const express = require('express')

const app =  express()

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

app.listen(80, () => {
    console.log('express server running at http://192.168.123.53:80')
})

node一下，把我们的网站跑起来：

node demo2.js

运行效果：

image.png

image.png

在同一个路由器下的手机端 ip地址+端口号 访问

Screenshot_2022-09-20-22-46-15-435_com.android.br.jpg

我们可以单独访问css、js文件，图片资源

image.png

image.png

express.static() 可以非常方便的为我们创建一个静态资源web服务器，不用像TomCat、IIS、Apache、Nginx······等等下载好几百兆的软件，经过麻烦的安装，部署才能搭建web静态资源网站。

当然，上述的软件他们是非常强大，非简单的express.static()所能比。

我这里只是单论一个方便，嘿嘿

2、 express.static() 使用小技巧

存放静态文件的目录名不会出现在URL中

我们通过express.static()挂载的静态目录，在访问其中文件的时候，并不需要加上这个目录名，

挂载自定义路径前缀

如果你希望express对外提供资源的访问路径有指定目录名

那么只需在代码中加上一行参数：

app.use("/随你的意打url路径",express.static('public'))

这样我们就可以任意访问 托管的静态文件

  • ip:端口号/随你的意打url路径/css/index.css
  • ip:端口号/随你的意打url路径/js/index.js
  • ip:端口号/随你的意打url路径/index.html

托管多个静态资源目录

如果你有多个静态资源目录要让express托管，那么很简单

只需要多次调用 express.static()函数

例如

app.use(express.static('public'))
app.use(express.static('dist'))

这个时候，在访问静态资源文件时，express.static()函数会根据目录的添加顺序查找所需的文件

比如两个目录下都有index.html， 那么express之后加载最先的那行代码的目录下的index.html

要想访问第二目录下的index.html只需要多加上路径名就好

使用Express 开发api接口服务器 处理GET POST请求

在介绍使用express监听GET/POST请求前，为了前端GET、POST请求

先介绍一个特别好用的库：axios 用于前端发起ajax请求

她的简单使用如下

在html导入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在js中书写代码发起请求

axios({
  method: '请求类型', 
  url: '请求的URL地址', 
  data: { /* POST数据 */ }, 
  params: { /* GET参数 */ }
}).then(callback)

1、编辑前端代码，用于发起请求

在监听GET、POST请求前，

我们先做一个可以发起GET请求的前端页面，并且将其托管到express下

image.png

image.png

将目标html文件命名为 index.html 的好处是：

当浏览器用http访问到她所在文件夹时，会自动打开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>前端页面，用于发起Ajax请求</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <input type="button" value="GET请求" onclick="getMsg()">
    <input type="button" value="POST请求" onclick="postMsg()">
    <p id="Pmsg">点击按钮，此处将显示服务器返回的信息</p>
</body>
<script>
    // get请求
    function getMsg () {
        axios({
		method: 'get',//提交方法
        params: { 
          name: "冰镇生鲜",
          age: 17,
          school: "XMUT"
        },
		url: 'http://127.0.0.1:80/get',//提交地址
		}).then((res) => {
          // 成功
          console.log("成功发起请求，以下是后端接口返回的数据");
		  console.log(res);

          var Pmsg =  document.getElementById("Pmsg");
          Pmsg.innerHTML = JSON.stringify(res);
		}).catch(err => {
          // 失败
          console.log("请求失败，打印失败信息")
          console.log(err);

          var Pmsg =  document.getElementById("Pmsg");
          Pmsg.innerHTML = JSON.stringify(err);
        })
    }
    
    // post请求
    function postMsg () {
        axios({
		method: 'get',//提交方法
        data: { 
          name: "冰镇生鲜",
          age: 17,
          school: "XMUT"
        },
		url: 'http://127.0.0.1:80/post',//提交地址
		}).then((res) => {
          // 成功
          console.log("成功发起请求，以下是后端接口返回的数据");
		  console.log(res);

          var Pmsg =  document.getElementById("Pmsg");
          Pmsg.innerHTML = JSON.stringify(res);
		}).catch(err => {
          // 失败
          console.log("请求失败，打印失败信息")
          console.log(err);

          var Pmsg =  document.getElementById("Pmsg");
          Pmsg.innerHTML = JSON.stringify(err);
   })
    }
</script>
</html>

运行效果：

image.png

此时，我们已经拥有了前端代码，用于发起get和post请求。

现在，让我们使用express来书写后台网络接口，分别处理前端发来的get、post请求。

2、监听GET、POST请求，前端点击按钮测试

具体nodeJS代码：

const express = require('express')

const app =  express()

// 挂载静态资源，使之同源不跨域，方便测试
app.use(express.static('public'))

// get请求处理
app.get("/get", (res,req) => {
  res.send(res.body)
})

// post请求处理
app.post("/post", (res,req) => {
    res.send(res.body)
  })

app.listen(80, () => {
    console.log('express server running at http://192.168.123.53:80')
})

这个时候，我们在前端点击 设置好的 get post按钮 就可以看到效果：

image.png

image.png

如果你想添加的逻辑，处理请求发来的数据，响应请求数据，也很简单。

express和nodeJS原生内置的http模块极其相似，

req是request，里面有请求发来的数据

res是response，可以设置她来实现跨域，响应数据

avatar
文章
阅读
粉丝