Express框架的基础学习

红太狼 2022-03-21 13:56 254阅读 0赞

### Express简介 ###

> Express是一个简洁而灵活的Node.js Web应用框架，提供了一系列强大特性帮助你创建各种web应用，和丰富的http工具

### 核心特性 ###

1.  可以设置中间件来响应HTTP请求
2.  定义的路由表用于执行不同的HTTP请求
3.  可以通过向模板来传递参数来动态渲染HTML页面

### 快速入门 ###

1.  引入package.json文件

cnpm init -y

1.  安装Express

cnpm i express -S

1.  入门

const express = require('express');
    const app = express()
    app.use((req,res,next)=>{ 
    	console.log(req)
    	next()
    }).use('/user',(req,res)=>{ 
    	res.send('login')
    })
    app.listen(3000,()=>{ 
    	console.log('running')
    })

1.  next方法的作用就是把请求传递到下一个中间件

### 可以设置中间件来响应HTTP请求 ###

##### 中间件 #####

1.  简单来讲：中间件就是处理过程中的一个环节，本质上就是一个函数

const express = require('express')
    const app = express()
    function middleware1(req,res,next){ 
    	console.log('传递给下一个中间件处理')
    	next()
    }
    function middleware2(req,res){ 
    	res.end(req.url)
    }
    app.use(middleware1)
    app.use(middleware2)
    app.listen(3000,()=>{ 
    	console.log('running...')
    })

![结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]  
2. 中间件是一个可访问请求对象（req）和响应对象（res）的函数，在 Express 应用的请求-响应循环里，下一个内联的中间件通常用变量 next 表示

##### 内置的中间件 #####

express.static 是Express内置的一个中间件。用来处理（开放）静态资源文件。

1.  新建一个静态目录public(静态页面可以自己定义)  
    ![目录文件][20190202102105937.png]
2.  后台文件03static.js

const express = require('express')
    const app = express()
    const path = require('path')
    app.use(express.static('public'))
    app.listen(3000,()=>{ 
    	console.log('running')
    })

1.  启动服务器后访问  
    当浏览器输入：[http://127.0.0.1:3000/login.html时（注意，不得加入我们的静态目录public去访问）][http_127.0.0.1_3000_login.html_public]  
    ![访问login页面][login]
2.  我们也可以给静态资源文件创建一个虚拟的文件前缀(实际上文件系统中并不存在)

app.use('/static',express.static('public'))

这时可以加前缀进行访问了，比如：[http://127.0.0.1:3000/static/index.html][http_127.0.0.1_3000_static_index.html]

##### 自定义中间件 #####

1.  nodejs会为请求创建一个请求对象（request），该请求对象包含客户端提交上来的数据。同时也会创建一个响应对象（response），响应对象主要负责将服务器的数据响应到客户端。
2.  中间件使用时的第二个参数是一个Function（第一个参数某些情况是不写的），要自定义一个中间件，使用Function最后一个参数next方法，传递给下一个中间件

##### 第三方中间件 #####

[第三方中间件][Link 1]  
*如何使用（以body-parser为例子）*

1.  安装body-parser

cnpm i body-parser -S

1.  加载body-parser

1.  使用body-parser  
    **静态资源文件夹**  
    ![登录][20190202162036622.png]  
    login.html

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>node_post</title>
    </head>
    <body>
    	<form>
    		<input type="text" id="user">
    		<input type="text" id="pwd">
    		<input type="button" id="btn" value="send">
    	</form>
    </body>
    <script> document.querySelector('#btn').onclick = function(){ var userVal = document.querySelector('#user').value var pwdVal = document.querySelector('#pwd').value var params = 'username='+userVal+'&password='+pwdVal var xhr = new XMLHttpRequest() // 创建代理对象 xhr.open('post','http://127.0.0.1:3000/login') xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') xhr.send(params) xhr.onreadystatechange = function(){ if(this.readyState === 4){ console.log(this.responseText) } } } </script>
    </html>

运行node.js

**结果**  
访问：[http://127.0.0.1:3000/login.html，输入用户名和密码，点击发送，客户端和服务端的结果][http_127.0.0.1_3000_login.html]  
![如图][20190202162453432.png]

### 定义的路由表用于执行不同的HTTP请求 ###

### 可以通过向模板来传递参数来动态渲染HTML页面 ###

后台环境（这里是07template.js为例子）

const express = require('express')
    const app = express()
    const path = require('path')
    const template = require('art-template')
    
    // 设置模板路径
    app.set('views',path.join(__dirname,'views'))
    // 设置模板引擎
    app.set('view engine','art')
    // 使express兼容模板引擎
    app.engine('art',require('express-art-template'))
    app.get('/list',(req,res)=>{ 
        let data = { 
            title : '汽车',
            list : ['路虎','保时捷','奔驰']
        }
        // 参数一：模板名称；参数二：渲染模板的数据
        res.render('list',data);
    }).listen(3000,()=>{ 
    	console.log('running...')
    })

静态资源（list.art的代码）  
![文件目录][20190202200104684.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板</title>
    </head>
    <body>
        <div>{
       {title}}</div>
        <div>
            <ul>
                {
       {each list}}
                    <li>{
       {$value}}</li>
                {
       {/each}}
            </ul>
        </div>
    </body>
    </html>

运行服务器，客户端输入地址http://127.0.0.1:3000/list，返回数据  
![渲染页面][20190202200212446.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220321/aa0b2ed2ba764722a9a8044234424cf8.png
[20190202102105937.png]: /images/20220321/0e718691c21b4c9cb8aecc64762fbbd8.png
[http_127.0.0.1_3000_login.html_public]: http://127.0.0.1:3000/login.html%E6%97%B6%EF%BC%88%E6%B3%A8%E6%84%8F%EF%BC%8C%E4%B8%8D%E5%BE%97%E5%8A%A0%E5%85%A5%E6%88%91%E4%BB%AC%E7%9A%84%E9%9D%99%E6%80%81%E7%9B%AE%E5%BD%95public%E5%8E%BB%E8%AE%BF%E9%97%AE%EF%BC%89
[login]: /images/20220321/c3a8605ec0fd4a01a33cab834645e987.png
[http_127.0.0.1_3000_static_index.html]: http://127.0.0.1:3000/static/index.html
[Link 1]: http://www.expressjs.com.cn/resources/middleware.html
[20190202162036622.png]: /images/20220321/a65b0d4200234379b4874f01906f4fe8.png
[http_127.0.0.1_3000_login.html]: http://127.0.0.1:3000/login.html%EF%BC%8C%E8%BE%93%E5%85%A5%E7%94%A8%E6%88%B7%E5%90%8D%E5%92%8C%E5%AF%86%E7%A0%81%EF%BC%8C%E7%82%B9%E5%87%BB%E5%8F%91%E9%80%81%EF%BC%8C%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%92%8C%E6%9C%8D%E5%8A%A1%E7%AB%AF%E7%9A%84%E7%BB%93%E6%9E%9C
[20190202162453432.png]: /images/20220321/97e5c536c0134e8eaaa4d7eb5755299c.png
[20190202200104684.png]: /images/20220321/84abd6a76dc64aeba6b22d333551cf4e.png
[20190202200212446.png]: /images/20220321/1ff5796540e4448a9277a52cd1d54d0f.png