Node.js + Express + handlebars搭建个人网站(1)

简介: 作为前端,需要学习的东西越来越多了,各种新框架,层出不穷。再加上Node.js的流行,需要学习的就更多了。很早就开始想学习Node,总是学了一半,又放下了,没有真正地掌握过。

作为前端,需要学习的东西越来越多了,各种新框架,层出不穷。再加上Node.js的流行,需要学习的就更多了。很早就开始想学习Node,总是学了一半,又放下了,没有真正地掌握过。其中原因也是因为没有一个项目需求,只学API很容易就学不下去。

1. 目标

使用Node.js 搭建个人网站,包含基本的网站首页,以及博客子站,其他的模块后续再慢慢添加上去

2. 选型

2.1. Node.js框架

有了解的Node.js框架有

  • 经典的express
  • 最近很火的koa2
  • 基于koa2的 egg(阿里的开源框架)ThinkJS
  • 比较新的,以速度见长的fastify
    面对这么多框架,不可能一下子就全部都掌握,选择哪一种框架都可以。个人感觉,koa2本身非常简洁,很多插件都需要自己去集成,刚开始可以选择像egg这种的,功能比较齐全的,在学习Node.js的同时也可以学习一般项目架构是怎样的。至于ThinkJS,了解不多,应该是和ThinkPHP一样的思想,如果有ThinkPHP的经验,可以尝试一下。

个人而言,这个项目选择使用express,原因有以下几点:

  • express比较经典,相对应的中文资料也多,学习起来,碰到问题也比较容易解决
  • fastify比较新,但是中文资料少
  • koa2用的人多,但相比之下,还是先从Express入手,熟悉了如何用Node.js搭建一个项目并且对Node.js本身主要的API有比较好的了解之后再去学习Koa2

2.2. 模块引擎

了解了一下现在比较多人使用的模板引擎,有 jade, ejs,handlebars

  • jade的风格非常简洁,但上手比较难,如果是个人项目中使用,无所谓,但如果是团队中,总体学习成本偏大
  • ejs的风格跟jsp的风格很像,有很多人更喜欢用ejs,特别是有使用Java开发的人
  • handlebars的风格,跟现在流行的vue模板风格很像
    基于以上几点,由于平时使用Vue做的项目比较多,对于handlebars的这种风格比较喜欢
    因此选择使用handlebars作为前端模板引擎。

3. 框架的搭建

Express的教程还是比较多的,因此搭建起来很方便
express的使用,参考官方文档

Express应用生成器

通过应用生成器可以快速地创建一个应用程序

  1. 安装express应用生成器
npm i -g express-generator
  1. 查看应用生成器的相关帮助
    img_bbea3ca735f1f40cbf31f4d46c230ce8.png
    image.png
  2. 通过应用生成器生成应用骨架
express --view=hbs myapp

旧的语法 express --hbs myapp不推荐:


img_abd226da117dfda7212a853ce51803c0.png
image.png

建议使用推荐的语法:


img_2e72e00320c3e7e5ccdb57d75f634f58.png
image.png

生成之后的项目结构如下:


img_6287fd75b52af1b63476a7c080708383.png
image.png
  1. 启动项目
npm i
npm start
// 或
yarn
yarn start
目录
相关文章
|
8月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
Web App开发 JSON JavaScript
Node.js 中的中间件机制与 Express 应用
Node.js 中的中间件机制与 Express 应用
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
JavaScript
使用node.js搭建一个express后端服务器
Express 是 Node.js 的一个库,用于搭建后端服务器。本文将指导你从零开始构建一个简易的 Express 服务器,包括项目初始化、代码编写、服务启动与项目结构优化。通过创建 handler 和 router 文件夹分离路由和处理逻辑,使项目更清晰易维护。最后,通过 Postman 测试确保服务正常运行。
811 1
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
261 0
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
开发框架 JavaScript 前端开发
使用 Node.js 和 Express 构建 Web 应用
【10月更文挑战第2天】使用 Node.js 和 Express 构建 Web 应用
|
JavaScript 中间件 关系型数据库
构建高效的后端服务:Node.js 与 Express 的实践指南
在后端开发领域,Node.js 与 Express 的组合因其轻量级和高效性而广受欢迎。本文将深入探讨如何利用这一组合构建高性能的后端服务。我们将从 Node.js 的事件驱动和非阻塞 I/O 模型出发,解释其如何优化网络请求处理。接着,通过 Express 框架的简洁 API,展示如何快速搭建 RESTful API。文章还将涉及中间件的使用,以及如何结合 MySQL 数据库进行数据操作。最后,我们将讨论性能优化技巧,包括异步编程模式和缓存策略,以确保服务的稳定性和扩展性。
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
426 1
|
JSON JavaScript 前端开发
Node.js Express 框架
10月更文挑战第7天
114 2