Node 入门之简易的 http 服务器

发布于 2021-12-07 20:30:50 字数 4386 浏览 977 评论 0

先建一个文件夹,就算是一个空的项目了。然后新建 app.js 和 package.json 文件。

这样一个简易项目的基本文件就建好了。

通过命令行工具,在项目路径下输入:

E:\project\heron-lesson>npm install express --save

通过 npm 命令安装最新版的 express。我现在的版本是

express@4.12.3

通过 npm install express --save 命令安装的库。会在你的项目里的 node_modules 文件夹内。同时 --save 参数会保存项目依赖到 package.json 文件里。不要忽视 package.json 文件,他对文件管理起到重要的作用。

回到 app.js 文件,只需要三行代码,就能完成一个http服务器。

var express = require('express');
var app = express();
app.listen(3000); // 监听端口3000

推荐使用 ide webstorm。授权问题自行百度,你懂的。

直接 run app.js

现在这个 http 服务器占用 3000 端口,并没有任何的路由,这是我们打开 http://127.0.0.1:3000/ 页面。会看到

Cannot GET /

的提示。

然后我们来编写一个路由

var express = require('express');

var app = express();
app.listen(3000); // 监听端口3000

app.get('/', function (req, res) {
    return res.send('hello world');
});

启动:

node app.js

重新访问 http://127.0.0.1:3000/ 页面,就能看到 hello world 了。

到这里,get 请求似乎没有什么问题了。但是如何访问一个页面呢?我们再写一个路由

新建 index.html 文件在项目根目录。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
<h2>Index</h2>
</body>
</html>

再接着编写 app.js

var path = require('path');
var express = require('express');

var app = express();
app.listen(3000); // 监听端口3000

// get: /
app.get('/', function (req, res) {
    return res.send('hello world');
});
// get: /index
app.get('/index', function (req, res) {
    return res.sendFile(path.join(__dirname, 'index.html'));
});

通过导入 path,使用 path.join 函数配合 __dirname 来获取文件路径,我们得到 index.html 的完整地址。并用 res.sendFile 函数来发送文件到客户端。访问 http://127.0.0.1:3000/index 页面查看效果。

如果你不理解这些函数的意义,请查阅 node 的 api https://nodejs.org/api/path.html#path_path_join_path1_path2 和 expressjs 的api http://expressjs.com/4x/api.html

再写一个结合 post 的路由。由于 express4+ 的版本中不封装 post 的数据,也没集成相关的库。所以这个东西得另外下载。如法炮制使用 npm 安装

E:\project\heron-lesson>npm install body-parser --save

新建 login.html 文件到根目录

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="" method="post">
    UserName <input type="text" name="userName"/>
    Password <input type="password" name="password"/>
    <input type="submit"/>
</form>
</body>
</html>

更新 app.js

var path = require('path');
var express = require('express')
var bodyParser = require('body-parser');

var app = express();
app.listen(3000); // 监听端口3000

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// get: /
app.get('/', function (req, res) {
    return res.send('hello world');
});
// get: /index
app.get('/index', function (req, res) {
    return res.sendFile(path.join(__dirname, 'index.html'));
});
// get: /login
app.get('/login', function (req, res) {
    return res.sendFile(path.join(__dirname, 'login.html'));
});
// post: /login
app.post('/login', function (req, res) {
    if (req.body.userName === 'admin' && req.body.password === 'password')
        return res.send('ok');
    else
        return res.send('no');
});

至此,简易 http 服务。正常的 get、pos t请求已经可以处理了。

访问 http://127.0.0.1:3000/login 并输入 admin 和 password。就能看到 ok 的提示。

项目地址:demo2

下载后可通过 npm install -d 来安装依赖

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

0 文章
0 评论
736 人气
更多

推荐作者

‘画卷フ

文章 0 评论 0

寂寞清仓

文章 0 评论 0

脸赞

文章 0 评论 0

WeiBestSmart

文章 0 评论 0

娇女薄笑

文章 0 评论 0

国粹

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文