nodejs网站模板（nodejs模版引擎）

本文目录一览：

• 1、如何设计一个基于Node.js和Express的网站架构
• 2、关于nodejs中koa所用的html模板（也就是django的html模板）中
• 3、nodejs：用ejs模板和gulp实现前端组件化

如何设计一个基于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中koa所用的html模板（也就是django的html模板）中

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

make jade.min.js

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

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网站模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于nodejs模版引擎、nodejs网站模板的信息别忘了在易优之家进行查找喔。