Node.js Express框架简介

Express框架简介

什么是框架

框架是半成品，是对相应底层技术的封装，使用框架可以提高开发效率。

为什么学习express框架

（1）什么是Express框架？

Express是一个基于Node平台的Web应用开发框架，它提供了一系列强大特性帮助你创建各种Web应用和丰富的HTTP工具，使用Express可以快速地搭建一个完整功能的网站。

（2）Express框架核心特性

• 可以设置中间件来响应HTTP请求
• 对获取HTTP请求参数进行了简化处理
• 定义了路由表用于执行不同的HTTP请求动作
• 可以通过向模板传递参数来动态渲染HTML页面
  使用Express框架之后，可以简化我们的Node实现代码，简洁化代码。

Express的创建

1、使用全局安装Express：

npm install -g express-generator

2、创建项目:

express 项目名

3、进入项目：

cd 项目名

4、启动项目：

npm start

5、在浏览器输入：http://localhost:3000

出现下述页面，即为项目创建成功

创建好的项目结构：

bin目录：启动配置文件，在www里面可以修改运行端口号（默认端口号是3000）；
routers目录：存放项目的路由文件；
app.js目录：是项目的入口文件，一般在app.js文件中进行项目配置；
views目录：存放页面文件（网页）的地方。

Express框架

页面运行

使用Express框架实现运行一个web页面，分为三个步骤：

（1）app.js配置

（2）routes调用路由级中间件

（3）views模板渲染

原生Node.js与Express框架的对比

Express框架的使用，简化了功能实现代码。

（1）在路由方面：

原生Node.js:

app.on('request',(res,req)=>{
     
	let {
     pathname}=url.parse(req.url)   //获取客户端的请求路径
	if(pathname=='/'||pathname=='index'){
     
		res.end('欢迎来到首页')
	}else if(pathname=='list'){
     
		res.end('欢迎来到list')
	}else{
     
		res.end('抱歉，您访问的页面出错了')
	}
})

使用Express框架：

//客户端以get方式访问‘/’时
app.get('/',(req,res)=>{
     
//对客户端做出响应
	res.send('Hello Express')
})

//当客户端以post方式访问‘/add’路由时
app.post('/add',(req,res)=>{
     
	res.send('post方法请求/add路由')
})

（2）在获取请求参数方面：

原生Node.js:

app.on('request',(req,res)=>{
     
	//获取get参数
	let {
     query}=url.parse(req.url,true)
	//获取post参数
	let postData=''
	req.on('data',(chunk)=>{
     
		postData+=chunk;
	})
	req.on('end',()=>{
     
		console.log(querystring.parse(postData))
	})
})

使用Express框架：

app.get('/',(req,res)=>{
     
//获取get参数
	console.log(req.query) 
})

app.post('/',(req,res)=>{
     
	//获取post参数
	console.log(req.body)
})

页面渲染

在html中，使用{ {变量名}}来得到服务器端的数据；

在服务端通过response对象的render方法将数据渲染到页面。

例如：

var express=require('express')
var router=express.Router()
var op={
     
	title:'西柚'，
	arr:[
		{
     id:101,
		name:'颜星',
		gender:'女',
		age:'18'
		},
		{
     id:102,
		name:'星子',
		gender:'女',
		age:'20'
		}
	]
}

router.get('/',(req,res)=>{
     
	res.render('index',op)
	//当客户端请求根目录http://localhost:8089的时候，将op里面的内容渲染到index.html页面
})

//循环渲染
<table border='1'>
	<tr>
		 <th width="100">学号th>
         <th width="100">姓名th>
         <th width="100">性别th>
         <th width="100">年龄th>
	tr>
	{
    {each arr as item}}
		<tr align="center">
            <td>{
    {item.id}}td>
            <td>{
    {item.name}}td>
            <td>{
    {item.gender}}td>
            <td>{
    {item.age}}td>
        tr>
	{
    {/each}}
table>

上例展示了循环渲染的应用，还有其他的常用渲染方式为：

//-----------条件渲染
{
    {if条件}}
	html代码
{
    {/if}}

//----------嵌套的条件渲染
{
    {if条件}}
	{
    {if条件}}
		html代码
	{
    {/if}}
{
    {/if}}

路由

路由用于确定应用程序如何响应对特定端点的客户机请求（对请求进行导航），包含一个URL地址（路径）和一个特定的HTTP请求方法（GET、POST等）。
关于请求方式，想要了解更多请看这里

每个路由可以具有一个或多个处理程序函数，这些函数在路由匹配时执行，它的使用形式如下：

app.method(path,handler)

//app：是express的实例
//method：是HTTP请求方法
//path：是服务器上的路径
//handler：是在路由器匹配时执行的函数

例如:

app.get('/',(req,res)=>{
     
	res.send('Hello Express')
})

路由文件写好之后记得配置路由：

（1）在app.js文件中导入路由文件

var indexRouter = require('./routes/index');

（2）定义指向路由文件的路由

app.use('/',indexRouter)

中间件

中间件就是一堆方法，可以接收客户端发来的请求，可以对请求做出响应，也可以将请求信息继续交给下一个中间件进行处理（中间件的作用就是在接收到前端的请求后，作出一系列的工作。）

中间件主要由两部分构成：中间件方法以及请求处理函数

中间件方法由Express提供，负责拦截请求；

请求处理函数由开发人员提高，负责处理请求。

如：

app.get('请求路径'，'处理函数')    //接收并处理get请求  
app.post('请求路径','处理函数')    //接收并处理post请求

注意：
可以针对同一个请求设置多个中间件，对同一个请求进行多次处理。默认情况下请求从上到下依次匹配中间件，一旦匹配成功，终止匹配（可以使用next方法将请求的控制权交给下一个中间件，直到遇到请求结束的中间件）

补充：
next函数主要负责将控制权交给下一个中间件，如果当前中间件没有终结请求，并且next没有被调用，那么请求将被挂起，后边定义的中间件将得不到被执行的机会。

例如：

// 引入 express 框架
const express = require('express')

// 创建网站服务器
const app = express();

app.get('/request', (req, res, next) => {
     
    req.name = 'zhangsan';
    next(); // 向下执行
})

app.get('/request', (req, res)=> {
     
    res.send(req.name);
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');