专栏首页达达前端Express服务器开发

Express服务器开发

作者 | 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')方法

let d1 = function(req,res,next){
 console.log('1');
 next();
};

let d2 = function(req,res,next){
 console.log('2');
 next();
});

let d3 = function(req,res,next){
 console.log('3');
 next();
 });
 
 app.get('/', [d1,d2]);

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全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mysql

    # 图片名称 SELECT SUBSTRING_INDEX(SUBSTRING_INDEX(url_old,'/',-1),'.',1) from cv_fa...

    用户2337871
  • Web直播,你需要先知道这些

    实际情况下,当用户数量很大时,对推流设备的性能要求很高,复杂的权限管理也难以实现,采用P2P的架构基本不可行。对于个别用户提供上行流、海量用户只进行拉流的场景...

    IMWeb前端团队
  • Webpack实战-加载SVG

    SVG 作为矢量图的一种标准格式,已经得到了各大浏览器的支持,它也成为了 Web 中矢量图的代名词。 在网页中采用 SVG 代替位图有如下好处:

    IMWeb前端团队
  • Go 语言网络编程系列(九)—— JSON 处理篇:JSON 编解码基本使用入门

    Go 语言内置了 encoding/json 标准库对 JSON 进行支持,开发者可以通过它轻松生成和解析 JSON 格式数据,下面我们来简单演示下这个库的使用...

    学院君
  • 微信跨公众号支付(appid 与 openid 不匹配)

    1、用一个公众号的appid来进行收款 2、这个公众号的appid需要和商户号绑定 3、用这个appid来获取用户的openid

    用户4478423
  • 工具使用 | Pigat:一款被动信息收集聚合工具

    Pigat即Passive Intelligence Gathering Aggregation Tool,翻译过来就是被动信息收集聚合工具,既然叫聚合工具,也...

    TeamsSix
  • SpringCloud Gateway基础使用

    gateway默认实现了这些谓语工厂供我们使用这些谓语工厂的功能相信大家看名字就可以看出来了。可以根据请求中的cookie、header、method、host...

    Java学习录
  • 【图解】给面试官解释TCP的三次握手与四次挥手-Web运用原理及网络基础

    为什么要学习网络协议呢?为什么要学习计算机完了呢?显然这很重要,至少能够帮助你找到工作的原因之一,学习网络知识点太多太多,没有那么快就能记住。

    达达前端
  • PWA之离线缓存(一)

    PWA全称是Progressive Web Apps, 是一种渐进式增强 WEB 应用。 这里的渐进式增强是指无论用户用的是什么浏览器都能保证应用能正常工作。

    IMWeb前端团队
  • React入门级小白指北及常见问题解答

    最近学习使用 React 开发课程项目,作为刚接触React的新人,其中遇到一些解决方式很简答,但却也需要花时间去寻找答案的问题。本着为新人节约时间的目的,才有...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券