Node.js Express开发框架

最新推荐文章于 2024-04-18 21:39:56 发布

开到荼蘼223's

最新推荐文章于 2024-04-18 21:39:56 发布

阅读量174

点赞数 2

分类专栏： Node.js 文章标签： node.js

本文链接：https://blog.csdn.net/m0_56649557/article/details/119779951

版权

Node.js 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文介绍了Express框架的基本概念，包括其作为最小灵活框架的特点、中间件和路由的运用，以及如何在Webstorm中搭建和配置。重点讲解了app.js配置、页面渲染和GET/POST请求响应。通过实例演示了如何使用Art-template替换默认引擎并处理数据。

摘要由CSDN通过智能技术生成

Express简介

Express是最小的，灵活的Node.js Web应用程序框架，它提供了一套强大的功能来开发Web和移动应用程序。它有助于基于Node Web应用程序的快速开发。

Express框架的核心功能:

中间件: 允许设立中间件响应HTTP请求
路由表：响应用户的不同请求
根据参数动态的渲染页面

Express安装

全局安装 npm install -g express-generator

上面的命令在本地node_modules目录保存安装，并创建一个目录express在node_modules里边

创建express项目过程(cmd窗口)
1.创建项目 express 项目名
2.进入项目cd 项目名
3.初始化项目 npm install
4.启动项目 npm start
5.可以在浏览器端打开项目验证项目是否创建成功 http://localhost:3000

创建成功
在这里插入图片描述
集成开发环境中(webstorm)创建Express项目
Express项目的目录结构

1.bin目录启动配置文件可以修改运行端口号
2.node_modules 存放的是项目所依赖模块
3.public目录静态资源文件
4.routes目录路由文件
5.views目录页面文件(网页)
6.app.js文件项目的入口文件(项目配置)
7.package.json文件项目以来配置及开发者信息

app.js配置详解

app.js文件相当于项目启动的主入口文件，包含以下公共方法和服务器配置信息等
在这里插入图片描述

Express页面

Express默认的模板引擎是jade，为了方便用户开发，可以把它替换成更简洁、更高效的art-template

安装art-template依赖包

	npm install -S art-template

更改Express默认页面引擎为art-template

修改app.js文件如下

app.engine('.html',require('express-art-template'));//导入art-template引擎 设置页面文件的扩展名为.html
app.set('view engine', 'html');//设置网页的驱动引擎

渲染数据到页面
在服务器端通过response对象的render方法将数据渲染到页面，在页面中使用{{变量名}}来自服务器端的数据

首先创建一个这样的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>标题:{{title}}</h2>
    <h2>姓名:{{userName}}</h2>
    <h2>性别:{{gender}}</h2>
    <h2>年龄:{{age}}</h2>
</body>
</html>

在index.js文件中可以这样设置{{变量名}}将数据渲染到页面

/* GET home page. */
var op = {title:'SuperMiami',
          userName:'K23',
          gender:'男',
          age:'21'
}
router.get('/', function(req, res, next) {
  res.render('index', op );// 通过render方法将数据渲染到页面
});

打开http:localhost:8080检测
在这里插入图片描述
请求对象 request 客户端向服务器发送的请求

req.params：一个数组，包含命过名的路由参数 req.query：get请求的查询字符串参数 req.body：post的请求体内容
req.query：get请求的查询字符串参数
req.body：post的请求体内容
req.cookies：一个对象，包含从客户端传递来的cookie信息 req.headers：一个对象，从客户端接到的请求抱头
req.path：请求路径，不包含协议，端口，查询字符串 req.host：主机名
req.xhr：boolean值，判断请求是否是ajax请求 req.protocol：用于标示协议http，https
req.url：path+查询字符串

响应对象Response

res.status(code)：设置http状态码，express默认是200。可利用此函数返回404或者500页面，重定向的话用redirect()
res.send(options)：向客户端发送响应数据，可以是一个对象(key-value)
res.render(视图名,数据)：页面的文件名(不带扩展名),“数据”是向页面发送的数据
res.cookie(name,value,[options])：设置cookie值
res.clearCookie(name,[options])：清除cookie值
res.redirect([status],url)：重定向浏览器，默认状态码：302 url是路由里面的路径而不是视图里面的路径
res.json([status],json)：向客户端发送json数据及其可选的状态码
res.jsonp([status],jsonp) 　　
res.send([status],body)：向客户端发送响应及其状态吗
res.type(type)：相当于res.set(‘Content-Type‘,‘type‘)

下面进行演示以下用get和post方式请求响应数据的方式

表单里action里放的是请求的地址，method里放的是请求方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <form action="http://localhost:8080/login_data" method="get">
        <label>
            用户名:
            <input type="text" name="userName">
        </label>
        <br><br>
        <label>
            密码:
            <input type="password" name="password">
        </label>
        <br><br>
        <button type="submit">登录</button>
        <button type="reset">重置</button>
    </form>
</body>
</html>

后台里接口如下

//http://localhost:8080/login_page 打开登录界面
router.get('/login_page',(req,res)=>{
    res.render('login');
});
//http://localhost:8080/login_data 接收用户的登录数据
router.get('/login_data',(req,res)=>{
    let name = req.query.userName;
    let pwd = req.query.password;
    res.send('用户名:'+name+'\n'+'密码:'+pwd)
})

最终效果如下
在这里插入图片描述

在这里插入图片描述
由此可发现get请求方法不适合发送一些敏感数据，改用post请求方法试一下

//http://localhost:8080/login_post
router.post('/login_post',(req,res)=>{
    let name = req.body.userName;
    let pwd = req.body.password;
    res.send('用户名:'+name+'\n'+'密码:'+pwd);
})