node.js的Express框架使用教程

我们都知道，node.js可以做服务器开发页面。但是使用原生的node.js开发比较“繁琐”。

所以，我们可以使用node.js的一个较为成熟的Express框架开发。

首先，我们需要在安装node，相信大家都安装过了。怎么安装就不说了。这里就直接开始使用Express的。

一、准备开发

1.初始化npm

npm init -y

2.下载Express

npm i express -S

二、创建一个简单的Express.js文件

index.js

const express = require('express')//导入express
const app = express()   //创建网站服务器
const port = 3000       //设置端口号  3000

//创建get请求
app.get('/', (req, res) => res.send('Hello World!'))
//开始监听
app.listen(port, () => console.log(`Example app listening on port port!`))

 三、开始服务

 四、托管静态资源 如 css、js、image等

//开放静态资源

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

 尝试请求public目录下的image的图片资源

 五、设置请求处理函数

get的参数可以直接使用req.query获取，但是post请求的参数就要借助body-parser获取post请求的参数

const express = require('express') //导入express
const app = express() //创建网站服务器
const port = 3000 //设置端口号  3000

//开放静态资源
app.use(express.static('public'))

// 借助body-parser获取post请求的参数 
const bodyParser = require('body-parser')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: false
}));

//创建get请求
app.get('/', (req, res) => {
    console.log('get请求')
    console.log(req.query); //获取get请求的参数
    res.send('Hello World!')
})

//创建post请求
app.post('/', (req, res) => {
    console.log('post请求')
    console.log(req.body); //获取post请求体的body参数
    res.send('Hello World!');
})

//开始监听
app.listen(port, () => console.log(`Example app listening on port port!`))

 通过postman分别发送GET与POST请求，获取的参数有如下图所示：

这样post的请求与get请求的参数都能正常获取了。

 六、跳转页面

首先我们需要下载安装一些模板引擎，虽然express有自带的模版引擎，但是个人觉得还是 art-template 用起来比较舒服。

首先，我们需要安装 art-template以及express-art-template

npm i art-template express-art-template -S

 模板安装好后，我们就可以使用模板渲染页面了。

//跳转页面
//当加载html页面时 加载art-template模板引擎
app.engine('html', require("express-art-template"));
app.get('/index.html',(req,res)=>{
    console.log(req.url)
    //html默认存放在views目录中，这样可以直接访问到views中的html目录
    res.render('index.html',{
        //这里存放一些参数，用于模板引擎的使用
        arr:[1,2,3,4,5]
    }) 
})

 七、使用中间件做一些拦截或错误处理操作等

例如：一个简单的登录方法，为了方便我直接使用get发送get请求：

http://127.0.0.1:3000/login?username=admin&password=123456

// 中间件以及错误处理
app.get('/login', (req, res, next) => {
    if (req.query.username && req.query.password) {
        //使用一个简单的判断 当req的query参数中有用户名与密码时,进行下一步操作
        next()
    } else {
        // 反之输出参数为空
        // 条件不满足，直接终止代码的进一步执行
        res.send("参数为空")
    }
}, function (req, res) {
    res.send('成功登录')
    // 在这里我们就可以做一些操作了
})

 我们可以看到 用户名与密码都有了这里就返回  登录成功！

 而没有参数时就会报参数为空

 

index.js完整代码

const express = require('express') //导入express
const app = express() //创建网站服务器
const port = 3000 //设置端口号  3000

//开放静态资源
app.use(express.static('public'))

// 借助body-parser获取post请求的参数 
const bodyParser = require('body-parser')
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: false
}));

//创建get请求
app.get('/', (req, res) => {
    console.log('get请求')
    console.log(req.query); //获取get请求的参数
    res.send('Hello World!')
})

//创建post请求
app.post('/', (req, res) => {
    console.log('post请求')
    console.log(req.body); //获取post请求体的body参数
    res.send('Hello World!');
})

//跳转页面
//当加载html页面时 加载art-template模板引擎
app.engine('html', require("express-art-template"));
app.get('/index.html', (req, res) => {
    console.log(req.url)
    //html默认存放在views目录中，这样可以直接访问到views中的html目录
    res.render('index.html', {
        //这里存放一些参数，用于模板引擎的使用
        arr: [1, 2, 3, 4, 5]
    })
})

// 中间件以及错误处理
app.get('/login', (req, res, next) => {
    if (req.query.username && req.query.password) {
        //使用一个简单的判断 当req的query参数中有用户名与密码时,进行下一步操作
        next()
    } else {
        // 反之输出参数为空
        res.send("参数为空")
    }
}, function (req, res) {
    res.send('成功登录')
})

//开始监听
app.listen(port, () => console.log(`Example app listening on port port!`))

总结

 这里就简单的总结了一些express常用的语法与使用方法。还有一些方法就需要大家去慢慢尝试了。