zoukankan      html  css  js  c++  java
  • 前端 ----Express

     

    一、Express的认识
        1.Express框架是什么
            Express是一个基于Node平台的web应用开发框架,它提供了一系列的强大特性,帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。
        2.Express框架特性
            1.提供了方便简洁的路由定义方式
            2.对获取HTTP请求参数进行了简化处理
            3.对模板引擎支持程度高,方便渲染动态HTML页面
            4.提供了中间件机制有效控制HTTP请求
            5.拥有大量第三方中间件对功能进行扩展
        3.原生Node.js与Express框架对比之路由
            1.原生Node.js
             app.on('request', (req, res) => {
                 // 获取客户端的请求路径
                 let { pathname } = url.parse(req.url);
                 // 对请求路径进行判断 不同的路径地址响应不同的内容
                 if (pathname == '/' || pathname == 'index') {
                    res.end('欢迎来到首页');
                 } else if (pathname == '/list') {
                    res.end('欢迎来到列表页页');
                 } else if (pathname == '/about') {
                    res.end('欢迎来到关于我们页面')
                 } else {
                    res.end('抱歉, 您访问的页面出游了');
                 }
             });
    
    
            2.Express框架
             // 当客户端以get方式访问/时
             app.get('/', (req, res) => {
             
     -----------// 对客户端做出响应-----------------------------------------------------
                // 1. send方法内部会检测响应内容的类型
                // 2. send方法会自动设置http状态码
                // 3. send方法会帮我们自动设置响应的内容类型及编码
                
                 res.send('Hello Express');
                 });
             // 当客户端以post方式访问/add路由时
             app.post('/add', (req, res) => {
                res.send('使用post方式请求了/add路由');
             });
    
    
        4.原生Node.js与Express框架对比之获取请求参数
            1. 原生Node.js
            app.on('request', (req, res) => {
                // 获取GET参数
                let {query} = url.parse(req.url, true);
                // 获取POST参数
                let postData = '';
                req.on('data', (chunk) => {
                    postData += chunk;
                });
                req.on('end', () => {
                    console.log(querystring.parse(postData)
                })); 
             });
    
    
            2.Express框架
             app.get('/', (req, res) => {
                // 获取GET参数
                console.log(req.query);
             });
    
             app.post('/', (req, res) => {
                // 获取POST参数
                console.log(req.body);
             }) 
    
    
        5.使用方法:
             // 引入Express框架
             const express = require('express');
             // 使用框架创建web服务器
             const app = express();
             // 当客户端以get方式访问/路由时
             app.get('/', (req, res) => {
                // 对客户端做出响应 send方法会根据内容的类型自动设置请求头---即text/html 等数据
                res.send('Hello Express'); // <h2>Hello Express</h2> {say: 'hello'}
             });
             // 程序监听3000端口
             app.listen(3000);
    
    
    
    二、中间件
        1.中间件的认识
            什么是中间件?
            中间件主要由两部分构成,中间件方法以及请求处理函数。
            中间件方法由Express提供,负责拦截请求,请求处理函数由开发人员提供,负责处理请求。
            
            #前面的app.get就是中间件方法由系统提供,后面就是处理函数,由开发人员提供
            app.get('请求路径', '处理函数')   // 接收并处理get请求
            app.post('请求路径', '处理函数')  // 接收并处理post请求
        2.中间件的使用(next)
            可以针对同一个请求设置多个中间件,对同一个请求进行多次处理。
            默认情况下,请求从上到下依次匹配中间件,一旦匹配成功,终止匹配。
            可以调用next方法将请求的控制权交给下一个中间件,直到遇到结束请求的中间件。
            app.get('/request', (req, res, next) => {
                 req.name = "张三";
                 next();
             });
            app.get('/request', (req, res) => {
                 res.send(req.name);
             });
    
    
    
        3.app.use中间件用法
            1.app.use 匹配所有的请求方式,可以直接传入请求处理函数,代表接收所有的请求。
                app.use((req, res, next) => {
                 console.log(req.url);
                 next();
                });
            2.app.use 第一个参数也可以传入请求地址,代表不论什么请求方式,只要是这个请求地址就接收这个请求。
                app.use('/admin', (req, res, next) => {
                 console.log(req.url);
                 next();
                });
    
    
            3.友情提示:
                next是继续匹配下一个相同的url,比如请求list,他会和第一个use匹配,然后next跳过另一个use和app.get匹配
                    app.use((req,res,next)=>{
                        console.log('app.use')
                        next()
                    })
                    app.use('/request',(req,res)=>{
                        res.send('request')
    
                    })
    
                    app.get('/list',(req,res,next)=>{
                        res.send('list1')
                    })
            4.中间件应用
                1.路由保护,客户端在访问需要登录的页面时,可以先使用中间件判断用户登录状态,用户如果未登录,则拦截请求,直接响应,禁止用户进入需要登录的页面。
                2.网站维护公告,在所有路由的最上面定义接收所有请求的中间件,直接为客户端做出响应,网站正在维护中。(放在最前面,接收所有请求并返回维护页面)
                3.自定义404页面(放在最后面,因为next会一个一个匹配,如果没匹配到就是not found)
                --res.status(404).send('当前访问的页面是不存在的')
            5.错误处理中间件(err)
                在程序执行的过程中,不可避免的会出现一些无法预料的错误,比如文件读取失败,数据库连接失败。
                错误处理中间件是一个集中处理错误的地方。
                app.use((err, req, res, next) => {
                    res.status(500).send('服务器发生未知错误');
                })
                
                
                错误处理中间件只能处理同步函数,异步函数不行,异步函数的错误需要主动通过next触发
                当程序出现错误时,调用next()方法,并且将错误信息通过参数的形式传递给next()方法,即可触发错误处理中间件。
                app.get("/", (req, res, next) => {
                 fs.readFile("/file-does-not-exist", (err, data) => {
                     if (err) {
                        next(err);
                     }
                 });
                });
    
    
    
            6.捕获错误 tyr{} catch(){}
                在node.js中,异步API的错误信息都是通过回调函数获取的,支持Promise对象的异步API发生错误可以通过catch方法捕获。
                
                try catch 只能捕获同步或异步函数的,不能捕获回调函数或Promise对象的
                try catch 可以捕获异步函数以及其他同步代码在执行过程中发生的错误,但是不能其他类型的API发生的错误。
                app.get("/", async (req, res, next) => {
                 try {
                     await User.find({name: '张三'})
                 }catch(ex) {
                     next(ex);
                 }
                });
    
    
    
    三、Express的进阶使用(路由)
        1.构建模块化路由(可以分级)
            const express = require('express') 
            // 创建路由对象
            const home = express.Router();
            // 将路由和请求路径进行匹配---------->一级
            app.use('/home', home);
            // 在home路由下继续创建路由---------->二级
            home.get('/index', () => {
                  //  /home/index
                 res.send('欢迎来到博客展示页面');
            });
            --------------------------------------------->访问的为home/index
            
    
    
        2.GET参数的获取
            Express框架中使用req.query即可获取GET参数,框架内部会将GET参数转换为对象并返回。
            // 接收地址栏中问号后面的参数
            // 例如: http://localhost:3000/?name=zhangsan&age=30
            app.get('/', (req, res) => {
            console.log(req.query); // 获得{"name": "zhangsan", "age": "30"}
            });
    
    
    
        3.POST参数的获取
            Express中接收post请求参数需要借助第三方包 body-parser。
            // 引入body-parser模块
            const bodyParser = require('body-parser');
    
            // 配置body-parser模块   
            // extended: false 方法内部使用querystring模块处理请求参数的格式
            // extended: true 方法内部使用第三方模块qs处理请求参数的格式
            app.use(bodyParser.urlencoded({ extended: false }));
            // 接收请求
            app.post('/add', (req, res) => {
            // 接收请求参数
            console.log(req.body);
            }) 
    
        4.Express路由参数
            -----------》localhost:3000/find/123
            app.get('/find/:id', (req, res) => { 
                console.log(req.params); // {id: 123} 
            });
    
    
        5.静态资源的处理
        通过Express内置的express.static可以方便地托管静态文件,例如img、CSS、JavaScript 文件等。
            app.use(express.static('public'));
            
    四、Express中的模板引擎
        1.使用:
            同时安装:使用npm install art-template express-art-template命令进行安装。
        2.范例
        // 当渲染后缀为art的模板时 使用express-art-template
        app.engine('art', require('express-art-template'));
        // 设置模板存放目录
        app.set('views', path.join(__dirname, 'views'));
        // 渲染模板时不写后缀 默认拼接art后缀
        app.set('view engine', 'art');
        app.get('/', (req, res) => {
         // 渲染模板
         res.render('index');
        }); 
    
    
        究极范例:
            const express = require('express');
            const path = require('path');
            const app = express();
    
            // 1.告诉express框架使用什么模板引擎渲染什么后缀的模板文件
            //  1.模板后缀
            //  2.使用的模板疫情
            app.engine('art', require('express-art-template'))
            // 2.告诉express框架模板存放的位置是什么
            app.set('views', path.join(__dirname, 'views'))
            // 3.告诉express框架模板的默认后缀是什么
            app.set('view engine', 'art');
    
            app.get('/index', (req, res) => {
                // 1. 拼接模板路径
                // 2. 拼接模板后缀
                // 3. 哪一个模板和哪一个数据进行拼接
                // 4. 将拼接结果响应给了客户端
                res.render('index', {
                    msg: 'message'
                })
            });
    
            app.get('/list', (req, res) => {
                res.render('list', {
                    msg: 'list page'
                })
            })
    
    
            // 端口监听
            app.listen(3000);
    
        
        ----------------------------------PS--------------------------------------
        1.要注意模板中的外链文件,修改他们的默认路径,因为那些静态资源是浏览器解析的
        他的相对路径是,相对于你在浏览器中打开的网页的地址  如admin/login,浏览器把localhost/admin看成是路径,Login看成文件,所以相对路径是admin
        他会把相对路径admin和外链路径css/base.css拼在一起形成admin/css/base.css,然后去静态资源文件夹如:public里获取
        所以我们可以在外链路径添加完整的路径
        
        2.app.locals 对象
        将变量设置到app.locals对象下面,这个数据在所有的模板中都可以获取到。
        app.locals.users = [{
             name: '张三',
             age: 20
            },{
             name: '李四',
             age: 20
            }]
  • 相关阅读:
    没人比程序猿更讨厌软件
    随心所欲~我也做个集合遍历器吧(自己的foreach,委托的威力)
    EF架构~DefaultValue让我的UnitOfWork更可读
    EF架构~数据分批批量提交
    陷阱~EF中的Update与Insert共用一个数据上下文
    我心中的核心组件(可插拔的AOP)~第四回 异常拦截器
    zigbee学习:示例程序SampleApp中通讯流程
    【网络可靠版】Extjs4 Treegrid 使用实例
    C#实现微信公众号群发消息(解决一天只能发一次的限制)
    oracle12c(oracle12.1.0.1.0)安装指南--实测OEL5.9(RH5)
  • 原文地址:https://www.cnblogs.com/otome/p/13511961.html
Copyright © 2011-2022 走看看