Express + Ejs实现一个简单的WebServer

Tonny 发布于2019-08-20 16:06 / 2811人阅读

摘要：最近在看，读完官方的起步教程后想着该自己折腾点东西，就先用实现一个超简单的，主要记录下思路。先推荐一个入门级的简单实战项目地址。不过鉴于初学，自身的思路肯定不会是最佳实践，慢慢积累。

最近在看node.js，读完官方的起步教程后想着该自己折腾点东西，就先用express + ejs实现一个超简单的webserver，主要记录下思路。先推荐一个nodejs入门级的简单实战项目地址。很适合入门级上手：https://github.com/nswbmw/N-b...

思路

因为本身没有后端相关语言开发实战经验，所以学习nodejs过程中，更多是思路和理念的学习和理解，语言只是工具。不过鉴于初学，自身的思路肯定不会是最佳实践，慢慢积累。

实现一个简单的webserer肯定需要以下几个东西：

路由：router 对于不同请求路径分发对应的事件处理程序

事件处理程序 routerHandler 分别处理对应的事件

返回模板 views 处理后返回的模板，这里选用的是服务端渲染

思路有了，先安装express和ejs，切换到对应目录下：npm i express ejs
建立文件目录：

MyServer
    |__index.js
    |__routers
    |   |__index.js
    |   |__users.js
    |__views
    |   |__users.ejs
    |__node_modules
    |__package.json

index.js：作为入口文件，也作为路由（因为是一个简单server，可以先这么处理）

routers：存放不同路径对应的事件处理程序

views：存放模板

关于express和ejs的使用网上文档已经够多了，所以只记录用到的。

1.index.js

const path = require("path");

const express = require("express");
const app = express();

const indexRouter = require("./routers/index");
const usersRouter = require("./routers/users");

app .set("views", path.join(__dirname, "views"))
    .set("view engine", "ejs")
    .use("/",indexRouter)
    .use("/users", usersRouter)
    .listen(666, "127.0.0.1");

path: path是nodejs核心模块之一，主要处理与文件路径和目录相关的数据，下面的path.join方法是讲参数中的path片段拼接处理成规范的文件路径，其中的__dirname是指当前文件所在的完整的绝对路径；

express: express基于 Node.js 平台，快速、开放、极简的 web 开发框架。这里用到的就是express最典型的的应用方式，express返回一个function(req,res,next)；next先不讲，app.use简单理解就是针对第一个参数对应路径(如果第一个参数是路径)，就执行对应的function；下文中的app.set方法是设置一些属性，http://www.expressjs.com.cn/4...；这里设置了response引用的view（模板）和对应的view engine（模板引擎）；

indexRouter/usersRouter: 分别引入不同请求对应的处理函数以方便调用；

2.routers/

index.js

const express = require("express");
const router = express.Router();

router.get("/", function(req, res){
    res.send("express is started! this is index!");
})

module.exports = router;

users.js

const express = require("express");
const router = express.Router();

router.get("/:name", function(req, res){
    res.render("users",{
        name: req.params.name,
        id: req.query.id
    });
})

module.exports = router;

这里的思路也很简单，引入express，调用router中间件，
/:name: 这个其实是个占位符，代表的是/前面的字段的值，可以通过requset.params取到，比如如果访问的是127.0.0.1:666/users/laoli，这里通过requset.params.name取到的值就是laoli；
req.query: 其实就是取?后面的参数，比如访问127.0.0.1:666/users/laoli?age=18，这时通过req.query.age取到的值就是18；
res.render: 就是取模板，将后一个ocject中参数值传入模板渲染后返回

3.users.ejs




    
    idnex
    


    <%= name.toUpperCase() %>
    hello, <%= name %>, your ID is <%= id %>

ejs模板文件，ejs很简单好用，文档也很多。http://ejs.co/

以上，完成后在命令行中运行node index.js，然后页面访问127.0.0.1:666/users/laoli?id=18就会得到如下页面：

其中的请求和响应如下：

一个简单的webserver算式跑起来了，当然，在此基础上可以新增一些简单的功能，比如表单提交的处理，ajax异步提交并响应。这个接下来去做尝试。

云服务器 GPU云服务器 js实现的简单特效用c实现简单的shell express框架实现webrtc失败 java实现简单的web服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82719.html

Express 实战（七）：视图与模板：Pug 和 EJS

摘要：而框架中最常用的两个视图引擎是和。实际上这些上下文对象就是会在视图中使用到的变量。其实视图缓存并不是缓存视图实际上它缓存的视图路径。根据默认视图引擎将缺少拓展名的视图文件补充完整。实际上存在由不同组织维护的两个不同版本的。 showImg(https://segmentfault.com/img/remote/1460000010821004);前面的内容大都是关于 Express 框...

wmui 2019-08-20 18:54 评论0 收藏0
Express 实战（三）：Express 基础

摘要：同样的的框架中也有被称为中间件概念。所以，整个工作流有两种可能情形另外，这些中间件函数中部分函数需要对响应做出响应。扩展和在原来基础上对和对象进行了功能扩展。除了对响应对象进行了拓展之 Express 框架的初衷是为了拓展 Node 内置模块的功能提高开发效率。当你深入研究后就会发现，Express 其实是在 Node 内置的 HTTP 模块上构建了一层抽象。理论上所有 Express...

KoreyLee 2019-08-20 18:54 评论0 收藏0
多屏互动——H5 中级进阶

摘要：手机屏幕朝上，水平静止放置，轴重力加速度为，为。当手机水平放置，拨动手机，使其慢慢旋转，重力加速度的数据并没有变化。四元数的基本数学方程为其中表示旋转角度，表示旋转轴。四元数表示一个完整的旋转。前言随着智能硬件的普及，手机，平板，PC甚至路边的电子广告牌，现代浏览器已经无处不在。在浏览器里编织出我们自己的一片天地已经轻车熟路，但是这还不够，H5赋予了浏览器太多的新特性，等待我们去使...

wdzgege 2019-08-21 14:08 评论0 收藏0
60分钟学会使用Node.js+Express+Ejs+mongoDB

摘要：安装完毕后，打开终端，在终端分别输入如下命令，检测是否安装成功。号会告诉安装最新版本。它会为每一条记录创建一个唯一的值。注意我们不需要提前创建这个，它会在第一次使用的时候自动创建。我们可以使用，这是我最常用的方式。 60分钟学会使用Node.js+Express+Ejs+mongoDB 本文出自从零到壹全栈部落 (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(1...

BicycleWarrior 2019-08-21 11:47 评论0 收藏0