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

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

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

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

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

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

  1. 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/ 页面。会看到

  1. 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文件在项目根目录。

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>Index</title>
  6. </head>
  7. <body>
  8. <h2>Index</h2>
  9. </body>
  10. </html>

再接着编写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安装

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

新建login.html文件到根目录

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <form action="" method="post">
  9. UserName <input type="text" name="userName"/>
  10. Password <input type="password" name="password"/>
  11. <input type="submit"/>
  12. </form>
  13. </body>
  14. </html>

更新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 来安装依赖

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

Node填坑教程——简易http服务器的更多相关文章

  1. Node填坑教程——前言

    Node是什么? Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物 ...

  2. Node填坑教程——HelloWorld

    环境安装(极简): Node需要的环境可以说及其简单,也可以说及其复杂.为什么这么说呢? 如果里只需要运行环境那么到Node官网下载一个包就行了.里面自带npm管理工具,这是包管理工具,以后会频繁的使 ...

  3. Node填坑教程——整理文件

    如果你能把所有代码写进一个文件,并且能很好的管理.协调.多人开发.那么可以跳过这期(请务必带我飞). 我们接着完善上期的代码,给代码分家. node并没有启动入口,更没有固定的项目结构,文件配置.这些 ...

  4. Node填坑教程——过滤器

    所谓“过滤器”,只是一个概念,可以理解是一个路由,也可以理解为一个中间件.原理非常简单,就是利用匹配规则,让其有限匹配在正常的路由前面处理就行了. 比如有如下路由 app.get('/', funct ...

  5. Node填坑教程——常用库

    作为函数式编程来说,流程控制和函数库是必不可少的(应该吧). 下面我们介绍两个常用的库. lodash:完整的api请参阅,https://lodash.com/docs.这里我们只演示几个简单的例子 ...

  6. ReactNative 从环境和第一个demo说起,填坑教程

    一.React-Native MacOS必备环境配置: 1.安装homebrew(这东西可以理解为命令行的app商店) /usr/bin/ruby -e "$(curl -fsSL http ...

  7. backbone新手填坑教程资源

    backbone 入门第二版 http://www.kancloud.cn/kancloud/backbonejs-learning-note/49379 backbone 入门讲解 http://w ...

  8. Vue3+Typescript+Node.js实现微信端公众号H5支付(JSAPI v3)教程--各种填坑

    ----微信支付文档,不得不说,挺乱!(吐槽截止) 功能背景 微信公众号中,点击菜单或者扫码,打开公众号中的H5页面,进行支付. 一.技术栈 前端:Vue:3.0.0,typescript:3.9.3 ...

  9. 即将上线的flume服务器面临的一系列填坑笔记

      即将上线的flume服务器面临的一系列填坑笔记 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   一.flume缺少依赖包导致启动失败! 报错信息如下: 2018-10-17 ...

随机推荐

  1. (大数据工程师学习路径)第三步 Git Community Book----Git介绍

    一.git诞生 同生活中的许多伟大事件一样,Git 诞生于一个极富纷争大举创新的年代.1991年,Linus创建了开源的Linux,并且有着为数众多的参与者.虽然有世界各地的志愿者为Linux编写代码 ...

  2. OCP读书笔记(24) - 题库(ExamD)

    327.You have a database with the following tablespaces: SYSTEM, SYSAUX, UNDO, USERS, TEMP.You want t ...

  3. Ubuntu 中查看内核版本和系统版本的三个命令

    一.查看内核版本:cat /proc/version 二.查看内核版本:uname -a 三.查看系统版本:lsb_release -a 四.查看发行版类型:cat /etc/issue

  4. react学习笔记2--练习Demos

    准备工作 # 0.react核心库 <script src="../build/react.js"></script> # 将JSX 语法转为 JavaSc ...

  5. Stopwatch计时器、秒表 C#

    .NET2.0也提供了这样一个秒表:Stopwatch类,它可以比较精确地测量时间. 速度测试: 软件的性能和可测性是一个复杂的主题.要确保应用程序能够满足用户的期望,就需要在开发周期内考虑它的性能和 ...

  6. 网络资源(9) - TDD视频

    2014_08_26 http://v.youku.com/v_show/id_XMzI4Mzk1MjQ4.html TDD测试驱动开发

  7. LCS 小结

    转载链接:http://www.cnblogs.com/PJQOOO/p/3897745.html 第一步:先计算最长公共子序列的长度. 实现第一步: 设一个C[i][j]: 保存Xi与Yj的LCS的 ...

  8. 基于Linux平台病毒BlackHole病毒的决心

    今天会见了病毒,少量的代码,但在使用小漏洞的函数的,真正的杀伤力相当惊人. 转载请注明出处:http://blog.csdn.net/u010484477谢谢^_^ watermark/2/text/ ...

  9. C#中使用ref 和 out 的一点认识

    ref 通常我们向方法中传递的是值,方法获得的是这些值的一个拷贝,然后使用这些拷贝,当方法运行完毕后,这些拷贝将被丢弃,而原来的值不会受到影响. 这种情况是通常的,当然还有另外一种情况,我们向方法传递 ...

  10. C--运算符,表达式和语句实例

    //第五章 运算符,表达式和语句 #include<stdio.h> //引入头文件 #include<math.h> #define ADJUST 7.64 //定义常量 # ...