菜鸟教程简介: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. [TJOI 2018] XOR

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=5338 [算法] 首先对这棵树进行树链剖分 那么我们就将一个树上的问题转化为一个序列上 ...

  2. [Codeforces 787D] Legacy

    [题目链接] https://codeforces.com/contest/787/problem/D [算法] 线段树优化建边 ,  然后用Dijkstra算法求单源最短路 时间复杂度 : O((N ...

  3. WinThruster中文版破解方法(注册表无伤清理工具)

    每次卸载完软件,都会有注册表残余垃圾,久而久之电脑会越来越慢,winThruster可以检测出系统无用注册表,并删除. 1.解压文件,安装Setup_WinThruster_2015.exe文件. 2 ...

  4. PHP开发api接口 -- 安全验证 生成签名

    转载博客 ————. http://blog.csdn.net/li741350149/article/details/62887524 REST模式中HTTP请求方法(GET,POST,PUT,DE ...

  5. linq Foreach

    lst.ForEach(item => { CbxDF1VersionItemSource.Add(item); });

  6. 3-6局部变量的存储方式 & 3-7字符型字面值

    基础数据类型变量的存储 重点介绍方法级的变量,局势局部变量 存储中怎么存储呢? int n=100; 在栈中开辟内存存储空间. n是内存空间的别名 3-7字符型字面值 单引号不能丢,必须是英文状态. ...

  7. 如何将excel中的一个表格内容转成xml格式的文件

    转自:http://www.cnblogs.com/sansi/archive/2012/02/06/2340471.html 感谢作者,解决了折磨我几天的问题,顿时心情开朗~ ----------- ...

  8. 不能支持C++11的特性~,升级到4.8.2

    一.简易安装 操作环境 CentOS6.5 64bit,原版本4.4.7,不能支持C++11的特性~,希望升级到4.8.2 不能通过yum的方法升级,需要自己手动下载安装包并编译 1.1 获取安装包并 ...

  9. 一个github搞定微信小程序支付系列

    详情请前往github下载示例代码 源码中包含 支付.退款 功能 so easy,项目经理再也不用担心微信支付啦 是的,已经over了

  10. lightoj1062【几何(二分)】

    其实就应该想到,哪有那么简单让你直接搞出答案的几何题啊:(而且很有可能是二分? 题意: 有两个梯子,一个靠在左边墙上,一个靠在右边墙上,长度分别为 x 和 y,他们的交点距离地面高度是 c,求两个梯子 ...