zoukankan      html  css  js  c++  java
  • 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 来安装依赖

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

  • 相关阅读:
    HTML元素解释
    Java命名规范
    HDU 1058 Humble Numbers(DP,数)
    HDU 2845 Beans(DP,最大不连续和)
    HDU 2830 Matrix Swapping II (DP,最大全1矩阵)
    HDU 2870 Largest Submatrix(DP)
    HDU 1421 搬寝室(DP)
    HDU 2844 Coins (组合背包)
    HDU 2577 How to Type(模拟)
    HDU 2159 FATE(二维完全背包)
  • 原文地址:https://www.cnblogs.com/heron/p/4425336.html
Copyright © 2011-2022 走看看