nodejs 图解express+supervisor+ejs的用法(推荐)

网络编程 2024/9/1 佚名

3 2 1

通过node js自带的http模块搭建了一个简易的服务器，实际在开发中，一般用的是express框架，本文我们就来讲讲项目开发中必备不可少的几样东西：

"color: #ff0000">一、首先，新建一个项目文件夹( ghostwu )，在命令行下切换到该目录，用npm init --yes 初始化package.json文件

安装express: npm install express --save

二、新建index.js文件，输入以下代码

var express = require('express');
var app = express();

app.get('/', function(req, res) {
 res.send( 'welcome to study express -by ghostwu' );
}).listen( 8080 );

第一行，加载express模块

第二行，开启web服务器

第三行，web服务器监听8080端口，当通过浏览器输入( http://localhost:8080 ) 就会看到这段信息：welcome to study express -by ghostwu

三、如果你写过node服务器，你就会发现一个问题，每次修改之后，都要重启服务器，一般来说，我们修改文件之后，保存，刷新网页就能看到修改，需要达到这样的效果，我们就要安装supervisor，这个相当于webpack的热加载，我们采用全局安装： npm install -g supervisor，安装完成之后，我们以后就这样运行服务器文件了： supervisor --harmony index

之后修改index.js文件，只要保存，刷新网页就能马上看到修改之后的结果了

四、增加路由处理，修改index.js文件，把代码修改成如下：

var express = require('express');
var app = express();
app.get('/', function(req, res) {
 res.send('hello, express');
});
app.get('/user/:name', function(req, res) {
 res.send('hello, ' + req.params.name);
});
app.get('/user/:name/age/:age', function(req, res) {
 res.send('info: user:' + req.params.name + ', age:' + req.params.age );
});
app.listen( 8080 );

http://localhost:8080/ ----> 显示hello, express

http://localhost:8080/user/ghostwu ----->显示hello, ghostwu

http://localhost:8080/user/ghostwu/age/22 ---->显示info: user:ghostwu, age:22

:name占位符：用来接收user后面的值 :age占位符用来接收age后面的值， req.params后面获取的键名就是这个占位符

如果你学过php,那么就相当于下面这种get接收参数方式

xxx.php"color: #ff0000">五、一般在项目中，路由是需要单独分离出来的，便于维护和扩展

新建routers，然后在下面创建index.js和info.js文件

index.js代码：

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
 res.send('hello, express');
});

module.exports = router;

info.js代码:

var express = require('express');
var router = express.Router();

router.get('/:name', function(req, res) {
 res.send('hello, ' + req.params.name);
});
router.get('/:name/age/:age2', function(req, res) {
 res.send('info: user:' + req.params.name + ', age:' + req.params.age2 );
});

module.exports = router;

ghostwu这个目录下面的index.js文件代码为:

var express = require('express');
var app = express();
var indexRouter = require('./routers/index');
var infoRouter = require('./routers/info');

app.use('/', indexRouter);
app.use('/user', infoRouter);

app.listen(8080);

通过以上的代码，就完成了路由的分离，把 / 和 /user分别放在index.js，info.js文件，然后导出router对象，通过app.use找到对应的路由

六、ejs模板的应用

安装: npm install ejs --save

index.js文件：

var path = require('path');
var express = require('express');
var app = express();
var indexRouter = require('./routers/index');
var infoRouter = require('./routers/info');

//设置模板目录: views
app.set('views', path.join(__dirname, 'views'));

//设置模板引擎: ejs
app.set('view engine', 'ejs');
app.use('/', indexRouter);
app.use('/user', infoRouter);
app.listen(8080);

info.js文件

var express = require('express');
var router = express.Router();

router.get('/:name', function(req, res) {
 res.render( 'info', {
 name : 'ghostwu',
 age : 22,
 sex : 'man'
 });
});
module.exports = router;

第5行res.render渲染模板文件 info.ejs，第二个参数就是数据

info.ejs文件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 </head>
 <body>
  用户信息:
  <hr>
  <ul>
   <li>用户名: <%=name%></li>
   <li>年龄: <%=age%></li>
   <li>性别: <%=sex%></li>
  </ul>
 </body>
</html>

<%=变量名%>读出数据

<% code %>：运行 JavaScript 代码，不输出
<%= code %>：转义html标签
<%- code %>：不转义html标签

其他ejs用法，结合手册查下

以上这篇nodejs 图解express+supervisor+ejs的用法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

nodejs,express,ejs

标签：

nodejs,express,ejs

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“nodejs 图解express+supervisor+ejs的用法(推荐)”

nodejs 图解express+supervisor+ejs的用法(推荐)

暂无“nodejs 图解express+supervisor+ejs的用法(推荐)”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

nodejs 图解express+supervisor+ejs的用法(推荐)

nodejs,express,ejs

React如何将组件渲染到指定DOM节点详解

javascript获取指定区间范围随机数的方法

评论“nodejs 图解express+supervisor+ejs的用法(推荐)”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接