NodeJS_08_art-template子模板与模板继承_MongoBooster_express-session_三大类中间件_全局错误处理

最新推荐文章于 2025-08-05 15:28:01 发布
原创 最新推荐文章于 2025-08-05 15:28:01 发布 · 2.5k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#NodeJS #art-template #express-session #中间件 #全局错误处理

这篇博客介绍了NodeJS中art-template模板引擎的子模板和模板继承概念，以及如何使用MongoBooster和express-session中间件。此外，讨论了Express的错误处理中间件和不同类型的中间件，包括应用级、路由器级和错误处理中间件的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

NodeJS七天课程学习笔记_第8天 Blog综合案例

Blog 综合案例 (包含注册、登录、修改密码、注销、发布、分页列表、评论、个人中心、上传头像等)

课程内容概要:

    1. 介绍art-template中的 子模板 与 模板继承

    2. 介绍表单同步提交与异步提交的区别

    3. 介绍了可视化管理工具MongoBooster

    4. 介绍了blueimp/javascript-MD5的配置和使用

    5. 介绍express-session的配置与使用

    6. 注册、登录 与 退出 功能的实现


    7. 介绍 Express 中间件 原理

    8. express中的 三大类 中间件

    9. express中的 全局统一错误处理

    


注意: Node中有许多第3方模板引擎,不只有art-template,还有:

ejs (e代表effective高效之意,从json中生成html的一种魔法) 、

jade(因版权问题,后改名pug哈巴狗)、

handlebars(号称logic-less templateheima的manmanmai项目用到)、

nunjucks(是Mozilla开发的一个纯JavaScript编写的模板引擎)



首先讲art-template中的子模板(include) 以及 模板继承(extend)语法

官方文档地址 aui.github.io/art-template/zh-cn/docs/syntax.html





第1步, 新建下面4个文件 作为将来 被包含的子模板

公共的顶部public_top.html、

公共的底部public_footer.html、

公共的左侧边栏public_left.html、

公共的右广告栏public_right.html



第2步,新增 node_51_base_layout.html 作为将来被各个实际页面继承(extend)的母板

母板里面有个完整的骨架,

母板里包含(include)了公共的顶部、底部、左侧边栏、右广告栏

母板里head引入所有页面要用到的公共的css(如bootstrap)、js(如jquery)

同时，母板里，

通过block语法,在head标签中 预留了 实际页面真正要用到的 title、css、 js空间

通过block语法,在body标签中 预留了 实际页面真正要用到的html 空间

node_51_base_layout.html母板完整代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="public/img/beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="未闻花名-免费零基础教程-beyond">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,汇编,日语,英语,泰语,韩语,俄语,粤语,阿语,魔方,乐理,动漫,PR,PS,AI,AE">
    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">
        </script>
        <![endif]-->

    <!-- 公共的样式 -->
    <style type="text/css">
        body{
            font-size: 100%; 
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
            background-image: url("public/img/sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
        }
    </style>
    <!-- 公共的样式 -->
    <link rel="stylesheet" type="text/css" href="public/css/beyondbasestylewhite5.css">
    <!-- 绿色按钮的css效果 -->
    <link rel="stylesheet" type="text/css" href="public/css/beyondbuttongreen.css">        

    <!-- 公共的JS特效 -->
    <script type="text/javascript" src="public/js/nslog.js"></script>
    <!-- jquery -->
    <script type="text/javascript" src="public/js/jquery2.1.4.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" href="public/lib/bootstrap/dist/css/bootstrap.css">
    <script type="text/javascript" src="public/lib/bootstrap/dist/js/bootstrap.js"></script>

    <!-- 这个标题 要留一个坑,给后代去实现自己的title -->
    <title>
        {
  
  { block 'block_1_title'}}
            beyond心中の动漫神作
        {
  
  { /block }}
    </title>

    <!-- 这个head中要 要留一个坑,给后代去链接自己的css或js-->
    {
  
  { block 'block_2_head_css_js'}}
    {
  
  { /block }}

    </head>  
    <body>
        <!-- include进来公共的顶部、底部、左侧边栏、右广告栏 -->
        {
  
  { include './public_top.html' }}
        {
  
  { include './public_left.html' }}
        
        <!-- 这个body最后要 要留一个坑,给后代去实现自己的content-->
        {
  
  { block 'block_3_body_content'}}
                这是母板默认的正文<br/>
        {
  
  { /block }}

        {
  
  { include './public_right.html' }}
        {
  
  { include './public_footer.html' }}

        <!-- 这个body最后要 要留一个坑,给后代去实现自己的js-->
        {
  
  { block 'block_4_body_js'}}
        {
  
  { /block }}
    </body>
</html>



第3步,现在就可以新建首页node_51_index.html了 ,

该首页 继承(extend) 自 base_layout.html母板

node_51_index.html完整代码如下:

<!-- 第0步,继承母板 -->
{
  
  { extend './node_51_base_layout.html' }}

<!-- 第1步,自己的标题 -->
{
  
  { block 'block_1_title'}}
	自己的标题_首页
{
  
  { /block }}

<!-- 第2步,自己的head中的css或js -->
{
  
  { block 'block_2_head_css_js'}}
	<style type="text/css">
		body{
			background-color: rgba(166,166,166,0.1);
		}
	</style>
	<script type="text/javascript">
		alert('我是index的head中的js')
	</script>
{
  
  { /block }}

<!-- 第3步,自己的正文 -->
{
  
  { block 'block_3_body_content'}}
	自己的正文<br/>
{
  
  { /block }}

<!-- 第4步,自己的正文最后的js代码 -->
{
  
  { block 'block_4_body_js'}}
	<script type="text/javascript">
		alert('我是index的body最后的js')
	</script>
{
  
  { /block }}

入口文件node_51_index.js代码如下:

function NSLog(loli,needLogo=true) {console.log(loli);if(needLogo){console.log('\nCopyright © 2018 Powered by beyond')};}  


// 导入框架
var express = require('express')
var path = require('path')
// 创建服务器对象
var appServer = express()
// 监听端口,并启动服务
appServer.listen(5267,function (error) {
	if (error) {
		return NSLog('启动失败: ' + error)
	}
	NSLog('服务启动成功')
})
// -----------------------------------

// 静态资源请求时的 staticFileUrlPrefix
var staticFileUrlPrefix = '/public/'
// var staticFileUrlPrefix = '/public' 

// 访问也只能使用 localhost:5267/public/img/beyond.jpg
// 磁盘上的静态资源目录
var staticFilePath = './public/'   
// var staticFilePath = 'public' 

var callbackFunction = express.static(staticFilePath)
appServer.use(staticFileUrlPrefix,callbackFunction)
// 再开一个静态资源目录
appServer.use('/uploads/',express.static(path.join(__dirname,'uploads')))

// -----------------------------------

// 指明:对于 所有后缀为html 的模板文件 使用模板引擎
var templateFileSuffix = 'html'
appServer.engine(templateFileSuffix,require('express-art-template'))
// 下面这一句参数配置,可有可无
appServer.set('view options',{
	debug: process.env.NODE_ENV !== 'production'
})
// 注意:如果不想把模板文件放在默认的views目录下,则可以通过下面代码更改设置
// appServer.set('views','其他目录')

// -----------------------------------
// 使用middleware中间件body-parser进行post请求体中数据解析
var bodyParser = require('body-parser')
// 设置解析 application/x-www-form-urlencoded
appServer.use(bodyParser.urlencoded({extended: false}))        
// 设置解析 application/json
appServer.use(bodyParser.json())

// -----------------------------------
// 自定义路由设计的目的是:
// 1.让主入口程序的职责更加单一,代码更加简洁
//     1.1 创建服务
//     1.2 做一些服务相关的配置,比如:
//           1.2.1 静态资源配置
//           1.2.2 模板引擎配置
//           1.2.3 body-parse 解析表单
//           1.2.4 挂载自定义路由
//           1.2.5 监听端口,启动服务
// 使用自定义的路由模块 必须使用./
// 注意: 配置模板引擎和body-parser, 一定要在挂载路由之前
var beyondRouter = require('./node_51_router')
appServer.use(beyondRouter)

路由文件node_51_router.js代码如下:

function NSLog(loli) {console.log(loli);return 'Copyright © 2018 Powered by beyond';};  
/*
	自定义路由模块的职责是:
		专门处理所有的路由
		根据不同的请求方式和路径,采取相应的处理方法
*/ 
// express 专门提供了路由的处理方法
var express = require('express')

// ---------------使用formidable解析上传的图片--------------------
var formidable = require('formidable')
// var util = require('util')
var path = require('path')
// -----------------------------------

// 1.使用express专门提供的路由器处理路由 
var router = express.Router()

// -----------------------------------
// 时间格式化
// var BeyondDateFormatFunction = require('./BeyondDateFormat')

// ----------------首页-------------------
router.get('/',function (request,response) {
	response.render('index/node_51_index.html')
})

// 3.在模块文件最后,导出router
module.exports = router

通过node_51_index.js入口 加载 node_51_router.js路由之后

启动服务器,渲染效果如下:



Blog项目开始 

第1步. 项目初始化

        首先npm init -y ,生成package.json

        然后git init,然后手动新建.gitignore文件

第2步. npm 安装 mongoose和express和art-template和express-art-template


第3步. 项目目录

        public目录下有img和css和js和lib目录

        views目录下放着html模板, 分成了登录注册模块、文章模块

第4步. 路由设计

路由设计
请求路由 方法 GET参数 POST参数 是否需要登录权限(没用到) 备注
/ GET


首页index.html即文章列表
/register GET


注册页面register.html
/register POST
email,password,username
处理注册的POST请求
/login GET


登录页面login.html
/login POST
email,password
处理登录POST请求


首先处理的路由是 / , 渲染首页node_52_index.html

由于数据库内暂时还没有数据,所以首页只用几个假的数据先填充,以保证样式正常

首页的渲染效果如下:


首页node_52_index.html代码(暂未使用模板引擎渲染)如下:

<!-- 第0步,继承母板 -->
{
  
  { extend './node_52_base_layout.html' }}

<!-- 第1步,自己的标题 -->
{
  
  { block 'block_1_title'}}
	未闻花名_多用户博客系统_首页
{
  
  { /block }}

<!-- 第2步,自己的head中的css或js -->
{
  
  { block 'block_2_head_css_js'}}
	<style type="text/css">
		body{
			background-color: rgba(166,166,166,0.1);
		}
	</style>
	<script type="text/javascript">
		// alert('我是index的head中的js')
	</script>
{
  
  { /block }}

<!-- ||||||||||||||||||||||||||||||||| -->
<!-- 第3步,自己的正文 -->
{
  
  { block 'block_3_body_content'}}
	
	
<section class="container">
  <ul class="media-list">
    <li class="media">
      <div class="media-left">
        <a href="#">
            <img width="40" height="40" class="media-object" src="public/img/beyond.jpg" alt="...">
          </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading"><a href="/topics/123">未闻花名</a></h4>
        <p>面码 发起了话题 • 1314 人关注 • 32 个回复 • 1992 次浏览 • 2006-06-07 22:20</p>
      </div>
    </li>
    <li class="media">
      <div class="media-left">
        <a href="#">
            <img width="40" height="40" class="media-object" src="public/img/beyond.jpg" alt="...">
          </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading"><a href="/topics/123">龙与虎</a></h4>
        <p>逢坂大河 发起了话题 • 520 人关注
最低0.47元/天 解锁文章

200万优质内容无限畅学
art-template+Express+MongoDB小项目
qq_36623798的博客
02-23 1544
前言 为了体验前后端交互的内容，我找了art-template+Express+MongoDB（代码Github）这个简单的小项目练练手，页面极其简陋，不喜勿喷。 本项目是使用前端引擎art-template+Express+MongoDB为主开发的项目，本文将对项目使用的技术和一些细节处进行讲解。 一、效果 二、功能 1.已经完成功能 2.待优化或实现 三、主要使用技术 四、快速上手art-te...
art-template的子模版与模板继承
qq_45228330的博客
10-27 474
art-template 的子模版与模板继承 核心语句： {{ extend './layout.html }} {{ block 'header' }} ... {{ /block }} 模板页（layout.html） 可以设计为网页的模板页，包括固定的头部样式和底部样式，以及需要的一些连接，可以通过 {{ block ‘name’ }}默认内容{{ /block }} 给继承了模板网页的子网页设计 留空 部分，让其自由插入，最后在浏览器中会将两个网页整合成为一个网页 <!DOCTYPE htm
JS中art-template模板使用子模板
PrisonersDilemma的博客
05-16 1145
var mySwiper = new Swiper(’.swiper-container’, { spaceBetween: 30, centeredSlides: true, loop: true, //循环播放 autoplay: { //播放时间间隔 delay: 5000, disableOnInteraction: false, }, pagination: { el: ‘.swiper...
Node.js到底是什么
ya3288426755的博客
06-27 1147
随着 TypeScript 的深度整合和云原生技术的普及，Node.js 不仅巩固了其在后端开发的地位，还逐步渗透到 AI、IoT 等新兴领域。对于开发者而言，掌握 Node.js 及其生态工具（如 Express、npm）是构建高效、可扩展应用的关键。我想像是npm、vite这些名词大家都很熟悉，对它们的作用也有大致印象，但是可能都像我一样不明白Node.js到底是什么，这里给大家带来一个简单介绍。Node.js 从一个实验性项目发展为现代 Web 开发的核心工具，其成功源于。
art-template 模板引擎
XWen_ING的博客
10-20 232
模板引擎 可以把我们的 js 里面的变量或者数据放置在外部的页面里面。     底层实现：正则+替换     具体：     1. 我们外置的页面一般我们叫做模板，模板里面一般会放置很多的占位符。占位符值得是后面可以通过变量替换出来的。     2. 使用模板引擎，把那些占位符通过变量替换出来。 {{ kw }} 形如这样的结构叫做占位符，也可以叫做
Nodejs》》Express、中间件
最新发布
u013400314的博客
08-05 169
npm i express -g -D
nodejs，express，网络基础测试题
weixin_45388133的博客
06-29 2012
单选题。 （共 8 题 ，总 40 分） 第1题（5分） 如果一台计算机的网络连接和设置都正常，唯独DNS服务异常，则可能出现以下哪种情况？ A 不能访问网络 B 只能访问局域网 C 只能通过IP地址访问网络 D 不能使用浏览器访问网络 第2题（5分） 要求必须包含大写字母、小写字母和数字，且至少6位，使用以下哪个正则表达式？ A ^\w{6,}$ B ^[a-zA-Z0-9]{0,6}$ C ^[a-zA-Z0-9]{6,}$ D ^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-
Node.js +个人博客系统搭建设计方案
huohuoit的博客
05-01 2049
目录 1.Node开发基础 1.1基础（服务器端开发） 1.2模块加载及第三方包 1.2.1 Node.js模块化开发 1.2.2 系统模块 1.2.3第三方模块（包） 1.2.4模块加载机制 2.请求响应原理及HTTP协议 2...
一小时：手把手教你入门express【建议收藏】
贪吃ღ大魔王
07-05 3905
express 简介 Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。搭建web服务器 Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。 使用Express开发框架可以非常方便、快速的创建Web网站的服务器或API接口的服务器 官方网址：https://www.expressjs.com.cn/ 简单使用 下载安装： npm init -y npm i express -S 使用步骤： 导入包 创建服务器 处理请求 监
art-template 中的子模板和模板继承
weixin_47505105的博客
02-28 697
art-template中的子模板以及模板继承，附上了我学习此内容时写的代码以及截图
node 中 template 的继承
weixin_41374628的博客
10-23 301
Github 地址 template 模板继承 模板继承的功能 如何实现头部、底部公共部分的处理 自行查看 模板继承 可以继承 <style></style> 、<div></div>、<script></script> 继承 header.html <!DOCTYPE html> <html...
art-template辅助函数和子模板
weixin_39037804的博客
09-10 230
art-template 前端使用 用途：主要用来处理数据和优化性能，与其他的一些模块化处理数据的插件相比，art-template处理性能好 不废话，上代码 1.art-template基本语法使...
artTemplate模板继承和子模板
chen__cheng的博客
03-21 680
子模板 语法： {{ include './header.html' }};// 其中'./header.html'是相对于当前文件位置的文件 应用： # layout.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ inclu..
art-template 模板继承和子模板
weixin_43916694的博客
07-24 579
安装： npm install --save art-template // 在浏览器中下载时不需要安装 npm install --save express-art-template 配置： // 第一个参数用来配置视图的后缀名，这里是 art ，则存储在 views 目录中的模板文件必须是 xxx.art // app.engine('art', require('express-art-template')) // 这里把 art 改为 html app.engine('html', requir
模板引擎（art-template）详解
热门推荐
m0_61016904的博客
05-08 2万+
art-template🧨1. 介绍1.1.特性1.2. 模板1.3.渲染模板1.4.核心方法🧨2.安装2.1.npm2.2.在浏览器中实时编译🧨3. 语法3.1.输出3.2.原文输出3.3.条件3.4.循环3.5.变量3.6.模板继承3.7.子模板3.8.过滤器4.调试5.模板变量6. 解析规则7.压缩页面8.API8.1.template(filename, content)8.2. .compile(source, options)8.3. .render(source, data, option
模板类的继承（类模板作为基类），内嵌类的继承
weixin_45419976的博客
02-24 600
C++模板类的继承，类模板作为基类，内嵌类的继承
artTemplate模板引擎的简单实用
jackie_bobo的博客
06-26 3002
虽说现在多数公司都是用MV*框架做项目，数据驱动视图更新，Dom操作部分就不需要太在意，只管逻辑部分。就在今天2018.6.26日，这是有一个 特别的日子 ，因为我我….不说了！说一下我哪个美丽又可爱的朋友问我jq里怎么用模板引擎，所以我就写个demo给她，虽说自己也是渣渣，但是能帮到她就挺好的，所以我想既然都demo都写了，就发个博客记录一下，看有没有人恰巧有用，点上一赞足以让我开心的像2...
node中模板继承之CompileError
qq_45832807的博客
03-16 291
在编译过程中如果出现CompileError错误，其实错误信息已经指向了错误的地方。在node中使用art-template模板，出现CompileError错误，一定是公共模板（layout.html）部分出现了问题，请仔细检查layout页面的页面数据。其实在学习使用的很多时候，出现这种错误大多数都是我们自己不细心，将标签，字段，符号等基本数据写错了。 就很无奈~~ ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值