Express框架的基础学习

Express简介

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

核心特性

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

快速入门

引入package.json文件

cnpm init -y

安装Express

cnpm i express -S

入门

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')
})

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

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

中间件

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

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...')
})

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

内置的中间件

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

新建一个静态目录public(静态页面可以自己定义)
后台文件03static.js

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

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

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

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

自定义中间件

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

第三方中间件

第三方中间件
如何使用（以body-parser为例子）

安装body-parser

cnpm i body-parser -S

加载body-parser

使用body-parser
静态资源文件夹

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

const express = require('express')
const app = express()
// 应用中间件
const bodyParser = require('body-parser')

// 挂载内置中间件，开放login文件夹
app.use(express.static('login'))

// 挂载参数处理的中间件(post)
app.use(bodyParser.urlencoded({extended:false}))


app.post('/login',(req,res)=>{
    let data = req.body;
    console.log(data);
    res.send('get data')
});

app.listen(3000,()=>{
	console.log('running')
})

结果
访问：http://127.0.0.1:3000/login.html，输入用户名和密码，点击发送，客户端和服务端的结果

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

const express = require('express')
const app = express()
const bodyParser = require('body-parser')

app.use(express.static('router'))
app.use(bodyParser.urlencoded({extended:false}))
app.put('/index',(req,res)=>{
    res.send('put data');
})
app.delete('/index',(req,res)=>{
    res.send('delete data');
})
// 用户名：111  密码：222
app.get('/index',(req,res)=>{
	let data = req.query;
	console.log('get')
    console.log(data);
    // { user: '111', pwd: '222' }
    res.send('get data');
})

app.post('/index',(req,res)=>{
	let data = req.body;
	console.log('post')
    console.log(data);
    // { user: '111', pwd: '222' }
    res.send('get data');
})


app.listen(3000,()=>{
	console.log('running...')
})

可以通过向模板来传递参数来动态渲染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的代码）
文件目录

<!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，返回数据
渲染页面