最近在看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
<!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异步提交并响应。这个接下来去做尝试。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。