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
目录
相关文章
|
6天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
【4月更文挑战第24天】Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它包含中间件系统用于日志、错误处理和静态文件服务,集成多种模板引擎如EJS、Jade、Pug。框架还提供安全中间件提升应用安全,并具有良好的可扩展性,便于项目功能扩展和开发效率提升。
27 3
|
6天前
|
JSON JavaScript 前端开发
❤Nodejs 第九章(token身份认证和express-jwt的安装认识)
【4月更文挑战第9天】Node.js第九章介绍了Token身份认证,特别是JWT(JSON Web Token)作为跨域认证的解决方案。JWT由Header、Payload和Signature三部分组成,用于在客户端和服务器间安全传输用户信息。前端收到JWT后存储在localStorage或sessionStorage中,并在请求头中发送。Express-JWT是一个中间件,用于解析JWT。基本用法包括设置secret和algorithms。注意安全问题,避免混合使用不同算法以防止降级攻击。
46 0
|
6天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
6天前
|
开发框架 JavaScript 中间件
node+express搭建服务器环境
node+express搭建服务器环境
node+express搭建服务器环境
|
6天前
|
开发框架 JavaScript 中间件
深入探索Node.js的Express框架:使用与中间件详解
【4月更文挑战第30天】本文深入探讨了Node.js的Express框架,介绍了其作为Web开发的强大工具,主要聚焦于基本使用和中间件。Express是基于Node.js的Web应用框架,用于构建高效的应用和API。文章详细讲解了如何安装Express,创建简单应用,以及中间件的工作原理和应用,包括中间件的顺序、错误处理和挂载位置。此外,还提到了使用第三方中间件扩展功能。理解Express基础和中间件对于开发高质量Web应用至关重要。
|
6天前
|
JavaScript 中间件 API
node.js之express的基础知识
node.js之express的基础知识
|
6天前
|
开发框架 JavaScript 前端开发
【Node系列】Express 框架
Express.js 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,提供一系列强大的特性来帮助你创建各种 web 和移动设备应用。
36 2
|
6天前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express构建RESTful API
使用Node.js和Express构建RESTful API
29 0
|
6天前
|
JSON JavaScript 前端开发
超级实用!详解Node.js中的util模块和express模块
超级实用!详解Node.js中的util模块和express模块
|
6天前
|
开发框架 JSON JavaScript
Node.js教程-express框架
Node.js教程-express框架
42 1