当前位置: 首页 > 工具软件 > Express YUI > 使用案例 >

express学习指南

百里飞捷
2023-12-01

express介绍

Express 是一个基于 Node.js 平台,快速、开放、极简的 web 开发框架 Express 框架是后台的 Node 框架,所以和 jQuery、zepto、yui、bootstrap 都不一个东西。 Express 在后台的受欢迎的程度类似前端的 jQuery,就是企业的事实上的标 准。

express的特点

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供 系列强大的特性,帮助你创建各种 Web 和移动设备应用

丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,让你创建健壮、友 好的 API 变得既快速又简单

express的安装

官网: http://expressjs.com/
安装 Express 框架,就是使用 npm 的命令。(安装在需要使用express模板的文件夹)

npm install express --save


在完成上面安装的操作步骤后就可以使用express开发啦~

express静态资源配置

express的使用 express有基本的识别能力,不需要自己添加contenttype/同时会内置处理没有配置的路径。相比于原生http的自己封装请求头,已经路由判断来说方便多了。 0、配置公开资源目录(可以公开访问public下的所有文件)

app.use('/public/',express.static('./public/')) 
//第一个public是别名,后面的是对应文件地址 输入网址的时候例如 http://www.localhost:3000/public/css/index.css 
还有第二种方式 
app.use(express.static('./public/')) 
//这里输入网址的时候应该时这样 http://www.localhost:3000/css/index.css 
//不需要添加public

修改代码自动重启
nodemon来解决修改代码重启的操作

npm install --global nodemon
启动文件的时候,使用nodemon启动就可以了
nodemon app.js
当文件变化时会自动帮你重启服务器

express的路由配置

 //1、引入express到项目中 
let express = require("express")
​
 //2、实例一个对象 
let app = express() 
​
//这里也可以在express前面加上一个new
//let app = new express()
​
//<!-- 3、配置路由 -->
app.get("/",function(req , res){
    res.send("向前端发送的数据")
    //res.end("向前端发送的数据")
    //这里end 和 send 都可以向前台发送数据
})
​
//监听端口
app.listen(3000,"127.0.0.1")
​

上面这个例子是基于get传参的express框架的简单配值,配置完成后就可以在对应文件夹中打开终端输入node 你的文件名.js就可以运行了。对于post传值我们下面会介绍到。

1、express中的res有多种方法

  • send
    ` json 传入一个对象会默认把对象转换为json数据

2、动态路由

 //1、引入express到项目中 
let express = require("express")
​
 //2、实例一个对象 
let app = express() 
​
//这里配置的是二级动态路由
app.get("/news/:aid",function(req , res){
    req.params
    //req.params这个方法会得到动态路由的值
    res.send("向前端发送的数据")
​
})
​
//监听端口
app.listen(3000,"127.0.0.1")
​

在这个例子中大家可能不太懂这到底实在干什么那么,什么又是动态路由,下面我来给大家分析一下。

当我们在终端中运行node之后,通过浏览器打开 localhost/3000 就会弹出express运行的页面,当把网站变为localhost/news 就会进入到news的页面(news就是一级路由,在news后面二级路由以此类推)

//(/news/:路由的key)  key可以是任意单词,但是“:”不能省略
app.get("/news/:aid",function(req,res){
    res.send("动态路由")
}

动态路由就是没有把路由地址写死,如上你可以在浏览器的news后面加上任意路由,页面都是可以进行访问的。但如果你写死了那么,你只能访问对应的路由,如果路由不匹配那么页面就会显示你访问的页面不存在。

3、路由重定向

res.redirect(’/’)
2.2、获取post传递数据
express中没有内置获取post请求体的api,我们需要结合第三方包
结合第三方插件 body-parser
npm install body-parser --save

 var express=require('express'); /*引入*/ 
 var body = require('body-parser')
 //添加了这个配置后   req的请求对象中会多出来一个属性:body,我们可以通过这个body来获取表单的数据。
 
 // 解析 application/json
app.use(bodyParser.json()); 
// 解析 application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended:false}));
var app=new express(); /*实例化*/ 
​


以上都是非模块化的路由,如果你想让node模块化,你需要在根目录新建一个router.js,如下

//router.js
var express = require('express')
var router = express.Router()
​
router.get('/',function(){})
​
module.exports = router

express对象中有个router方法,用来存放你所配置的路由。

//app.js
var router = require('./router')
app.use(router)
​

4、get传值

var express=require('express'); /*引入*/ 
var app=new express(); /*实例化*/ 
app.get('/login?user="haha"&password=123',function(req,res){
    console.log(req.query)
    //req.query  这个方法会获得?后面的值,返回一个对象
     res.send('你好express');
​
     //res.send()  res.redirect()都会结束响应  与原生的write不同
 })
​

express中使用ejs模板

安装:
npm install ejs --save

var express=require('express'); 
 
var app=express();
​
/* 配置ejs模板引擎 */ 
app.set('view engine','ejs');
 //设置模板的位置 
 app.set('views', __dirname + '/views');
​
 app.get("/news",function(req,res){
     res.render("index",{},function(){})
    //  这里与就是ejs中ejs.renderFile()一样
    res.send("ejs模板使用")
}

中间件

1、应用级中间件

在输入对应端口进入,对页面跳转进行拦截,根据回调函数来判断进入页面的条件,满足一定条件才可以进入页面(类似于vue中的路由守卫)

var express=require(‘express’);/引入/
var app=new express(); /实例化/

app.use(function(req,res,next){ console.log(new Date()); next(); })
只有这个中间件的回调函数中存在next()方法的调用那么才可以继续继续跳转

2、路由中间件

多个相同的路由地址,那么他会不会全部匹配呢,答案是否定的。他会匹配第一个设置的路由之后就不会在匹配其他相同的路由了。如果需要对应页面的数据/跳转的下一个一页面那么就需要在第一个路由中设置next()

app.use(’/news’,function(req,res,next){
console.log(‘新闻路由中间件通过app.use’);
next();
})

app.use(’/news’,function(req,res){
res.send(‘新闻路由’);
})

3、错误处理中间件

就是通过应用中间件,对请求的状态进行判断,若状态码为404就会抛出对应信息。

app.use(function(req,res){ res.status(404).send(‘这是404 表示路由没有匹配到’) })

内置中间件

内置中间件用来托管静态页面

app.use(’/static’,express.static(__dirname+’/public’));
你输入static的路由会之间自动匹配到public文件夹中的内容

4、第三方中间件

body-parser :解析body中的数据,并将其保存为Request对象的body属性。

cookie-parser :解析客户端cookie中的数据,并将其保存为Request对象的cookie属性

express-session :解析服务端生成的sessionid对应的session数据,并将其保存为>Request对象的session属性

query:这个中间件将一个查询字符串从URL转换为JS对象,并将其保存为Request对象的>query属性。这个中间件在第四个版本中已经内置了无需安装。

//配置body-parser中间件 
// parse application /x-www-form-urlencoded 
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json 
app.use(bodyParser.json());
app.post("/login",function(req,res){
    req.body //获得post传递过来的数据
})

req.body就可以获得想要需要的数据,这些body的配置信息有什么用呢?

bodyParser.json() 用来解析json格式的数据 本返回一个中间件到node中的applaction级 bodyParser.urlencoded() 用来解析表单格式的数据 本返回一个中间件到node中的applaction级 详细介绍

 类似资料: