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

  • 服务器( express )
  • 路由( express.Router )
  • 模板引擎( ejs )
  • 当然再加上数据库，就可以完成一个mvc的web应用了，数据库的用法，后期我会写一个项目

一、首先，新建一个项目文件夹( 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?user=ghostwu&age=22  -----> $_REQUEST['user'] $_REQUEST['age']

五、一般在项目中，路由是需要单独分离出来的，便于维护和扩展

新建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>

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

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

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

[js高手之路]node js系列课程-图解express+supervisor+ejs用法的更多相关文章

  1. [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

    该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路] ...

  2. [js高手之路]Node.js+jade抓取博客所有文章生成静态html文件

    这个周末,恶补了一下jade模板引擎,就为生成静态html文件,这篇文章需要知道jade以及看过我的上篇文章,我先给出他们的参考链接: [js高手之路]Node.js模板引擎教程-jade速学与实战1 ...

  3. [js高手之路]Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件

    接着这篇文章[js高手之路]Node.js+jade抓取博客所有文章生成静态html文件继续,在这篇文章中实现了采集与静态文件的生成,在实际的采集项目中, 应该是先入库再选择性的生成静态文件.那么我选 ...

  4. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...

  5. [js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist

    promise主要是用来解决异步回调问题,其实还有好几种比promise更好的方案,后面再说,这节,我们先用promise来改造下,我以前写的一篇文章[js高手之路]javascript腾讯面试题学习 ...

  6. [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取博客所有的文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的h ...

  7. [js高手之路]node js系列课程-创建简易web服务器与文件读写

    web服务器至少有以下几个特点: 1.24小时不停止的工作,也就是说这个进程要常驻在内存中 2.24小时在某一端口监听,如: http://localhost:8080, www服务器默认端口80 3 ...

  8. [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

    一.转义与非转义 jade模板文件代码: doctype html html head meta(charset='utf-8') title jade学习-by ghostwu body h3 转义 ...

  9. [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

    一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的 ...

随机推荐

  1. margin用的时候常见问题

    margin1.     在同一个方向布局        同时设置左右margin的时候间距是两者之和        同时设置上下margin的时候间距是较大的那个,大者为尊2.    拖拽父级    ...

  2. Android开发之监听器

    一直都想进行安卓开发,最近上手了Android.刚开始学习一些基本控件,学习Android就如同进入一个新的世界,印象最深的是这个世界的规则. 最近学习了监听器,对于这个我的一点理解是监听键盘活动 B ...

  3. CentOS安装配置MySql数据库

    CentOS版本7.2,MySql版本5.7 1.下载MySql安装源     wget https://dev.mysql.com/get/mysql57-community-release-el7 ...

  4. 云计算——Google App Eng…

    云计算--Google App Engine(一) 编者:王尚 2014.04.12 20:20 介绍:Google App Engine提供一套开发组件让用户轻松的在本地构建和调试网络应用,之后能让 ...

  5. 如何在Linux上使用VIM进行.Net Core开发

    对于在Linux上开发.Net Core的程序员来说, 似乎都缺少一个好的IDE. Windows上有Visual Studio, Mac上有Visual Studio for Mac, 难道Linu ...

  6. nopCommerce 3.9 大波浪系列 之 外部授权登录插件的开发实现

    一.简介 nop支持第三方外部授权登录的扩展,本篇通过编写微信公众平台登录插件进一步了解nop授权登录的开发过程. 微信公众平台.微信开放平台使用场景不一样,前者通过微信客户端进行开发如公众号,后者基 ...

  7. java.lang.NoSuchMethodError:android.content.Context.getDrawable

    今天在开发的时候,这个代码在源码中是可以看到的,但是在android 4.3手机上面会报错,具体错误信息和代码如下: setBackgroundDrawable(context.getDrawable ...

  8. C#设计模式(2)-简单工厂模式

    引言 上一遍中介绍了设计模式中的单例模式-C#设计模式(1)-单例模式,本篇将介绍简单工厂模式,也是比较容易理解的一种模式: 简单工厂模式简介 什么是简单工厂模式? 定义一个工厂类,它可以根据参数的不 ...

  9. AngularJS优缺点、使用场景

    AngularJS 优缺点 优点: AngularJS模板功能强大丰富,自带了极其丰富的angular指令. AngularJS是完全可扩展的,与其他库的兼容效果很好,每一个功能可以修改或更换,以满足 ...

  10. shell 编程之 if...else case...esac

    shell的条件判断语句有三种 if...fi  语句 if...else...fi  语句 if...elif...fi  语句 例子: a=10; b=20; if [ $a -gt %b ] t ...