node.js基础与使用6--Express框架的基础使用

原创于 2023-02-17 15:40:40 发布 · 334 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #前端 #服务器 #express

node.js 专栏收录该内容

7 篇文章

订阅专栏

Express是Node.js的一个简单且快速的web开发框架，它简化了HTTP服务器的创建。文章介绍了如何安装和使用Express，包括设置端口、响应GET和POST请求，以及使用send和sendFile方法。还提到了body-parser中间件用于解析POST请求的数据，以及express.static用于静态文件的自动化响应。

概括

Express本质上还是node.js第三方提供的模块，是一个简单，极速的web开发框架，其功能与http相似，Express使用起来更方便，能够提高web开发的效率。

使用

1.首先还是需要先安装Express

依旧是cmd中在自己项目下面下载模块

nmp i express

2.然后在自己的js文件里面引用

var express = require("express")

3.使用express

.get就是对前端发来的get请求进行响应(和http模块里面的request事件很像)

// 引入第三方模块
var express = require('express')
var app = express()
// 设置端口号 80为默认端口号
app.listen(80);
// 使用.get方法对前端的请求做出响应
app.get('/', (req, res) => {
    console.log('有人访问进来了');
})

运行，然后查看访问结果

已经成功了，加载不出来，还没有做出响应

响应操作， .send方法，和 .senfFile方法，也可以用end ,不过中文数据要乱码

express可以直接用sendFile返回文件，之前学的http则需要导入fs模块进行读取才能进行返回，express要方便许多

// res.send 响应一段数据回去
res.send('数据内容')
// res.sendFile 响应一个文件回去,参数就是文件路径
res.sendFile('文件路径')

.send 方法使用

// 引入第三方模块
var express = require('express')
var app = express()
// 设置端口号 80为默认端口号
app.listen(80);
// 使用.get方法对前端的请求做出响应
app.get('/', (req, res) => {
    console.log('有人访问进来了');
    // res.send 响应一段数据回去，可以是标签，会识别
    res.send('<h1>访问我的小网址想干嘛</h1>')
})

页面结果

.sendFile方法使用

// 引入第三方模块
var express = require('express')
var app = express()
// 设置端口号 80为默认端口号
app.listen(80);
// 使用.get方法对前端的请求做出响应
app.get('/', (req, res) => {
    console.log('有人访问进来了');
    // res.sendFile 响应一个文件回去,参数就是文件路径
    res.sendFile(__dirname + '/pulict/html/index.html')
})

html文件

页面结果

获取前端传来的数据的方法 req.query.键名(只有get可以使用，post不一样，下文会将post)

//req传回来的参数就是前端传来的信息，而路由后面的信息就在query里面
req.query.键名;

打印一下req，看看传过来的信息就懂了

// 引入第三方模块
var express = require('express')
var app = express()
// 设置端口号 80为默认端口号
app.listen(80);
// 使用.get方法对前端的请求做出响应
app.get('/', (req, res) => {
    console.log(req);
})

在页面请求里面，添加一些请求信息过去，看看数据会保存在req的哪里

查看打印结果，可以看见，req里面的东西很多，而页面传来的数据装在query这个属性里面，也就是req.query就可以得到前端传来的数据再 .键值就可以获得具体的值。

页面发来的数据是放在req里面的，而已是个对象保存的，相对于之前的http，还需要导入url模块来解析一次传来的数据，express就方便许多。

console.log(req.query);

除了 .get 响应get请求，还有 .post 响应可以响应post请求，相对而言稍微麻烦一点点，用法差不多。

post 是隐形请求，所以拿数据和响应很麻烦，这里就需要用到一个body-parser模块(中间件)

老样子，第三方模块需要先下载，后引入，才能使用。

依旧是在自己项目下下载

npm i body-parser

引入

var bodyParser = require('body-parser')

使用起来也很方便，我们需要的是他来解析url，所以只需要在后面添加一句app.use(bodyParser.urlencoded({extended:false}))即可

app.use(bodyParser.urlencoded({extended:false}))

当url解析后，解析值就会传入到，req.body属性中

来用post简单获取一下页面发来的信息

先写一个post响应

// 引入第三方模块
var express = require('express')
// 引入 body-parser
var bodyParser = require('body-parser')
var app = express()
// 设置端口号 80为默认端口号
app.listen(80);
// 用bodyParser解析文本
app.use(bodyParser.urlencoded({ extended: false }))
// 使用.get方法对前端的请求做出响应
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/html/index.html')
})
// 用post对 /postContent 的post请求做出响应
app.post('/postContent', (req, res) => {
    console.log(req.body);
})

在html里面使用post请求

<!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>
</head>

<body>
    <h1>post请求</h1>
    <h2>post表单提交</h2>
    <form action="/postContent" method="post">
        用户名: <input name="name"><br>
        年龄: <input name="age"><br>
        <input type="submit">
    </form>
</body>

</html>

运行一下js代码，去浏览器访问一下页面，输入数据，提交

再去js里面看看打印结果，成功获取到了

响应数据的方法和get则是一样的，都是 send 和sendFile

以上就是简单的响应方法讲解，但是如果是有很多css，js，png.....等文件的请求呢，总不能一种文件写一个响应吧，正则也可以，不过express提供了一个更简单的方法

app.use(express.static('静态数据文件夹'))

添加这句代码后，就可以自动响应所有文件下面的文件了（文件名写自己的）

// 引入第三方模块
var express = require('express')
// 引入 body-parser
var bodyParser = require('body-parser')
var app = express()
// 设置端口号 80为默认端口号
app.listen(80);
// 用bodyParser解析文本
app.use(bodyParser.urlencoded({ extended: false }))
// 响应其他文件
app.use(express.static("public"))
// 使用.get方法对前端的请求做出响应
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/html/index.html')
})

试试效果，在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">
</head>
<body>
    <h1>post请求</h1>
    <img src="../imgs/xxx.jpeg" width="100px" height="100px">
    <h2>post表单提交</h2>
    <form action="/postContent" method="post">
        用户名: <input name="name"><br>
        年龄: <input name="age"><br>
        <input type="submit">
    </form>
</body>

</html>

查看页面是否响应成功我们写的css和png文件