Express + Ejs实现一个简单的WebServer

时间 2019-11-09

标签 express ejs 实现一个简单 webserver 繁體版

原文原文链接

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

思路

由于自己没有后端相关语言开发实战经验，因此学习nodejs过程当中，更可能是思路和理念的学习和理解，语言只是工具。不过鉴于初学，自身的思路确定不会是最佳实践，慢慢积累。html

实现一个简单的webserer确定须要如下几个东西：node

路由：router 对于不一样请求路径分发对应的事件处理程序git
事件处理程序 routerHandler 分别处理对应的事件github
返回模板 views 处理后返回的模板，这里选用的是服务端渲染web

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

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

index.js：做为入口文件，也做为路由（由于是一个简单server，能够先这么处理）express
routers：存放不一样路径对应的事件处理程序npm
views：存放模板json

关于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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>idnex</title>
    <style type="text/css">
        body{
            background: #fafff3;
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <h1><%= name.toUpperCase() %></h1>
    <p>hello, <%= name %>, your ID is <%= id %></p>
</body>
</html>

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

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

其中的请求和响应以下：
一个简单的webserver算式跑起来了，固然，在此基础上能够新增一些简单的功能，好比表单提交的处理，ajax异步提交并响应。这个接下来去作尝试。