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

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

推荐使用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开发经验。

PCI Express交换架构是PCIe Switch技术。

PCI Express改变原来的PCI共享性总线的局限性,推出了PCI Express交换架构,明灶并有相应的硬件PCIe Switch芯片和软件支持。PCIe Switch可以实现CPU和外设之间,外设和外设之间,多主机系统中CPU和CPU之间数据交换。PCI Express交换架构形象的说类似于以察槐纳太网络中的交换机的作用,是板内或者板败没间的高速交换网络。

希望对你有所帮助。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/tougao/12283114.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存