zoukankan      html  css  js  c++  java
  • Node.js框架 —— Express

    一、安装express

    1.需先安装express-generator

    npm install -g express-generator

    2.安装express

    npm install -g express 

    3.验证是否安装成功

    express --version

    二、新建项目

    1.创建ejs项目模板

    express --view=ejs Express

    2.安装依赖

    cd  Express
    npm install

    三、启动项目

    查看package.json里的 scripts命令,例如:

    "scripts": {
    "start": "node ./bin/www"
    },

    执行命令

    node ./bin/www

    打开 http://localhost:3000/ 

    四、目录文件详解

    bin/www           配置服务器监听端口

    router/index.js    配置路由控制文件  可在里面配置多个路由

    views/index.ejs   模板文件,即router/index.js 中调用的模板   <%= title %>  表示引用router/index.js 中的变量,如 <%= name %>

    app.js                配置express对象 

    关于experss的路由配置

    在 router/index.js 里配置各个路由 

    除了固定的路由路径外,express还支持配置动态的路由,即路由后面可以带参数,使用 req.params.参数名 获得参数值

    路由规则同样支持js正则表达式,例如 router.get(' /user/正则' ,callback),这样的好处在于可以匹配更加复杂的路由。访问参数通过req.params[0] 进行访问

    例子:

    var express = require('express');
    var router = express.Router();
    
    /* GET home page. */
    router.get('/', function(req, res, next) {
      res.render('index', { title: 'Express' });
    });
    
    router.get('/test', function(req, res, next) {     // 配置固定的路由
      res.send('test路径已经存在');
    });
    
    
    router.get('/user/:username', function(req, res, next) {    // 配置带参数的动态路由
      res.send('user:'+req.params.username);                     // req.params.参数名
    });
    
    module.exports = router;

    REST风格的路由规则

    Experss支持REST风格的请求方式,REST意思是表征状态转移,它是一种基于HTTP协议的网络应用的接口风格,充分利用HTTP的方法实现了统一风格的接口和服务

    HTTP协议定义了以下8个标准请求方法:

    GET :     请求获取指定的资源     获取

    POST :     向指定资源提交数据    提交

    DELETE : 请求服务器删除指定资源  删除

    PUT :       请求服务器存储一个资源  存储

    HEAD :     请求指定资源的响应头

    TRACE :    回显服务器接到的请求,主要用于用户测试和诊断

    CONNECT : HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器

    OPTIONS :  返回服务器支持的HTTP请求方法

    这8个方法都是安全的,所谓的安全指的是连续访问多次所获得的结果不受访问者的影响,而幂等指的是重复请求多次与一次请求的效果是一样的,比如获取。更新和删除操作是幂等,与新增不同

    EXperss对每种HTTP请求方法都设计了不同的路由绑定函数,例如该路径绑定了GET请求,向这个路劲发起其他的请求方式不会被响应

    router.all (path , callback,next)   方法可以响应所有的请求方式

    例如:

    router.get(path , callback) 
    
    router.post(path , callback)
    
    router.put(path , callback)
    
    router.delete(path , callback)

    路由的控制权转移

    Experss 支持同一路径绑定多个函数,使用next() 可以让改请求执行下一个函数

    例子:

    router.all('/test',function(req,res,next){
      console.log('执行 all 请求方法的函数')
      next();       // 两个函数执行方法冲突,默认执行第一个。使用next()  则跳过该函数,执行下一个回调函数,即get
    })
    
    router.get('/test',function(req,res,next){
      res.end('执行 get 请求方法的函数')
    })

    关于Express的模板引擎

    express 的模板引擎有 ejs 和 jade 两种,它们的书写语法不同

    ejs 模板的标签:

    <% code %>   JavaScript代码

    <%= code %>  显示替换过的HTML特殊字符内容  解析文本

    <%- code %> 显示原始HTML内容,一般用于配置公共模板

    关于模板引擎中的公共模板  layout.ejs 

    Express 支持定义公共模板,在views文件夹中创建 layout.ejs 文件   注意使用 <%- body %> 

    jade公共模板的实现:在我们请求的目的页面中的第一句写上 extends(继承)  name(模板布局名称)

    ajs公共模板的实现: 引入express-partials 实现定义  layout.ejs 

    npm install express-partials

    app.js里面引用express-partials:
    1 添加引用var partials = require(‘express-partials’);
    2 在app.set(‘view engine’, ‘ejs’);下面添加app.use(partials());

    ajs模板引擎中使用layout.ejs例子:

    路由:

    router.get('/', function(req, res, next) {
      res.render('test', { title: 'Express' });
    });

    引用模板:

    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <p>这是测试模板引擎</p>

    自动调用公共模板 layout.js

    <!DOCTYPE html>
    <html>
      <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
        <h1>这是公共模板头部</h1>
        <%- body %>
        <h1>这是公共模板底部</h1>
      </body>
    </html>

    如果不愿意使用默认的layout.ejs,可自行指定  在定义参数里加上 layout : '模板名字'   使用 layout: false  则不使用公共模板

    router.get('/', function(req, res, next) {
      res.render('test', { title: 'Express' , layout:'layout2'});
    });

    关于模板引擎中的局部模板(视图片段) <%- partial %>

    在某些情况下需要循环遍历输出数据,这时候就要用到局部模板,在视图中使用 partial 实现

    在父模板中使用 partial('commentName', list) 遍历输出数据,传入两个参数,第一个为子模板的名字(也是遍历到的每个变量名),第二个为需要遍历的数据

    定义子模板,输出遍历到的数据,使用的变量名称为父模板中引用的子模板名字

    例子:

    路由

    router.get("/",function(req,res){                                                  
      res.render("index",{title:"片段视图",list:['第一','第二','第三']});                                
    });

    父模板:

    <!-- 这里的 comment 是子模板的名字,list 是需要遍历输出的变量(数组或对象) -->
    <ul><%- partial("comment", list)%></ul> 

    子模板:

    <!-- comment 表示每个遍历到的数据,不过名称必须和父模板中的 partial方法第一个参数相同 -->
    <li><%= comment %></li> 

    如果遍历输出的数据需要判断是第一个或者最后一个,可以使用 firstCollection  或者 lastCollection

    判断第一个输出的数据加action类的例子:

    <li class="<%if(firstInCollection){%> action <%}%>"> 
     <%=comment%>
    </li>

    如果数据是由后台返回的数组,则可以使用下面的方式遍历输出:

    <% arr.forEach(function(post,index){
        if(index % 3==0){ %>
            <div class="row">
        <%}%>
        <div class="span4">
            <h2><a href="/u/<%=post.user%>"><%=post.user %></a></h2>
            <p><small><%=post.time%></small></p>
            <p><%=post.post%></p>
        </div>
         <% if(index % 3 == 2){%>
            </div> <!--结束行-->
         <%}%>
    <%})%>
        <% if (posts.length % 3 !=0){ %>
          </div>  <!--结束行-->
        <%}%>

    视图助手  locals   在app.js中声明    (可以理解为定义全局的函数或变量,每个视图都可以调用)

    视图助手分为 静态视图助手动态视图助手,两者的差别在于,静态视图助手可以是任何类型的对象,包括可接收任意类型参数的函数。但访问到的对象必须是和用户请求无关的。

    而动态视图助手只能是一个函数,并且不能接收任何参数,但是可以访问 req 和 res 两个对象

    静态视图助手:

    app.locals.sayHello = function(data){
      return data+'Wenlcome to locals'
    }

    可以在任意一个视图中调用:

    <li class="<%if(firstInCollection){%> action <%}%>"> 
     <%=sayHello(comment)%>
    </li>

    动态视图助手:  必须声明在 app.use('/', index)之前   使用 next()

    // 动态视图助手
    app.use(function(req, res, next){
      res.locals.Welcome = function(){
        return req
      }
      next()
    })
    
    app.use('/', index);
    app.use('/users', users);

    关于Express的条件渲染  if判断

    格式: 

    <% if (条件){ %>
    渲染内容
    <%}%>

    例子:

        if(true){ %>
            <p>这是渲染内容</p>
        <%}%>
  • 相关阅读:
    PAT1037:Magic Coupon
    PAT1081:Rational Sum
    PAT1039: Course List for Student
    PAT1069:The Black Hole of Numbers
    VC++中字符串编码处理的一些相关问题
    PAT1110:Complete Binary Tree
    Java编译器003---javac -d/-sourcepath/-classpath选项
    Java编译器002---javac -source/-target选项
    Java编译器001---javac -g选项
    力扣练习010---把字符串转换成整数
  • 原文地址:https://www.cnblogs.com/zhengweijie/p/7607520.html
Copyright © 2011-2022 走看看