• Node.js Express 从入门到菜鸟(一)——Hello World!+EJS模板+后台传参到前台+分布视图


        本系列写下去唯一的理由是给像博主一样头脑简单记不住Express使用方法的菜鸟们,但是会假定菜鸟们熟悉JavaScript,node.js基本使用方法,以及ASP.Net MVC。我会尝试在例子中加一些与ASP.Net MVC的对应知识点,但愿可以帮助理解而不是帮倒忙

        自学能力强的菜鸟可以移步https://github.com/visionmedia/express,下载源码自学。例子就在根目录下的Examples中。编译之前记得在根目录中输入 npm install以初始化运行环境。

        对于例子中使用到的Express方法,请移步http://expressjs.com/api.html,里面是Express的API

        1.Hello World!

        入门怎么少的了Hello World

    View Code
     1 var express = require('http://www.cnblogs.com/');//引入express包
     2 
     3 var app = express();//创建express实例
     4 
     5 //路由
     6 //下面的方法响应缺省“/”的get请求
     7 //req,res是不是看得特别眼熟?
     8 app.get('/', function(req, res){
     9   res.send('Hello World');
    10 });
    11 
    12 app.listen(3000);//设置监听http请求的端口号
    13 console.log('Express started on port 3000');

       访问www.localhost:3000.com     可以看到服务器直接返回的字符串  “Hello World!”(类似mvc中的 return Content("hello world!"))

       2.EJS模板+后台传参到前台+分布视图

       可以从服务器端直接返回字符串了,那该怎么显示好看的html页面呢?别着急,下面就是Express常用的视图模板EJS。看完了下面的例子,你应该学会如何返回html页面,如何向前台html页面传递参数以及写html页的好帮手——分布视图的

    使用方法

        后台node的代码

    View Code
     1 var express = require('http://www.cnblogs.com/');
     2 
     3 var app = module.exports = express();
     4 
     5 //注册ejs模板为html页。简单的讲,就是原来以.ejs为后缀的模板页,现在的后缀名可以//是.html了
     6 app.engine('.html', require('ejs').__express);
     7 
     8 //设置视图模板的默认后缀名为.html,避免了每次res.Render("xx.html")的尴尬
     9 app.set('view engine', 'html');
    10 
    11 //设置模板文件文件夹,__dirname为全局变量,表示网站根目录
    12 app.set('views', __dirname + '/views');
    13 
    14 var users = [
    15   { name: 'tobi', email: 'tobi@learnboost.com' },
    16   { name: 'loki', email: 'loki@learnboost.com' },
    17   { name: 'jane', email: 'jane@learnboost.com' }
    18 ];
    19 
    20 app.get('/', function(req, res){
    21   //向页面模板传递参数,可以传递字符串和对象,注意格式
    22   res.render('users', {
    23     users: users,
    24     title: "EJS example",
    25     header: "Some users"
    26   });
    27 });
    28 
    29 if (!module.parent) {
    30   app.listen(3000);
    31   console.log('Express app started on port 3000');
    32 }

       前台html的代码

    View Code
     1 //user.html
     2 
     3 <% include header.html %>
     4 
     5 <h1>Users</h1>
     6 <ul id="users">
     7   <% users.forEach(function(user){ %>
     8     <li><%= user.name %> &lt;<%= user.email %>&gt;</li>
     9   <% }) %>
    10 </ul>
    11 
    12 <% include footer.html %>
    13 
    14 //header.html
    15 <!DOCTYPE html>
    16 <html lang="en">
    17 <head>
    18   <meta charset="utf-8">
    19   <title> <%= title %> </title>
    20   <style type="text/css">
    21     body {
    22       padding: 50px;
    23       font: 13px Helvetica, Arial, sans-serif;
    24     }
    25   </style>
    26 </head>
    27 <body>
    28 
    29 //footer.html
    30 </body>
    31 </html>

       熟悉mvc的同学肯定看出来了,这不跟mvc那一套差不多嘛!  路由(Router)找到相关处理方法,方法(Controller)中要么直接返回字符串(return Content()),要么将数据传递给视图引擎(return View()),由视图引擎展示数据。

       可是仔细看看,还不是mvc,因为现在的这些代码结构不清晰,还没有分层次,下一篇中,咱们将看到express mvc的搭建

    本系列使用的操作系统为ubuntu,Node版本为0.10.0,Express版本为3.2.0,ejs版本为0.8.3,目前基本最新的版本了基本都是


        

  • 相关阅读:
    sqlserver跨数据库查询数据
    sqlserver调用钉钉方法
    SQL Server判断对象是否存在
    再学一次C#(基本类型篇)
    .net core部署到centos官方文档的一点小问题
    C#字符串和byte之间的互相转化(转载出自:https://www.cnblogs.com/liangxiaoking/p/5958456.html)
    30分钟通过Kong实现.NET网关
    Envoy实现.NET架构的网关(五)集成Redis实现限流
    Envoy实现.NET架构的网关(四)集成IdentityServer4实现OAuth2认证
    Envoy实现.NET架构的网关(三)代理GRPC
  • 原文地址:https://www.cnblogs.com/qiuyeyaozhuai/p/3037349.html
Copyright © 2020-2023  润新知