菜鸟教程简介：Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。

使用express创建一个基本的网站（用vs code开发）。（根据Node与Express开发那本书的例子）

1、首先npm init，初始化package.json文件；npm install --save express安装express；

2、接下来创建meadowlark.js文件，这是项目的入口。（最终代码）

var express = require('express');

var app = express();

var handlebars = require('express3-handlebars')

.create({ defaultLayout:'main' });

app.engine('handlebars', handlebars.engine);

app.set('view engine', 'handlebars');

app.use(express.static(__dirname + '/public'));

app.get('/', function(req, res){

    res.render('home');

});

app.get('/about', function(req, res){

    var randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];

    res.render('about', { fortune : randomFortune });

});

app.use(function(req, res, next){

    res.status(404);

    res.render('404');

});

app.use(function(err, req, res, next){

    console.error(err.stack);

    res.status(500);

    res.render(500);

});

app.listen(3000, function () {

    console.log('访问地址为:');

})

var fortunes = [

    "随机发送幸运饼干1",

    "随机发送幸运饼干2",

    "随机发送幸运饼干3",

    "随机发送幸运饼干4",

]

学到的技术点：

　　指定端口的方式：app.set(port, process.env.PORT || 3000);

　　app.get是我们添加路由的方法，有两个参数：一个路径和一个函数。在express文档中写的是app.VERB.VERB指代HTTP动词（get和post）。

　　app.use是添加中间件的方法。在express中路由和中间件的添加顺序很重要，如果把404处理器放在所有路由上面，那首页和关于页面就不能用了。

　　

3、使用模板框架express3-handlebars，用npm下载，之后设置handlebars视图引擎。views/layout/main.handlebars为默认通用框架。

　　配置代码：

var handlebars = require('express3-handlebars')

.create({ defaultLayout:'main' });

app.engine('handlebars', handlebars.engine);

app.set('view engine', 'handlebars');

4、在第三步创建handlebars实例时，我们指明了默认布局{ defaultLayout:'main' }，意味着所有视图用的都是这个布局。接下来给首页创建视图页面，meadowlark/views/home.handlebars：

　　<h1>Welcome to Meadowlark Travel</h1>
关于页面，meadowlark/views/about.handlebars：
　　<h1>About Meadowlark Travel</h1>
未找到页面，meadowlark/views/404.handlebars：
　　<h1>404 - Not Found</h1>
服务器错误页面，meadowlark/views/500.handlebars：
　　<h1>500 - Error</h1>
 
5、在meadowlark.js替换新路由，上面代码里就是新路由
6、static中间件可以将一个或多个目录指派为包含静态资源的目录，其中的资源不需要经过任何特殊处理直接发送到客户端。可以在其中放图片、css文件、js文件等。
接下来在public下面创建一个子目录img，放图片进去。路径直接指向/img/...png，static中间件会返回这个文件，并正确设置文件类型。
main.handlebars的内容如下：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Meadowlark Travel</title>

</head>

<body>

    <header><img src="/img/favicon.ico" alt=""></header>

    {{{body}}}

</body>

</html>

7、视图中的动态内容

在meadowlark.js中定义一个幸运饼干数组：

var fortunes = [
"随机发送幸运饼干1",
"随机发送幸运饼干2",
"随机发送幸运饼干3",
"随机发送幸运饼干4",
]
修改视图（/views/about.handlevars），显示幸运饼干：
<h1>About Meadowlark Travel</h1>
<p>Your fortune for the day</p>
<blockquote>{{fortune}}</blockquote>
8、修改路由/about
app.get('/about', function(req, res){
var randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
res.render('about', { fortune : randomFortune });
});
9、重启服务器，加载about页面会看到随机饼干。
 
 文件列表：

 

学习express（一）的更多相关文章

  1. express学习-express搭建后台

    前言:本文是纯用node express做一个后端服务的教程,并不等同于express官网的入门教程,本文也并不涉及任何高级的Node服务端性能优化等知识. 本文是在已经看过express官方入门指南 ...

  2. node.js 基础学习 express安装使用

    安装好nodeJs,我们需要使用命令行中安装express. 我这里默认将Node.js安装在C:\Program Files\nodCejs\盘中. 在保持联网的状态下,依次输入如下命令. npm ...

  3. nodejs学习--express篇

    express篇:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 提供了内置的中间件 express.static ...

  4. Nodejs in Visual Studio Code 03.学习Express

    1.开始 下载源码:https://github.com/sayar/NodeMVA Express组件:npm install express -g(全局安装) 2.ExpressRest 打开目录 ...

  5. crossplatform---Nodejs in Visual Studio Code 03.学习Express

    1.开始 下载源码:https://github.com/sayar/NodeMVA Express组件:npm install express -g(全局安装) 2.ExpressRest 打开目录 ...

  6. express再学习

    对比spring,django,再学习express就有很多共通的地方啦... 看的书是一本小书,<express in action>,排版比较好. 昨天开始看,看了快四分之一啦... ...

  7. express源码学习

    终于腾出手来学习express.express在node.js中一株独秀.好像任何一种有主导的托管平台的语言,都出现这现象--马太效应.express是社区的共同孩子,里面聚集上社区最好的常用模块.从 ...

  8. 一天学习一点之express demo

    接着上一篇,安装了nodejs之后,再安装express,顺序执行以下命令 1.npm  -g install express; 2.npm -g express-generator; 3.使用exp ...

  9. Express开发实例(2) —— Jade模板引擎

    前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...

随机推荐

  1. asio socket设置 server地址与端口的两种方式

     1. 用解释器的方法, 常用来解析域名, 如 // query("www.163.com","80"), 也可以 query("www.163.co ...

  2. 蓝桥杯 2014本科C++ B组 李白打酒 三种实现方法 枚举/递归

    标题:李白打酒 话说大诗人李白,一生好饮.幸好他从不开车. 一天,他提着酒壶,从家里出来,酒壶中有酒2斗.他边走边唱: 无事街上走,提壶去打酒. 逢店加一倍,遇花喝一斗. 这一路上,他一共遇到店5次, ...

  3. 想要删除table的某一行的js写法

    <tr><td onclick="del_tr(this)" >删除</td></tr> // 删除一行 function del_ ...

  4. Fitnesse 访问日志配置

    1. 在build.xml中修改Finesse运行时的参数 <target name="run" depends="compile, compile-bootstr ...

  5. 洛谷 - P4449 - 于神之怒加强版 - 莫比乌斯反演

    https://www.luogu.org/problemnew/show/P4449 \(F(n)=\sum\limits_{i=1}^{n}\sum\limits_{i=1}^{m} gcd(i, ...

  6. 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content

    如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...

  7. Codeforces 67A【模拟】

    题意: 给一个字符串代表相邻学生的比较,L代表左边多,R表示右边多,=表示左右相等. 保证每个人拿糖>=1,在分糖最少的情况下,输出每个学生所分得的糖. 思路: 模拟一下,第一个人一开始拿1个, ...

  8. laravel 视图调用方法并传递参数

    视图层 route 中文 路由 <a href="{{route('cc',array('id'=>11111))}}">446454</a> 路由层 ...

  9. [Xcode 实际操作]九、实用进阶-(4)计算两个日期间的差值

    目录:[Swift]Xcode实际操作 本文将演示如何计算两个日期之间的差值. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class ...

  10. IT兄弟连 JavaWeb教程 JSP内置对象经典案例

    案例需求:使用MVC模式编写一个程序当发起一个deptList.do请求时在servlet中准备一个部门列表对象,把这个列表对象放入request作用域中,然后转发到deptlist.jsp,使用js ...