node.js express搭建简单的web服务器

说明:开发环境使用的是Webstrom

1、Express 简介

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。

Express 框架核心特性:

  • 可以设置中间件来响应 HTTP 请求。

  • 定义了路由表用于执行不同的 HTTP 请求动作。

  • 可以通过向模板传递参数来动态渲染 HTML 页面。

2、Express实例

新建实例项目

新建一个空项目:


创建一个空项目

创建项目配置文件package.json,配置如下:

{
  "name": "ExpressTest",
  "version": "1.0.0",
  "main": "./app.js",
  "dependencies": {
    "express": "*",
    "morgan":"*"
  }
}

main:程序的路口
dependencies:依赖的库,*表示最新版本

直接在webstrom终端运行cnpm install ,安装项目所需要的库到本地,如下图


安装插件

编写express处理请求相关代码:

var express = require('express');
var morgan = require('morgan'); // 打印日志的中间件


var app = express();

// 中间件
app.use(express.static('./public'));
app.use(morgan());

app.get('/', function (req,res){
    res.end('Express Get');
});
/******Router方式路由********/
var Router = express.Router();

Router.get('/add', function (req, res) {
    res.end('Router /add');
});

Router.get('/list', function (req, res) {
    res.end('Router /list');
});
// post为基础路径
// 适用于同一个路由下的多个子路由
app.use('/post', Router);

// 适合定义RESTful API
app.route('/article')
    .get(function (req, res) {
        res.end('route /articl get\n');
    })
    .post(function (req, res) {
        res.end('route /articl post');
    });

// http:127.0.0.1:18000/news/123
// 路由参数
/**
 * next:函数下一步要执行的参数
 * newsId:路由参数
 * */
app.param('newsId', function (req, res, next, newsId) {
    console.log('param newsid:'+newsId);
    req.newsId = newsId;
    next();
});

app.get('/news/:newsId', function (req, res) {
    console.log('/news/:newsId:');
    res.end('newsId:'+req.newsId+'\n');
});

app.listen(18000, function afterListen() {
    console.log('Http runing ong http://127.0.0.1:18000');
});

这段代码中包含了3部分的内容:

  • 静态文件服务
    静态文件的范围:
    - 网页
    - 纯文本
    - 图片
    - 前端JavaScript
    - css样式表文件
    - 媒体文件
    - 字体文件


    静态文件服务中间件.png
  • 路由
    路由: 将不同的请求,分配给相应的处理函数
    区分:路径、请求方法
    程序中有3中方式的路由
    a) path方式
    b) Router方式(适用于同一个路由下的多个子路由)
    c) route方式(适合定义RESTful API)

  • 中间件

3 运行项目并测试

添加项目的配置参数:


添加配置参数

点击运行即可


项目运行.png

现在web服务器已经在本地运行了,来测试一下刚刚编写的代码吧

  • 测试静态文件服务功能
  • 测试各种路由


    测试

基本功能以实现,代码有点乱,后续还需封装!

End

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,969评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,422评论 25 708
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,960评论 2 59
  • 不知道从什么时候开始,大陆会讲故事,讲好故事的导演,拿一双手也数的过来的了。 畸形的观影文化和票房结论,让编剧...
    苏文若纨素阅读 493评论 0 0
  • 卢克先生阅读 187评论 0 0