nodejs+Express开发第一个web应用

分手后的思念是犯贱 2022-03-28 04:28 359阅读 0赞

express是nodejs开发中最常用的一个http服务框架，通过他可以很方便的构建http服务。另外他本身还提供了路由功能，就是对请求的路径做区分，分别对应后台不同的请求。这里介绍如何通过express构建第一个web应用。

express的安装，需要通过npm install express --save。

安装了express，我们会看到项目路径下面多了一个文件夹node\_modules里面全是express所有的依赖包。默认会包含express,ejs,body-parser,cookie等。

项目结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

在项目根路径下新建app.js，这里简单引入相关依赖：

var express = require("express");
    var app = express();
    var path = require("path");
    var router = require("./router/router");

其中,./router/router这个依赖是本地文件，包含的内容就是前面说过的express自带的Router路由 ，负责处理前端页面的各种请求。

第一步：设置静态文件路径

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

第二步：设置模板引擎(默认express支持的模板引擎现在是ejs，我们可以通过如下代码将其修改为我们熟悉的html模板)

app.engine('html',require('ejs').__express);
    app.set("view engine","html");
    app.set("views",path.join(__dirname,"public/views"));

通过这三句，我们就把express默认的ejs引擎改为了我们熟悉的html模板引擎，ejs虽然不是很难，但是我们还是喜欢默认的html作为模板。最后一句是设置静态页面所在的位置。这么指定了之后，我们在处理页面渲染的时候，就不用每次都带上public/views这么一串路径文字了。express会直接在项目路径下的public/views文件夹下寻找静态页面。

第三步：设置中间件

这里略过，一般我们会设置boby-parser,cookie-parser等等中间件。

第四步：设置路由

这里新建一个文件router/router.js，编写我们前端的相关请求处理逻辑(get,post,delete,put)。

在app.js文件中，我们需要做如下的编码：

app.use("/",router);

第五步：启动http监听服务

var server = app.listen(3000,function(request,response){
    	var host = server.address().address;
    	var port = server.address().port;
    	console.log("server running at http://%s:%s",host,port);
    });

我们还需要准备两个静态文件一个是index.html,一个是views/admin/welcome.html，他们均在public文件夹下。

index.html

<!doctype html>
    <html>
    	<head>
    	   <meta charset="UTF-8"/>
    	   <title>nodejs</title>
    	   <link rel="stylesheet" type="text/css" href="/css/reset.css"/>
    	   <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    	</head>
    	<body>
    		<div id="container">
    			<h2>This is the first page by nodejs</h2>
    			<a href="/welcome">welcome</a>
    		</div>	
    	</body>
    </html>

views/admin/welcome.html

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>welcome</title>
    	<link rel="stylesheet" type="text/css" href="/css/reset.css"/>
    	<link rel="stylesheet" type="text/css" href="/css/public.css"/>
    </head>
    <body>
    	<div id="container">	
    		<h2>welcome to nodejs router.</h2>
    	</div>
    </body>
    </html>

css文件这里就略过，他们也在public目录下。

最后可以通过node app.js启动服务，我们可以访问http://127.0.0.1:3000。以下是启动成功的打印输出信息。

Administrator@hadoop MINGW64 /d/workspaces/javascript/nodejs
    $ node app.js
    server running at http://:::3000

访问项目首页，我们可以点击welcome链接，然后就跳到了admin/welcome.html页面。

![20190109163332190.gif][]

请求中，我们还做了两个json请求，他们的访问结果如下：

![20190109163517844.gif][]

完整的app.js

var express = require("express");
    var app = express();
    var path = require("path");
    var router = require("./router/router");
    //配置视图模板引擎为html
    app.use(express.static(path.join(__dirname,'public')));
    app.engine('html',require('ejs').__express);
    app.set("view engine","html");
    app.set("views",path.join(__dirname,"public/views"));
    
    app.use("/",router);
    var server = app.listen(3000,function(request,response){
    	var host = server.address().address;
    	var port = server.address().port;
    	console.log("server running at http://%s:%s",host,port);
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20220328/c66a05c0a778485eb22b47bbf911443c.png
[20190109163332190.gif]: /images/20220328/96dcca961b6540e4a0fc4303e666a3da.png
[20190109163517844.gif]: /images/20220328/cd29d63dadcd484c9a72990fc1ad455f.png