• Node填坑教程——简易http服务器


    我们这一期做一个简易的http服务器。

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

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

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

    E:projectheron-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服务器。

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

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

    直接run app.js

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

    Cannot GET /

    的提示。

    然后我们来编写一个路由

    1 var express = require('express');
    2 
    3 var app = express();
    4 app.listen(3000); // 监听端口3000
    5 
    6 app.get('/', function (req, res) {
    7     return res.send('hello world');
    8 });

    rerun 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>
    View Code

    再接着编写app.js

     1 var path = require('path');
     2 var express = require('express');
     3 
     4 var app = express();
     5 app.listen(3000); // 监听端口3000
     6 
     7 // get: /
     8 app.get('/', function (req, res) {
     9     return res.send('hello world');
    10 });
    11 // get: /index
    12 app.get('/index', function (req, res) {
    13     return res.sendFile(path.join(__dirname, 'index.html'));
    14 });

    通过导入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:projectheron-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>
    View Code

    更新app.js代码

     1 var path = require('path');
     2 var express = require('express')
     3 var bodyParser = require('body-parser');
     4 
     5 var app = express();
     6 app.listen(3000); // 监听端口3000
     7 
     8 app.use(bodyParser.json());
     9 app.use(bodyParser.urlencoded({ extended: true }));
    10 
    11 // get: /
    12 app.get('/', function (req, res) {
    13     return res.send('hello world');
    14 });
    15 // get: /index
    16 app.get('/index', function (req, res) {
    17     return res.sendFile(path.join(__dirname, 'index.html'));
    18 });
    19 // get: /login
    20 app.get('/login', function (req, res) {
    21     return res.sendFile(path.join(__dirname, 'login.html'));
    22 });
    23 // post: /login
    24 app.post('/login', function (req, res) {
    25     if (req.body.userName === 'admin' && req.body.password === 'password')
    26         return res.send('ok');
    27     else
    28         return res.send('no');
    29 });

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

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

    项目地址:demo2

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

    下一期会讲到如何分离文件,和一些进阶用法。

  • 相关阅读:
    [USACO 5.5]Hidden Password
    [Codeforces 1016F]Road Projects
    再会,OI
    [TJOI 2018]智力竞赛
    [POI 2009]Lyz
    [NOI 2015]品酒大会
    [NOI 2017]蔬菜
    [NOI 2017]整数
    [NOI 2017]游戏
    [NOI 2017]蚯蚓排队
  • 原文地址:https://www.cnblogs.com/heron/p/4425336.html
Copyright © 2020-2023  润新知