3.Express请求处理

1.Expree框架简介 | 2.中间件 | 3.Express请求处理 | 4.express-art-template模板引擎

3.1 构建模块化路由

//引入express框架
const express = require('express');
//创建网站服务器 
const app = express();
//创建路由对象
const home = express.Router();
//将路由和请求对象匹配
app.use('/home', home);
//在home下继续创建路由
home.get('/index', (req, res) => {
    //home/index
    res.send('成功');
})

//监听端口
app.listen(8000);
console.log('服务器已经启动');

3.2 模块导入

//admin.js
const express = require('express');
const admin = express.Router();

admin.get('/index', (req, res) => {
    res.send('欢迎来到joyexpress首页管理页面')
});
module.exports = admin;

//home.js
const express = require('express');
const home = express.Router();

home.get('/index', (req, res) => {
    res.send('欢迎来到joyexpress首页页面')
});
module.exports = home;

//app.js
//引入express框架
const express = require('express');
//创建网站服务器 
const app = express();
const home = require('./route/home');
const admin = require('./route/admin');
app.use('/home', home);
app.use('/admin', admin);

//监听端口
app.listen(8000);
console.log('服务器已经启动');

3.3 GET参数的获取

Express中使用req.query即可获取GET参数,框架内部会将GET参数转化为对象并返回。

const express = require('express');

const app = express();

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

app.listen(8000);
console.log('服务器启动');

3.4POST参数的获取

Express中接收post请求参数需要借助第三方包 body-parser.

//app.js
const express = require('express');

const bodyParser = require('body-parser');

const app = express();
//拦截所有请求
//extended:false 方法内部使用querystring模块处理请求参数的格式
// extended:true 方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({ extended: false }))

app.post('/add', (req, res) => {
    res.send(req.body)
})

app.listen(8000);
console.log('服务器启动');


//add.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="http://localhost:8000/add" method="post">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" name="">

    </form>
</body>

</html>

3.5 Express路由参数

const express = require('express');

const bodyParser = require('body-parser');

const app = express();

app.get('/index/:id/:name/:age', (req, res) => {
    res.send(req.params);
})

app.listen(8000);
console.log('服务器启动');

3.6 静态资源的处理

通过Express内置的express.static可以方便的托管静态文件,例如:img、CSS、Javascript文件等。

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

现在public目录下面的文件就可以访问了。

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/hello.html
const express = require('express');

const path = require('path');

const app = express();

//实现静态资源访问功能
app.use('/static', express.static(path.join(__dirname, 'public')));

app.listen(8000);
console.log('服务器启动');

1.Expree框架简介 | 2.中间件 | 3.Express请求处理 | 4.express-art-template模板引擎

Express框架
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。