Express服务器开发

川长思鸟来 2021-08-20 00:06 371阅读 0赞

![file][]

作者 | Jeskson

来源 | 达达前端小酒馆

Express服务器开发

创建Express应用程序，Express路由，pug视图模板的使用

# Express简介： #

让我们来创建Express应用程序，Express是一个Node.js Web应用框架，它很强大，可以为用户创建各种Web应用和HTTP工具，使用Express框架可以搭建一个完整功能的网站。

# Express框架的优点： #

可以用中间件来响应HTTP请求，可以定义路由表用于执行不同的HTTP请求，可以向模板传参数来动态渲染HTML页面。

命令行安装Express框架：

cnpm install express --save

Express框架安装在node\_modules目录中，然后需要一起安装如下模块：

body-parser是node.js的中间件，可以处理JSON,Raw,Text,URL编码的数据，cookie-parser是一个解析Cookie的中间件，然后通过req.cookies可以获取传过来的Cookie，并转为对象。

multer是node.js的中间件，用于处理enctype="multipart/form-data"的表单数据。

cnpm install body-parser --save
    cnpm install cookie-parse --save
    cnpm install multer --save

让我们来看看express框架的版本号：

cnpm list express

创建第一个Express框架实例

目的为了输出：“hello”，命名：express\_demo.js文件

// 引入node模块
    const express = require('express');
    
    // 创建express程序
    const app = express();
    
    // 添加HTTP路由
    app.get('/', function(request, response){
     // 输出响应消息
     response.send('hello express');
    });
    
    // 启动HTTP服务器
    app.listen(8080, function(){
     console.log('express app');
    });

执行项目：

node express_demo.js

然后就可以用http://127.0.0.1:8080

express框架使用request对象和response对象来处理请求和响应的数据：

app.get('/', function(req,res){
    })

# request对象为HTTP请求 #

req.app

为callback，回调函数外部文件，利用req.app访问express的实例

req.baseUrl

获取当前安装的URL路径

req.body/req.cookies

为获得“请求主体”

req.hostname/req.ip

获取主机名，ip地址

req.originalUrl

获取原始请求URL

req.params

获取路由的参数

req.path

获取请求路径

req.protocol

获取协议类型

req.query

获取URL的查询参数

req.route

获取当前匹配的express路由

req.subdomains

获取子域名

req.accepts()

检查可接受请求的文档类型

req.get()

获取指定的HTTP请求头

req.is()

判断请求头Content-Type的Mime类型

# response对象为HTTP响应 #

res.app

为callback，回调函数外部文件，利用res.app访问express的实例

res.append()

追加指定HTTP请求头

res.set()

在res.append()后重置之前设置的请求头

res.clearCookie()

清除Cookie

res.download()

传送指定路径的文件

res.get()

返回指定的HTTP请求头

res.json()

传送json响应

res.jsonp传送jsonp响应

res.location()只设置响应的LocationHTTP请求头，不设置状态码或者close response

res.redirect()设置响应的LocationHTTP请求头，并且设置状态码302

res.send()传送HTTP响应

res.status()设置HTTP状态码

res.type()设置Content-Type的MIME类型

# express路由 #

express路由，由URI，HTTP请求和若干个句柄组成。

// 引入node模块
    const express = require('express');
    
    // 创建express程序
    const app = express();
    
    // 添加http路由
    app.get('/',function(request,response) {
     // 输出响应消息
     response.send('hello dashucoding');
    });
    
    app.get('/users', function(req,res) {
     // req , res
     res.send('user');
    });
    
    // 启动HTTP服务器
    app.listen(8080, function(){
     console.lo('express app');
    });

GET请求一个指定资源的表示形式，只用于获取数据

POST用于将尸体提交到指定的资源

HEAD请求一个与GET相同的响应，但没有响应体

PUT用于请求有效载荷替换目标资源的所有当前表示

DELETE删除指定的资源

CONNECT建立一个由目标资源标识的服务器的隧道

OPTIONS用于描述目标资源的通信选项

PATCH用于对资源应用部分修改

app.get('/about',function(req,res){
    res.send('about');
    });
    
    app.get('/ab?cd',function(req,res){
    res.send('ab?cd');
    }
    
    app.get('/ab(cd)?e',function(req,res){
    res.send('ab(cd)?e');
    });

路由句柄，为请求处理提供多个回调函数，next('route')方法

next用于执行下一个回调函数，next('route')用于执行下一个相同路由。

// 引入node模块
    const express = require('express');
    // 创建express程序
    const app = express();
    // 添加http路由
    app.get('/', function(request, response){
    // 输出响应消息
    response.send('hello');
    });
    app.get('/users', function(req,res){
    res.send('user');
    });
    
    // 动态
    app.get('/users/id', function(req,res){
    let id = req.params.id;
    // 返回响应
    res.send('id=' id);
    });
    
    // 启动HTTP服务器
    app.listen(8080,function(){
    console.log('expresss app');
    });
    
    const express = require('express');
    const app = express();
    app.get('/', function(request, response){
    response.send('hello');
    });
    app.get('/users',function(req,res){
    res.send('users');
    });
    app.param('id',(req,res,next)=>{
     console.log('hello');
     if(req.params.id==='1'){
     next();
     }else{
     res.sendStatus(404);
     }
     });
     
     app.get('/users/:id',(req,res)=>{
     res.send('hello');
     });
     
     // 启动服务器
     app.listen(8080,function(){
      console.log('express');
     });

pug视图模板

命令行下载：

npm install pug

pug.compile()将pug代码编译成一个JavaScript函数。

app.js
    
    const express = require('express');
    
    const app = express();
    
    // 配置视图模板
    app.set('view engine', 'pug');
    app.set('views', './views');
    
    // 添加HTTP路由
    app.get('/', function(request, response){
    response.render('index.pug');
    // 输出响应消息，加载并解析index.pug文件
    });
    
    app.get('/users',function(req,res){
    res.render('users.pug',{
    title:'user',
    users:[
    {id:1,name:'张三',age:18}
    ]
    });
    });
    // 启动HTTP服务器
    app.listen(8080,function(){
    console.log('express');
    });

users.pug:

doctype html
    html
    head
    meta(charset="utf-8")
    title #{title}
    body
    #app
     for user in users
     div
     p id=#{user.id}
     p name=#{user.name}
     p age=#{user.age}
    
    pug.render()模板函数：
    
    const pug = require('pug');
    
    console.log(pug.renderFile('template.pug',{
    name:'dada'
    });

执行pug.renderFile()函数，会把编译出来的函数自动储存到内部缓存中

## ❤️ 不要忘记留下你学习的脚印 \[点赞 收藏 评论\] ##

作者Info：

> 【作者】：Jeskson
> 
> 【原创公众号】：达达前端小酒馆。
> 
> 【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
> 
> 【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

###  ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达达][Link 1]的CSDN！ ###

**这是一个有质量，有态度的博客**

![前端技术栈][format_png]

[file]: /images/20210724/84cdec4c12bf4e4cac671665eb69d571.png
[Link 1]: https://blog.csdn.net/qq_36232611
[format_png]: /images/20210724/3578e9a72bbd4cb28043d5a9a72d3d73.png