Express框架详解---node.js初级(六)

Express框架简介:

        在之前,我们要写一个web服务器程序的话,要使用node内置的http模块。而前面几篇文章也说过了,那样比较复杂,我们不要重复造轮子,Express就是这样一个web开发框架,它能够实现很多功能,包括:

1、静态文件服务

2、路由控制

3、模板解析支持

4、动态视图

5、用户会话

6、CSRF保护

7、错误控制器

8、访问日志

9、缓存

10、插件

        express就是一个基于内置核心http模块的一个第三方包


使用Express简单搭建一个服务器程序

步骤:

1、创建一个文件夹

2、进入该文件夹

3、终端命令行输入:yarn init -y(或者 npm init -y)

4、终端命令行输入:yarn add express --save,以安装express包

5、在文件夹中创建一个app.js文件,在文件中写入以下代码:

// 1、引入express模块并创建express对象
const express = require('express');
const app = express();

// 2、书写处理请求的方法,来响应请求
app.get('/', (req, res) => {
    // 这里的代码在浏览器以get请求/的时候执行,  
    // 这个函数就是用来处理浏览器的 对于/的get请求 的
    // 第一个参数req是请求头对象,里面包含请求头信息
    // 第二个参数res用来做响应
    console.log(req);
    
    res.send('Hello World!222');
});

// 3、监听端口
app.listen(3000, () => {
    //这里的代码服务器刚启动的时候执行1次
    console.log('Example app listening on port 3000!')
});

在入口文件app.js里面run code,访问接口3000就可以看到效果了


使用Express对get请求进行处理

        已知,在这个文件夹里面有一个html文件放在了view文件夹中。

在app.js中

const express = require('express');
const app = express();

// 1、引入fs和path模块
const fs = require("fs");
const path = require("path");

// 2、处理/register的get请求
app.get('/register', (req, res) => {
    //读取页面内容,并返回这个页面
    let pathName = path.join(__dirname, 'views', "register.html");
    const regPage = fs.readFileSync(pathName, "utf-8");
    res.send(regPage);
});

app.listen(3000, () => {
    console.log('Example app listening on port 3000!')
});

解释一下:path.join将html文件路径拼接在了一起,regPage这是读取了的这个文件内容。

那么在接口3000就可以看见这个register.html文件了

app.get('/index', (req, res) => {
    let ret = req.query   // 获取到一个对象
    res.send(ret.curPage);

    //可以在请求的时候传入查询参数:
    //http://localhost:3000/index?curPage=3&perPage=10
});

        req.query是客户端请求的一个总对象,在里面可以找到你想要找到的数据

使用Express对post请求进行处理

app.post('/register', (req, res) => {
    //可以在回调函数中,获取请求参数(用户在页面填写的信息),并进行处理
    res.send("post---");
});

获取请求参数的时候,我们一般使用第三方的包body-parser,能更好的处理请求参数

yarn add body-parser  或者  npm install body-parser

// 1、引入body-parser
const bodyParser = require('body-parser')

// 2、bodyParser功能添加到项目app中
// parse application/x-www-form-urlencoded   针对普通页面提交功能
app.use(bodyParser.urlencoded({ extended: false }))  //false接收的值为字符串或者数组,true则为任意类型
// parse application/json    
app.use(bodyParser.json())   // 解析json格式

// 3、在接口中获取请求参数 req.body
app.post('/register', (req, res) => {
    // 可以在回调函数中,获取请求参数(用户在页面填写的信息)

    // 获取请求参数
    console.log(req.body);
    
    // 获取到请求参数之后就可以在这里处理这些请求参数,比如保存到数据库中(后面我们学习数据库知识)

    res.send("post ok");
});

重定向到其他接口:

        重定向就是,请求后处理将页面进行跳转。

        我们使用res.redirect('/');

// 添加登录页面的接口
app.get('/login', (req, res) => {
    //读取页面内容,并返回这个页面
    let pathName = path.join(__dirname, 'views', "login.html");
    const loginPage = fs.readFileSync(pathName, "utf-8");
    res.send(loginPage);
});

app.post('/register', (req, res) => {
    // 可以在回调函数中,获取请求参数(用户在页面填写的信息)

    // 获取请求参数
    console.log(req.body.username);
    
    // 一般注册成功之后可以跳转到登录页面,这就是重定向
    res.redirect('/login');   // 重定向到'/login'接口,对应的接口函数会执行
});

使用all()方法合并同个请求路径的不同请求方式

app.all('/register',(req, res) => {
    let method = req.method
    if(method==='GET'){
        //读取页面内容,并返回这个页面
        let pathName = path.join(__dirname, 'views', "register.html");
        const regPage = fs.readFileSync(pathName, "utf-8");
        res.send(regPage);
    }else if(method==='POST'){
        console.log(req.body.username);
        
        // 一般注册成功之后可以跳转到登录页面,这就是重定向
        res.redirect('/login');    
    }
    
})

        就是使用method =req.method,获取请求的方式

使用Express获取静态资源

const express = require('express');
const app = express();


// 获取静态资源
// app.use(express.static("public"))  
// "public"表示指定在本地public下找静态资源 
// 请求: localhost:3000/images/01.jpg  


// 如果想要在请求的路径里面添加前缀
app.use("/static", express.static("public"))
// localhost:3000/static/images/01.jpg     // 可能有延迟,如果延迟尝试重启服务器或者浏览器


app.listen(3000, () => {
    console.log('Example app listening on port 3000!')
});

使用Express渲染模板页面

        我们一般采用art-templates模板引擎。

        首先先要安装art-templates和express-art-template

yarn add art-template   或者   npm install art-template
yarn add express-art-template  或者  npm install express-art-template

        在view文件夹里面新建index.html

        然后在app.js里面如下写:

// 1、修改模板引擎为html,导入express-art-template
app.engine('html', require('express-art-template'));
// 2、设置运行的模式为生产模式
// production 生产模式,线上模式
// development 开发模式
app.set('view options', {
    debug: process.env.NODE_ENV !== 'production'
});
// 3、设置模板存放目录为views文件夹
app.set('views', path.join(__dirname, 'views'));
// 4、设置引擎后缀为html
app.set('view engine', 'html');

app.get('/', (req, res) => {
    res.render('index') //通过render返回该模板
});

art-templates模板引擎的使用

        之所以要使用模板引擎,我们可以将数据从后端接口传到前端页面中

app.js中:

app.engine('html', require('express-art-template'));
app.set('view options', {
    debug: process.env.NODE_ENV !== 'production'
});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

app.get('/', (req, res) => {
    let data = {
        user:{
            id:1,
            name: "Jack",
            age:18,
            job: "coder"
        },
        books:["《西游记》", "《三国演义》","《红楼梦》", "《水浒传》"],
        num1:20,
        num2:30
    }
    res.render('index', data);   // 把data数据传入到index.html页面中。
});

在view文件下的index.html中:

<body>
    <h1>这是首页</h1>
    <hr>
    <div>{
   
   { user.id }}</div>
    <div>{
   
   { user.name }}</div>
    <div>{
   
   { user.age }}</div>
    <div>{
   
   { user['age'] }}</div>
    <ul>
        {
   
   {each books}}
        <li>{
   
   {$index}}、{
   
   {$value}}</li>
        {
   
   {/each}}
    </ul>
    <p>num1和num2中比较大的那个数是: {
   
   {num1>num2?num1:num2}}</p>
    {
   
   { if user.name === "Jacka"}}
        <p>{
   
   { user.name }}的年龄是{
   
   { user.age }}</p>
    {
   
   {/if}}
</body>

在项目中使用路由

        在项目中,我们不会把路由接口直接写在项目的入口文件app.js,我们把路由抽取出来,项目文件夹新建routes文件夹,新建passport.js:

// 抽取路由
const express = require('express');
const router = express.Router();
const fs = require("fs");
const path = require("path");


router.get('/login', (req, res) => {
    //读取页面内容,并返回这个页面
    let pathName = path.join(__dirname, '../views', "login.html");
    const loginPage = fs.readFileSync(pathName, "utf-8");
    res.send(loginPage);
});


router.all('/register',(req, res) => {
    let method = req.method
    if(method==='GET'){
        //读取页面内容,并返回这个页面
        let pathName = path.join(__dirname, '../views', "register.html");
        const regPage = fs.readFileSync(pathName, "utf-8");
        res.send(regPage);
    }else if(method==='POST'){
        console.log(req.body.username);
        
        // 一般注册成功之后可以跳转到登录页面,这就是重定向
        res.redirect('/login');    
    }
    
})

module.exports = router

然后在项目入口文件app.js中:

const express = require('express');
const app = express();

// 1、引入对应的路由模块
const passportRouters = require('./routes/passport');


var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())


// 2、书写的路由添加到app上
app.use(passportRouters)


app.listen(3000, () => {
    console.log('Example app listening on port 3000!')
});

处理请求之前的勾子函数

        如果在执行处理请求的函数之前想要执行一些代码,例如验证时候已经登录的工作。

        可以在app.use(utils.checkLogin,routers);添加一个函数

        新建utils文件夹,新建index.js文件:

function checkLogin(req, res, next){
    console.log("执行接口代码之前会执行这里的代码");


    next();  //直接跳入请求的接口执行代码
}

module.exports = {
    checkLogin
}

        呃,感觉就是一个中间件。

        在项目入口函数app.js中:

// 项目中使用路由
const express = require('express');
const app = express();

// 1、引入对应工具模块
const utils = require('./utils/index.js');

const passportRouters = require('./routes/passport');


var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())


// 2、补上执行接口函数之前所执行的函数
app.use(utils.checkLogin, passportRouters)


app.listen(3000, () => {
    console.log('Example app listening on port 3000!')
});

        这样的话,在执行routers里面的每一个接口之前,都会执行checkLogin函数里面的代码。


        Express的基本用法大概就是这么多,明天再写。

猜你喜欢

转载自blog.csdn.net/qq_53087870/article/details/120157607
今日推荐