学习express（一）

最新推荐文章于 2024-07-12 16:27:40 发布

weixin_30399797

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量53

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/miacara94/p/8759831.html

版权

菜鸟教程简介：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",            
]

View Code

学到的技术点：

　　指定端口的方式：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');

View Code

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>

View Code

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页面会看到随机饼干。

文件列表：

转载于:https://www.cnblogs.com/miacara94/p/8759831.html

weixin_30399797

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习express（一）

菜鸟教程简介：Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。使用express创建一个基本的网站（用vs code开发）。（根据Node与Express开发那本书的例子）1、首先npm init，初始化package.json文件；...
复制链接

扫一扫