zoukankan      html  css  js  c++  java
  • 将js进行到底:node学习6

    开始真正的node web开发——express框架

    为何说现在才是web开发的真正开始呢?

    首先任何企业都不会用原生的http协议API去开发一个完整的网站,除非她们先开发一个框架出来,其次我们之前的所谓http,connect都只是打开了一个http服务器而已,顶多只能算个工具集(中间件),最后使用像express这样的框架使我们把精力集中到功能业务上来了!

    生产力因此而得以体现!

    引入express

    上一章,即便我们已经可以使用connect处理用户各种请求了,但依然需要我们人为的去关注路由,文件判断,并且connect,serve-static只是起到了纯中间作用,且拼拼凑凑组合出一个看上去还不错的网站,这些并没有直接加强HTTP这个API。

    可以发现我们依然在使用 require("http").createServer()" 来创建http服务

    package.json

    {
        "name":"test-express",
        "version":"0.0.1",
        "description":"an express example",
        "dependencies":{
            "express":"latest",
            "jade":"latest"
        }
    }
    
    npm install
    

    Express是直接在http上加强的,封装了http API,我们不必再为http API缺少操心了

    Express创建HTTP服务器

    var express = require("express");
    var app = express();
    
    app.get('/',function(req,res){
        res.send("hello world");
    });
    
    app.listen(3000);
    

    可以看到express模块暴露的express方法本身,返回一个对象,其get方法已经解决了路径处理的问题。这是一个非常简单的示例页面,已经让我感受到了他将会使得web开发变得十分简单。

    Express托管静态文件

    使用express框架express.static来对上一回中的serve-static托管静态文件做修改,必须说明的是:express.static 是 Express 内置的唯一一个中间件。是基于 serve-static 开发的,负责托管 Express 应用内的静态资源。(官网说明)

    新建一个public目录专门存放静态文件:css,js,images等资源文件都可以

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

    只需要一行代码,测试效果

    这里写图片描述

    Express视图业务分离——模板渲染引擎Jade

    在刚开始开发web那会,我一直无法理解php的smarty是什么,在开发了javaee之后,慢慢熟悉了一个名词“模板引擎”,由于php本身可以内嵌html所以,很容易让初学者忽视了这个模板引擎的概念,后来,开发java之时,我们需要将前端(html)后端(java)进行分离的时候,就需要接触到模板引擎了,主要作用:

    在纯html文件中输入规定格式的变量或者逻辑语言,在经过http发送给客户端浏览器前将其中的变量标记替换为对应的值,并且将逻辑语言编程,最终生成纯html文件流发送给客户端。

    通俗言之:模板引擎像一个加工模具,将非纯html(带模板代码)装入,生成新的,完善的纯html代码,这样我们不需要在html中直接嵌入后端语句来动态修改页面,这实现了逻辑和视图的分离(模板引擎是动态网站的核心内容之一)

    举个栗子,使用Jade模板引擎!(需要外部模块,前面package.json中已经加入了)

    首先模板存放位置,新建:views目录->新建index.jade文件

    前端index.jade

    doctype   
    html  
        head  
            title= pageTitle  
            script(type='text/javascript').  
                function showCityEx(city)  
                {  
                    return city + " & " + city;  
                }  
              
        body  
            h1 #{h1}  
          
            table(border=1)  
                tr  
                    th hello  
                    th world,citys.count=#{cscores.length + 3}  
                    th count  
                for city,index in citys  
                    tr  
                        td= index  
                        td welcome to #{city}(#{city.substr(0,4)})  
                        td= cscores[index]  
            div over!  
    
    

    后端:index.js

    var express = require("express");
    var app = express();
    
    var city_names = [  
        'wuhan',  
        'tianjin',  
        'beijing',  
        'shanghai'  
    ];
    var city_scores = [  
        '60',  
        '62',  
        '80',  
        '70'  
    ];
    app.use(express.static('public'));
    app.set("view engine","jade");
    app.set("views",__dirname+"/views");
    
    app.get('/',function(req,res){
        res.render("index",{citys:city_names,cscores:city_scores});
    });
    
    app.listen(3000);
    

    解释

    学习express先不理会那些jade模板代码,如需了解,参考Jade官网API:http://jade-lang.com/

    重心放在nodejs代码上,app.get方法并没有改变,参数URL绑定了参数回调函数。

    res调用了render,是模板引擎渲染方法,表示向客户端输出一个渲染后的html

    1. 配置一:使用app.set可以配置express,将view engine设置为jade
    2. 配置二:将模板存放位置配置为:views目录,我们将jade文件放在里面,以后自动读取
    3. render参数一:文件名,不带后缀
    4. render参数二:jade模板中需要替换掉的变量
    5. render还有一个参数是回调函数,处理生成的html,可以这样写:
    res.render("index",function(err,html){
        //继续处理html,比如打印到控制台console.log(html);
    });
    

    模板引擎的基本使用套路无非就是:设置模板类型,设置模板目录,render出来!

    Jade模板语言本身值得我们单独拿出来学习!

    Express request与response

    整个HTTP开发都围绕着request(用户请求)和response(响应请求)在做开发。

    express为我们封装了http的req与res对象,方便开发。

    记录一些常见的对象方法:

    Request

    如果直接打印req对象你会看到一堆乱七八糟东西,没啥意思。

    打印如下这些东西研究一下:

    params对象

    app.get('/user/:name',function(req,res){
        console.log(req.params.name);
    })
    

    地址栏输入:http://localhost:3000/user/devil

    终端显示:

    这里写图片描述

    query对象

    app.get('/user',function(req,res){
        console.log(req.query.name);
    });
    

    地址栏输入:http://localhost:3000/user?name=devil

    终端显示:同上!

    Response

    download()

    app.get('/getimg',function(req,res){
        res.download(__dirname+"/public/images/xq.jpg");
    });
    

    用于下载文件,使用后强制用户下载该文件

    json()和jsonp()

    app.get('/json',function(req,res){
        res.json({name:"devil",sex:"男",body:"strong"});
    });
    

    强制将js对象转换为json数据格式发送给客户端,后者则支持jsonp,效果一样。

    redirect()

    app.get('/baidu',function(req,res){
        res.redirect('http://www.baidu.com');
    });
    

    重定向到其他页面

    send()

    app.get('/send',function(req,res){
        res.send({some:'json'});
    });
    

    send是express非常常用的方法,功能巨多,优点是可自动转化格式,输入数字发送状态码,输入字符串返回客户端字符串,输入js对象返回json对象,他能对参数数据类型做很好的判断,要优于上述json()方法。

    sendFile()

    app.get('/send',function(req,res){
        res.sendFile("E:\视频\电影\v字仇杀队.mp4");
    });
    

    这个就有意思了,是发送文件,但并不会使得用户下载,应该是以二进制流的方式发送文件,理论上还需要浏览器支持,测试后效果:

    这里写图片描述

    如果是图片文件,则显示图片。

  • 相关阅读:
    SpringBoot打包的程序部署到服务器后一直在后台运行
    ubuntu搭建mysql数据库
    解决ubuntu16.04 ‘E: 无法获得锁 /var/lib/dpkg/lock-frontend
    项目部署篇之——下载安装Xftp6,Xshell6
    linux 文件 chgrp、chown、chmod
    linux 正确的关机方法
    linux 常用命令
    spring 事务
    Spring 中 ApplicationContext 和 BeanFactory 的区别
    java 异常处理
  • 原文地址:https://www.cnblogs.com/devilyouwei/p/8445429.html
Copyright © 2011-2022 走看看