webstorm创建nodejs + express + jade 的web 项目

webstorm创建nodejs + express + jade 的web 项目

前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛?

最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新的开始吧。

1、首先下载webstorm,百度一下,有绿色版。

2、下载express模块和jade模块,就不详细说了。然后新建一个项目,选择nodejs express app

然后点击创建即可,一个可以运行的小栗子就诞生了。

接下来就看看express和jade是怎么相爱的吧。

1 var express = require(‘express‘);
2 var app = express();
3 // view engine setup
4 app.set(‘views‘, path.join(__dirname, ‘views‘));
5 app.set(‘view engine‘, ‘jade‘);

第一行代码加载express模块,然后执行,赋值给app变量

第四行代码设置试图的物理路径

第五行代码设置视图引擎为jade

然后看看路由相关的设置

var routes = require(‘./routes/index‘);
app.use(‘/‘, routes);

这两行代码设置了默认首页的路由,即访问地址:localhost:3000/时怎么处理请求

接下来就看 routes文件夹下的index.js是怎么处理这个请求的

1 var express = require(‘express‘);
2 var router = express.Router();
3
4 /* GET home page. */
5 router.get(‘/‘, function(req, res, next) {
6   res.render(‘index‘, { title: ‘Express‘, time:"2015-11-18" });
7 });
8
9 module.exports = router;

很简单的几行代码,主要是看第五行和第六行代码,当路由截取到localhost:3000 get请求后,根据index.jade模板来渲染页面,并传递参数:title 和 time

在视图中,需要注意两个模板:index.jade 和 layout.jade

index.jade代码:

1 extends layout
2
3 block content
4   h1= title
5   p(id=‘pid‘) Welcome to #{title}
6   div(class=‘contentDiv‘) #{time}
7     div asdfasdf

layout.jade代码:

1 doctype html
2 html
3   head
4     title= title
5     link(rel=‘stylesheet‘, href=‘/stylesheets/style.css‘)
6   body
7     block content

layout就相当于是一个母版页,定义一些公共部分的信息,例如头信息,将内容部分空出来,让子页面去自定义,就使用block content的语法来定义自定义区域

index使用

extends layout

来使用母版页,使用关键字后跟空格再跟普通字符串来显示内容

例如:h1=title,向页面写入一个h1标签,内容是index.js传过来的title参数

标签的嵌套使用缩进来体现:

到这一套基本的流程就差不多了。

但是遇到一个小问题,就是router的模块定义是通过

1 module.exports = router;

来返回的,

那么module.exports 和 exports又有什么区别呢?

百度了一下,又自己做了一个实验,做出了如下结论。

module.exports的定义如下:

1 module.exports = exports = {};

1、模块最终返回给调用者的内容,或者说公开的内容是module.exports

2、当直接给module.exports指定值之后,无论你再怎么改exports对象,module.exports都不会变。因为exports还是指向{},而module.exports已经指向新的对象

3、当在页面中不给module.exports指定值,而是只给exports指定属性,例如:exports.name = "张三",

那么最后module.exports也会有name这个属性,即module.exports.name = "张三"

4、如果给module.exports指定属性,module.exports.name = "张三",

同时也给exports指定一个属性,exports.age = 22,

那么最后module.exports也会有age属性,即:module.exports.age = 22

时间: 2024-10-06 11:22:14

webstorm创建nodejs + express + jade 的web 项目的相关文章

nodejs+express+jade安装备忘

安装步骤 1.安装nodejs,比如安装在E:\nodejs. 确保有两个环境变量 用户环境变量:C:\Users\Administrator\AppData\Roaming\npm 系统环境变量:e:\nodejs 2.安装Express,用稳定版3.5.0,网上资料也大多以这个版本为主,不指定版本的话,默认安装最新版 运行cmd -> npm install -g [email protected] 如果是4.X版本,再安装npm install -g express-generator 3

IntelliJ IDEA 12创建Maven管理的Java Web项目(图解)

http://blog.csdn.net/zht666/article/details/8673609 本文主要使用图解介绍了使用IntelliJIDEA 12创建Maven管理的Java Web项目的过程. 本文PDF文档下载地址:http://download.csdn.net/detail/zht666/5141235 1.新建项目,选择Maven Module,输入项目名称,点击Next继续. 注意这里的Module就是项目的意思,等同于MyEclipse中的Project.  接着直接

使用nodejs+express+mongodb开发web的例子

介绍:简单的介绍下nodejs+express+mongodb这三者. nodejs:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,实际是由c++开发是服务器语言. express:是nodejs的一种web框架,node有很多的开源框架,express是一个大神开发的(这尊神已经移驾到go语言的开发去了).express可以让你更方便的操作node(因为直接用nodejs写web比较麻烦,nodejs是事件驱动的,所以有很多异步回调,写多了就看着晕...) mon

java Web项目创建之一(普通java web项目的创建与发布)

1.创建新的web项目 file->new_>Dynamic Web Project(如图) 或file->new->Project->Web->Dynamic Web Project(如图) 输入项目名,默认继续执行下一步 继续下一步 最后单击finish.创建普通web项目

配合m2eclipse创建一个标准的maven web项目

1.maven安装 首先下载maven3. 解压后设置maven的系统变量. 如下图.设置好M2_HOME和PATH的系统变量.输入  Java代码   mvn -version ------------------------------------------------------------------------------------------ 2.安装m2eclipse插件 m2eclipse Core Update Site: http://m2eclipse.sonatype

idea创建第一个普通java web项目

1.新建项目(工作空间) 选择空项目 输入项目名称,点击完成 系统会默认选中Modules,点击上面的小+号创建模块->New Module 新建一个Java EE Web Application模块 输入模块名称 选择Project配置SDK 选择Modules->webDemo->Sources->在WEB-INF目录下新建classes和lib两个目录 (classes用来存放编译后输出的class文件,lib用于存放第三方jar包) 选择Paths,选择Use module

nodejs+express +jade模板引擎 新建项目

先 安装 nodejsiDEAAM 2015/7/16 22:47:25然后安装 npm install expressiDEAAM 2015/7/16 22:47:35然后安装 npm install -g express-generator 然后 express myapp 然后 npm start 使用浏览器访问地址:http://localhost:3000/可以看到:ExpressWelcome to Express

nodejs+express+jade配置

安装步骤 一.首先可跟着这个网址安装http://jingyan.baidu.com/article/91f5db1b2bb6941c7f05e33c.html,路径可由自己定. 二.同时参考http://www.cnblogs.com/pigtail/archive/2013/01/08/2850486.html 三.以上两个链接的参考见下 1.安装nodejs,比如安装在E:\program files\nodejs(这是本人的安装路径). 确保有两个环境变量 用户环境变量:C:\Users

nodeJS+express+Jade写一个局域网聊天应用(node基础)

为了复习一下nodeJS, 而且socketIO这东西听起来就好高端有木有, 而且有人写过了open, 也可以作为自己的参考有木有, 点击下载源代码: express是4.x的版本, 跟以前的配置有些区别, 我才不管呢, 好用就好>﹏<; 按照正常的流程通过 node install 安装项目依赖, 项目的依赖如下; "dependencies": { "body-parser": "~1.8.4", "cookie-par