美文网首页前端开发工作专题
使用Express

使用Express

作者: BigDipper | 来源:发表于2015-10-15 15:08 被阅读344次

文档结构

使用Express

最简单的启动Express

在工程根目录下新建一个文件：app.js，文件内的代码如下：

var express = require("express"),
    app = express(),
    server;

// 启动服务器

server = app.listen("3000", "127.0.0.1", function () {
    console.log("服务器已启动，监听端口是\033[31m%d\033[0m。 \033[35;1mOh Yeah!\033[0m", server.address().port);
});

然后，用命令提示符窗口，在工程根目录下，启动工程：

node app

在浏览器中输入访问地址127.0.0.1:3000，效果如图所示：

最简单的启动Express.png

添加网站标识图标

下面稍稍加工一下，来为工程添加一个标识图标，就用这个图像吧(图像放在根目录下的public文件夹里)：

Oh my god ! They kill Kenny! You bastard!

首先，引入依赖模块：serve-favicon

npm install serve-favicon --save

其次，修改app.js文件：

var express = require("express"),
    favicon = require("serve-favicon"),
    app = express(),
    server;

// 网站标识图标
 
app.use(favicon(__dirname + "/public/kenny.png"));

// 启动服务器

server = app.listen("3000", "127.0.0.1", function () {
    console.log("服务器已启动，监听端口是\033[31m%d\033[0m。 \033[35;1mOh Yeah!\033[0m", server.address().port);
});

在浏览器中输入访问地址127.0.0.1:3000，效果如图所示：

添加网站标识图标.png

润色，向浏览器发送个字符串

这个光秃秃的页面，看着确实难受，总以为页面出错了呢。还是再润色一下，显示点文字吧。

用get方法吧，来根据请求路径来处理客户端发出的GET请求。

格式：app.get(path,function(request, response));
path为请求的路径，第二个参数为处理请求的回调函数，有两个参数分别是request和response，代表请求信息和响应信息。

修改app.js文件：

var express = require("express"),
    favicon = require("serve-favicon"),
    app = express(),
    server;

// 网站标识图标
 
app.use(favicon(__dirname + "/public/kenny.png"));

// 处理客户的的GET请求

app.get("/", function(req, res) {
    res.send("首页");
});

app.get("/about", function(req, res) {
    res.send("这是about页面");
});

app.get("*", function(req, res) {
    res.send("还没有页面，显示个404");
});

// 启动服务器

server = app.listen("3000", "127.0.0.1", function () {
    console.log("服务器已启动，监听端口是\033[31m%d\033[0m。 \033[35;1mOh Yeah!\033[0m", server.address().port);
});

这样就指定了about页面路径、根路径和所有路径的处理方法。并且在回调函数内部，使用HTTP回应的send方法，表示向浏览器发送一个字符串。

效果如图所示：

首页.png about页面.png 其他页面.png

来真的了，访问一个页面

接下来，该弄点儿干货了。首页还是简陋，又不能光用字符串拼出个正经的、比较美观的页面，真那样干，非得累死不行。怎么解决呢？有个法儿，用模板呗。先把需要的内容用模板组装好，然后在需要显示的时候调用它，靠，简单利索。

事儿就是这么个事儿，下手吧。

其实，Express本身自己是有模板引擎的，你想啊，这么牛B的框架，连模板引擎都没有，怎么能拿出手给人看呢。它默认的模板是jade，中文的意思是翡翠。怎么样，很高大上吧，不过，这个模板我不会用，它的语法、文档格式什么的，我看着很陌生，所以我选择了另外一种模板，名字叫ejs，这个模板的文档格式跟html非常贴近，它的语法又跟jsp非常贴近，而且据路边八卦社透露，它的性能要比jade高，因此就拿它试刀吧。

使用ejs模板的步骤如下：

  1. 安装ejs模块
    在命令提示符下进行安装，代码如下：
npm install ejs --save
  1. 指定前端模板所在文件夹
app.set("views", __dirname + "/view");
  1. 指定用ejs模板引擎来解析
app.set("view engine", "ejs");
  1. 设置路由
app.get("/", function(req, res) {
    res.render("index");
});

这段代码的意思是说：当访问工程的根路径时，ejs引擎会调用view文件夹下的index.ejs文件，解析后，将结果显示到浏览器中。注意：调用模板要用render()方法，而不是之前介绍的send()方法。

index.ejs文件内容如下：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="UTF-8">
        <title>首页---ejs模板</title>
    </head>
    <body>
        我是ejs模板
    </body>
</html>

app.js文件内容如下：

var express = require("express"),
    favicon = require("serve-favicon"),
    app = express(),
    server;

// 设置前端模板所在文件夹

app.set("views", __dirname + "/view");

// 指定用ejs模板引擎

app.set("view engine", "ejs");

// 网站标识图标
 
app.use(favicon(__dirname + "/public/kenny.png"));

// 处理客户的的GET请求

app.get("/", function(req, res) {
    res.render("index");
});

app.get("/about", function(req, res) {
    res.send("这是about页面");
});

app.get("*", function(req, res) {
    res.send("还没有页面，显示个404");
});

// 启动服务器

server = app.listen("3000", "127.0.0.1", function () {
    console.log("服务器已启动，监听端口是\033[31m%d\033[0m。 \033[35;1mOh Yeah!\033[0m", server.address().port);
});

效果如图所示：

使用ejs模板引擎.png

基因突变，用ejs引擎解析html文件

可以看得出来，上面的解析ejs文件例子中，这个index.ejs文件的文档结构其实就是一个html的文档结构，那么问题来了，ejs引擎能不能解析html文件呢？Of course, no problem!

那么，下手吧。

用ejs解析html文件，只需要两行代码：

app.set("view engine", "html");
app.engine('.html', require('ejs').__express);

这样，修改后的app.js文件的内容就是这样的：

var express = require("express"),
    favicon = require("serve-favicon"),
    app = express(),
    server;

// 设置前端模板所在文件夹

app.set("views", __dirname + "/view");

// 指定用ejs模板引擎，来解析后缀是.html的文件

app.set("view engine", "html");
app.engine('.html', require('ejs').__express);

// 网站标识图标
 
app.use(favicon(__dirname + "/public/kenny.png"));

// 处理客户的的GET请求

app.get("/", function(req, res) {
    res.render("index");
});

app.get("/about", function(req, res) {
    res.send("这是about页面");
});

app.get("*", function(req, res) {
    res.send("还没有页面，显示个404");
});

// 启动服务器

server = app.listen("3000", "127.0.0.1", function () {
    console.log("服务器已启动，监听端口是\033[31m%d\033[0m。 \033[35;1mOh Yeah!\033[0m", server.address().port);
});

这段代码的意思是说：当访问工程的根路径时，ejs引擎会调用view文件夹下的index.html文件，解析后，将结果显示到浏览器中。

index.html文件内容如下：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>首页-HTML模板</title>
</head>
<body>
    我是HTML模板
</body>
</html>

效果如图所示：

用ejs引擎解析html文件.png

然后...该定义静态资源的目录了

众所周知，一个页面中只用HTML标签来展示是远远不够的，它还应当具有丰富的配色（让用户看起来顺眼，舒服）和逻辑交互（与用户互动，完成某些操作），这就需要用到CSS样式文件、各种图像文件、JS脚本文件等等各种类型的静态资源。那么，问题又来了，怎样让Express能够访问到这些静态资源呢？其实不难，只需要在app.js文件中指定存放静态资源的目录就行了。

在app.js文件中添加如下代码：

var path = require('path');

// 定义静态文件目录

app.use(express.static(path.join(__dirname, 'public')));

这样，Express就能够访问到根目录下public文件夹中的静态资源了。

index.html文件内容如下：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>首页-HTML模板</title>
    <link href="/css/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
    我是HTML模板
</body>
</html>

这样public/css文件夹下的demo.css就可以被页面加载、解析了。

别忘了，要设置路由

...

相关文章

网友评论

本文标题：使用Express

本文链接：https://www.haomeiwen.com/subject/gfgncttx.html

延伸阅读

深度阅读

  • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

栏目导航

热点阅读

前端开发

工作专题

关于我们|服务条款|联系我们|使用Express|投稿指南|网站地图|RSS订阅|排版工具|手机版

提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！