nodejs网站模板（nodejs做网页）

本文目录一览：

• 1、nodejs内置模块有哪些
• 2、关于nodejs中koa所用的html模板（也就是django的html模板）中
• 3、如何设计一个基于Node.js和Express的网站架构
• 4、nodejs：用ejs模板和gulp实现前端组件化
• 5、目前nodejs都有什么框架呢？哪个最好
• 6、NodeJS项目基础结构简单介绍

nodejs内置模块有哪些

一、Express框架

前面的章节已经介绍过了，可以使用npm来安装node.js模块。具体操作请参照以前写的nodejs概论。

Express是一个nodejs的web开源框架，用于快速的搭建web项目。其主要集成了web的http服务器的创建、静态文本管理、服务器URL地址请求处理、get和post请求处理分发、session处理等功能。

使用方法，在cmd中打开你所想创建web项目的路径。然后输入

Express appname

即可创建一个名为appname的web项目。控制台打印结果

在cmd中进入appname文件夹输入

node appname.js

返回结果如下图，表示安装成功！

在项目开发中经常会出现这样的问题

此错误表示没有安装相关模块，解决办法是在cmd上打开项目文件夹，输入

npm install express

安装成功后会在本文件路径下生成一个node_modules，里面包含了Express框架代码。

其他模块也可用类似的方法进行安装，安装后的路径同样是在node_modules下。

二、jade模块

jade是一款高性能、简洁易懂的模板引擎。可通过jade来编写html文件。

jade类似一个用于快速编写html的语言，其编写后的文件后缀为.jade。

以下为文件的内容

在cmd中输入，压缩的过的可以通过加-P来不压缩，如果每次更改模版都要打命令行一次很麻烦是不是，我们可以通过加上jade -P -w jade.jade  加上一个-w来开启监视模式，每次更改模版,html文件都会自动编译咯

生成后的html文件如下：

在jada文件中是可以使用for循环和if判断语句的，可以让你体会类似JSP的%%和php的php/php在网页上输出数据的快感。

三、forever模块

nodejs作为http服务器，需要确保服务顺利进行，要注意一下两点：

1.后台服务运行，监控运行日志，以及http运行日志；

2.确保项目的正常安全运行，Node.js的启动命令node，很大程度无法满足运行需求；

Node.js的forever模块在第二点就可以起到很大的作用，同时其拥有监控文件更改、自动重启等功能。

forever模块的使用方法有两种：1.在命令行中使用

forever -l forever.log -o out.log -e err.log app.js

-l forever.log -o out.log -e err.log分别指定了forever的运行日志，脚本流水日志，脚本运行错误日志，启动后将在本文件夹下产生out.log、err.log文件。

2.在编码中require forever模块使用。

四、Socket.IO模块

Socket.IO模块主要功能是将WebSocket协议应用到所有浏览器。主要用于实时的长连接多求情项目中。

例如：在线联网游戏，实时聊天、实时股票查看、二维码扫描登录等。

安装方法仍然是在cmd在中输入npm install socket.io

如何使用Socket.IO来创建一个项目。

需要分别实现服务端和客户端的逻辑：

先创建一个服务端的node.js脚本index_server.js

var app = require('http').createServer(handler)//创建服务器app

, io = require('socket.io').listen(app)//引用socket.io模块监听app

, fs = require('fs')//引用文件处理模块

app.listen(80);//指定app监听的端口，第二个参数127.0.0.1可省略

function handler (req, res) {

fs.readFile(__dirname + '/index.html',   function (err, data) {     if (err) {

res.writeHead(500);       return res.end('Error loading index.html');

}

res.writeHead(200);

res.end(data);

});

}

io.sockets.on('connection', function (socket) {

socket.emit('news', { hello: 'world' });

socket.on('my other event', function (data) {

console.log(data);

});

});

其中，socket.emit()为Socket发送消息的函数，第一个参数表示发送消息的key值，第二个参数为发送消息的内容，也就是发送的数据。

Socket。on()为Socket接收消息的函数，第一个参数为接收消息的可以值，第二个参数为回调函数，其中回调函数携带的参数为接收消息所发送的数据。

接下来web前端如何使用JavaScrit 来连接Socket服务器。

新建一个index_client.html

script type="text/javascript" src="socket.js"/script

script type="text/javascript"    var socket = io.connect('');//创建本地sock连接

socket.on('news',function (data) {//Socket接收news消息时执行回调函数        console.log(data);

socket.emit('my other event',{my:'data'});

});/script

script type="text/javascript" src="socket.js"/script加载已经安装好的Socket.io的本地JavaScrit文件。

var socket = io.connect('');因为端口为80，所有这里可以不端口号

socket.on('news',function (data)｛｝//客户端接收news消息成功后，发送my other event消息到服务端，发送的消息内容为json对象{my:'data'}

接下来只需要运行服务端的index_server.js文件来启动socket服务

效果：在浏览器输入按F12调出浏览器的控制台console即可看见打印出了一个object对象。

执行完毕后可能会报错：catnot find module socket.io，说明你的socket.IO没有安装，或已经安装并配置为全局，但你的安装路径并没有配置到在path中，所有无法引用。

你可以选择配置path，或者安装到项目内。这里建议安装到你的项目目录下，而不是简单粗暴的配置为全局。先卸载npm uninstall socket.io 进入指定目录后安装node index_server.js

socket.io详细请参阅    

五、request模块

request模块为开发者提供了一种简单访问HTTP请求的方法。request还支持HTTPS的访问方法。

安装：

npm install requset

request模块基本上覆盖了所有的HTTP请求方式如GET，POST，HEAD，DEL等。但其最基本的两个方法是request.get()和request.post().

get和post的区别

get：

1.使用get向服务器发出和接收的请求会附在url之后。类似：？id=1221name=5555这个url中传递了两个参数，一个为id，一个为name。

2.get请求不能超过1024个字节。

post没有限制，也不会附在url上。

接下来做一个简单的实例

get实例：

首先新建一个服务器app_get.js

var http= require("http");

http.createServer(function(req,res){

res.writeHead(200,{'content-Type':'text/plain'});

res.end('Hello world\n'+req.method);

}).listen(1337,"127.0.0.1");

再建一个发送求情的request_get.js文件

var request=require('request');

request.get("",function(error,response,result){

console.log(result);

});

在CMD中运行app_get.js，运行成功后，再打开一个cmd（之前的cmd不要关闭），执行request_get.js文件。

执行后的结果如下

hello world

GET

可以看出，通过request.get方法访问

返回的结果就是res.end（）的参数

post实例：

和上面一样，先新建服务器app_post.js

var http= require("http"),

querystring=require('querystring');

http.createServer(function(req,res){    var postData="";    //开始异步接收客户端post的数据

req.addListener("data",function (postDataChunk) {

postData += postDataChunk;

});    //异步post数据接收完毕后执行匿名回调函数

req.addListener("end",function(){        var postStr=JSON.stringify(querystring.parse(postData));

res.writeHead(200,{'content-Type':'text/plain'});

res.end(postStr+'\n'+req.method);

});

}).listen(1400,"127.0.0.1");

然后再新建一个request_post.js

var request=require("request");

request.post('',{form:{'name':'ermu','book':'node.js'}},function (error,response,result) {

console.log(result);

})

像上面一样在cmd中执行后显示的结果如下：

D:\nodejs\src\requestnode request_post.js

{"name":"ermu","book":"node.js"}

POST

request post提交了一个json对象{"name":"ermu","book":"node.js"}而服务器接通过获取该POST数据，然后返回客户端，同时将http请求方式也响应到客户端。

request post参数可以有两种传递方式。

其中，第一种是将url和form表单的数据作为json参数在request post传递。举例如下：

request.post('url':'',form:{'name':'ermu','book':'node.js'}},function (error,response,result) {

console.log(result);

})

另一种是将url和form作为两个参数，上面的实例就是使用这种方法。

六、  Formidable模块

该模块的目的是为了解决文件上传。

在原生的node.js模块中，提供了获取post数据的方法，但是并没有直接获取上传文件。

关于nodejs中koa所用的html模板（也就是django的html模板）中

如果你已经安装了 uglifyjs (npm install uglify-js)，你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。

make jade.min.js

默认情况下，为了方便调试Jade会把模板组织成带有形如 __.lineno = 3 的行号的形式。 在浏览器里使用的时候，你可以通过传递一个选项 { compileDebug: false } 来去掉这个。

如何设计一个基于Node.js和Express的网站架构

推荐使用Webstorm打开项目。打开项目后，代码结构如下图所示：

在主体结构中从上到下介绍。 app 文件夹包含了所有后端代码； build 文件夹中包含了最新数据库备份； config 包含有网站整体的配置； logs 文件夹包含网站后端记录的日志文件； node_modules 是包含所有的 node.js 依赖包（源代码中初始没有此文件夹，运行 npm install 命令后所有加载的依赖包放置在此文件夹中）； public文件夹包含了所有的前端代码，包括JavaScript、less、图片、Webfont等； .bowerrc中定义了 bower 管理前端库的下载地址； bower.json 则配置了项目需要的前端库；.jshintre-client 和 .jshintrc-server 分别为前后端JavaScript代码规范检查规则；.travis.yml 为[travis]（travis-ci.org/）自动编译配置； app.js 为node.js启动脚本文件； build.sh 为单独编写的自动发布bash命令；gruntfile.js为 grunt 配置文件；newrelic.js为 newrelic 的配置文件，用于监控网站性能； package.json 包含了所有node.js依赖包配置。

项目后端结构

项目后端代码架构如下图所示：

主要分为两大部分： app 和 config 。 app 里面按照职责不同来分类，每个脚本文件对应于不同的模块； api 文件夹包含了所有api对应的业务逻辑代码， helper 放置一些公用方法，如邮件发送、日志记录、数据库连接等等； templates 放置的是静态邮件模板； views 是后端页面模板，使用了 handlebar 模板引擎，其中 http 中放置系统错误显示页面， layouts 放置模板页； routes 是 express 对应的路由配置，所有的页面和API的路由配置都在这个文件中。 config 文件夹中为系统配置，按照不同环境分为开发和现场两个环境配置， all.js 放置共通配置， development.js 放置开发环境对应配置而 production.js 放置线上环境配置。配置内容包括邮件发送、数据库连接及一些第三方API所需的key等等。

项目前端结构

项目前端代码结构如下所示：

前端代码全部放置于 public 文件夹下。 data 目录包含一些静态json格式数据，后期可能会考虑放到数据库中。 helper 中是浏览器下载引导页面； images 包含了所有项目中用到的图片，我们尽量使用第三方的图片服务器保存图片，一些小图标也尽量使用webfont。 JavaScripts 文件夹包含所有JavaScript文件，其中 app 子目录放置业务代码，业务代码都是按照业务不同封装成了不同的 angularjs controller； debug 子目录放置调试用代码，而 libs 方式前端JavaScript库，项目中使用得JavaScript库有angularjs 、 jQuery 及一些插件； clients.js 是所有ajax请求函数； erealm.js 是angularjs的主模块； language.js 包含了所有多语言配置，目前支持中英文。stylesheets 包含了所有的css样式及webfont，除了第三方库之外，自定义的样式全部使用了 less 。作为一种惯例，项目中添加了 humans.txt 文件，表明项目的作者信息。有关humans.txt，可以参考官方网站 humans.txt 。

自动化构建工具

项目自动化构建使用 grunt 。grunt的使用涉及开发、调试、发布阶段。开发阶段使用了图片压缩和前端代码格式美化，使用的工具是 imagemin 和 jsbeautifier ，运行grunt prepare 命令。调试阶段使用了代码规范检查、less编译、自动添加浏览器前缀、自动加载运行nodejs并打开浏览器、实时监控代码变化并刷新页面等。开发中，使用 grunt 命令即可，为默认grunt命令。发布阶段包含了JavaScript及css合并压缩，并在文件路径上添加哈希值来避免浏览器缓存问题，同时删除开发环境中使用的代码，使用 grunt build 命令即可把代码切换为发布环境。

具体的使用grunt方法及相关工具的介绍，后期会有专门的技术文章讲解，这里不会详细设计技术细节。

后期持续的改进点

项目完成的比较仓促，但是我们尽量保持代码的整洁和可维护性，一些编码方式也借鉴当前流行的最佳实践。但理想是美好的，现实总是不会做到那么完美，需要不断的完善。目前存在的问题是后端代码结构不够清晰、整体代码中无用代码还没有来得及移除。框架上期望把 jQuery 去掉，只使用 Angularjs ，目前只做到了尽量不用jQuery 中的方法。小图标的使用上 Bootstrap 和 Font Awesome 重复，后期会逐步删除 Font Awesome 而只使用 Bootstrap 中带的小图标。目前，最大的问题是项目没有完整的自动化测试，这个后期会逐步添加。

总结

以上是这个开源项目的整体技术结构介绍。在这个项目中，我们会持续使用最流行的Web技术，希望得到大家的持续关注，如果有开发者能一块贡献一些代码，我们将会非常高兴。我们已经在github.io上构建了一个技术平台来发布Web技术文章，网址是blog.erealm.cn。博客网址也同样开源，使用了 Jekyll 构建。 Jekyll 非常强大，最大的特点是使用markdown格式来发布文章。博客的代码在这里： github 。

我们做这个开源的项目的目的有两个，其一是通过这个项目来展示我们做Web项目的实力，及培养团队技术水平。其二是借助这个项目，能和同行们有个技术上的互动和交流。如果我们的项目能让一些新手们学到一些做Web项目的经验，我们就很知足了。技术是不断革新的，而国内Web技术向来是落后于国外好几年，这个是不争的事实。我们erealm团队乐意为国内Web贡献自己的力量，也欢迎国内同行们和我们交流Web开发经验。

nodejs：用ejs模板和gulp实现前端组件化

最近在用nodejs将公司商城的底层重写。基于nodejs的强大，我从原本的只写前端变成了写全栈。

框架采用express,模板用ejs,前端用amazeui. 做完三个页面后，设计突然说要改UI设计，我勒个去，郁闷地一个个页面重新调整。下班之后反思一下，觉得花了太多时间在重复劳动上，是时候涉猎一下前端工程化的知识了。

用百度在互联网畅游了一番，总结了一下前端工程化的几个关键要素：编码规范化，结构模块化，流程自动化。本文所述的方法属于模块化，但只是简单地把dom，css,js拆分，以便更好地管理，而并非像vue框架那样的组件化，但这种方式可能更易于理解，可以作为过渡。

这是原来的目录结构

其中public目录里存放的是静态资源，按照传统的做法，css文件夹种存放less文件和css文件，img文件夹中存放图片资源，js中存放各页面（views目录中对应的页面）的js文件。

当页面越来越多，会遇到一些重复的部分。像图中的侧边菜单，顶部搜索框，底部菜单，在几个页面都有。如果每个页面拷贝一份样式，js，dom,当需求方要更改样式或者增加功能的时候，徒增工作量。

在一篇文章的启发下（ 前端开发工程化探讨 ），我将目录结构改成如下：

为了标准化，每个组件里的文件命名都相同。以侧边工具栏为例，dom.ejs是一个模板文件：

如果不熟悉ejs模板的语法，可以百度一下。另外，此模板还支持嵌套，并传入参数。

例如，下面是一个列表容器的dom结构，配合js可以实现上拉加载功能，但列表项的样式可能不一样，你可以在使用时再根据传入的templateName参数决定用哪个模板，非常灵活。

在使用模板时，这样嵌入页面。

注意，应使用%-include()%,而非%=include()%。%-%表示内容原样输出，不进行运算。而%=%会生成运算后的内容。

然后，再来考虑js和css文件应当怎么处理。如果在页面中逐个引入组件的js和css文件，维护起来会非常不方便。所以我考虑将某个页面涉及到的组件，还有页面本身的js和css打包成一个。这样做有个缺点，每个页面的js和css文件会有重复的内容。如果用seajs或requirejs等模块加载，可以解决重复的问题，但也可能增加项目的复杂度。考虑到打包后的文件只有10K大小，还是暂时使用打包的方法。有兴趣的朋友也可以将js模块化并测试一下性能。

打包涉及到gulp的应用，有许多文章谈论到，而我是通过开源项目学习的。

首先我需要写一个page-config.json文件，告诉gulp我要打包哪些资源：

将文件放在模板目录的根目录下面，与src,dist同级。src存放原文件，dist存放生成后的文件。

再写一个gulpfile.js,用于自动构建。

下面是gulp文件的写法：

在使用时，要在命令行安装gulp，切换到gulpfile.js所在的目录，运行gulp watch，这样，每次在css和js更改时，会自动重新打包。当然，为了不重复操作，你可以写一个脚本文件。

目前nodejs都有什么框架呢？哪个最好

对于开发者来最好的15个Node.JS框架：

Kiss

Kiss.js使用Django风格的模板。通过项目你可以看到，客户端的coffee scripts脚本在刚开始时会被加载。样式使用Stylus。

Sails

Sails 很容易]创建自定义的，企业级的Node.js应用。它被设计成你熟悉的类似Ruby on Rails的MVC框架，但是又可以满足现代应用的需要： 可扩展的数据驱动接口，面向服务的架构。它特别擅长设计图表，时时表单，或多人游戏，你可以在任何项目中使用。

Total

Total.js是另外一旧助你创建Node.js，Web页面/应用的好框架，同样支持MVC架构。它是一旧使用HTML,JavaScript和CSS创建的现代框架。

Partial

Partial.js又一个 Node.JS框架，开发者使用HTML,CSS和JavaScript可以创建大型的Web站点和应用。功能和架构类似于total.js

Flatiron

Flatiron.js同样也是一旧现代的下一代的web框架，帮助开发者创建惊艳的web应用和功能。

Socket Stream

Socket Stream是被来设计时时响应的单页面程序，基于快速的棋模块化r 特性。

Socket.io

Socket.io是基于node.js的实时框架，支持HTML的WebSocket和跨浏览器的向后监察。

Dozer

Dozer是一款极快r 支持前端应用的系统。它不是一个框架，不是一个工具包。Dozer的设计原则是为前端提供RESTful API的接口支持。

Coke

COKE是一个轻量级的MVC框架。它非常简单，模块化的，非常快。

Express.io

Express.io是一组实时的基于node.js的web开发框架，支持MVC构架创建Web应用。

Opa

Ops是g 个JavaScript的框架－快速的加密的Web开发。

Spine

现代的MVC模式，完全支持现代JavaScrip应用。

Mean

MEAN是一款优化后的全栈javascript node.js框架，将简化和加速你的web应用开发。

Sleek

一步就叫座创建快速的，灵活的，友好的web程序。

Stapes

Stapes.js假设你的流程和风格是未知r 。

kraken

Kraken是一个安全的可扩展的框架，可以帮助你更好组织你的架构。他们的模块都可以独立使用。

Derby

Web webjs将你的服务器端脚本变得更简单，更稳定，可读性晚好。

Geddy.

WINTERSMITH

基于node.js的快速的极小的，多平台支持的站点生成器。

NodeJS项目基础结构简单介绍

按照常规，去执行npm start

或者在Terminal中手动输入命令，结果如下：

可以看到是执行了test/package.json文件中的 start 命令，初始packagejson.json文件内容如下：

执行 start ，对应的命令为 node ./bin/www 并在命令行执行。现在项目已经启动成功了，可以打开浏览器输入 localhost:3000 查看一下，但是本次侧重点在于项目启动时候发生的完整的过程。所以……

那么我们需要看一下 ./bin/www 文件

通过 require() 来引入本地安装的包，这里加载了三个包 app、debug 、http ，主要关注一下app.js

可以看到app加载的为该项目基础组件，核心为 var app = express(); 看一下express.js

将app用到的中间件等暴露出来，所以 app = express() 实际上就是加载应用基础组件，生成项目的根节点（当然这个节点是复合的）。所以在app.js中，进行的是加载应用基础组件并进行应用设置初始化（包含了视图目录设置、页面模板引擎设置、中间件的设置、静态资源目录设置以及错误捕捉相关内容）。

继续回到 ，同样将debug配置、http相关组件进行加载。继而是默认端口号的设定。通过http.createServer(app)，创建应用服务相关信息，并对端口进行监听。

浏览器输入 localhost:3000

控制台显示：

说明在以 GET 方式请求URI为 "/" 的资源，并以 GET 方式请求 /stylesheets/style.css 资源，这个发生在app.js中我们设定的资源请求。

我们来看下 ./routes/index 文件

即定义网站主页的路由

使用 express.Router 类创建模块化、可挂载的路由句柄（简称：路由模块）。Router 实例是一个完整的中间件和路由系统。最终，在应用中加载路由模块app.use('/', indexRouter);

通过 res.render 对视图进行渲染，上述为对index.ejs的渲染。 ps：在app.js中已经设定了views的所在目录 。语法： res.render（view [，locals] [，callback]）

示例：

区别：路由句柄

为请求处理提供多个回调函数，其行为类似 中间件 。唯一的区别是这些回调函数有可能调用 next('route') 方法跳至下一个同路由的回调函数而略过其他路由回调函数。路由句柄有多种形式，可以是一个函数、一个函数数组，或者是两者混合。

使用一个回调函数处理路由：

使用多个回调函数处理路由（记得指定 next 对象）：

使用回调函数数组处理路由：

混合使用函数和函数数组处理路由：

区别：路由方法

一个路由示例：

路由方法源于 HTTP 请求方法，和 express 实例相关联。

获取express的一个实例 app ，通过路由方法（和HTTP请求对应），GET方式请求 "/"。详细的路由方法参考链接： 路由方法

关于nodejs网站模板和nodejs做网页的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注云尚网络www.ysfad.net。