Express新手入坑笔记之动态渲染HTML
时间:2022-06-16
本文章向大家介绍Express新手入坑笔记之动态渲染HTML,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
- 在日常项目中,我喜欢用Django做后端, 因为大而全
- 如果只是写一个简单服务的话, Express是更好的选择, Express是基于nodejs的一个后端框架,特点是简单,轻量, 容易搭建, 而且性能非凡,下面我们就用最少的步骤搭建一个Express的后端服务吧!
创建文件夹
mkdir express-simple-server
初始化项目
cd express-simple-server
npm init -y
安装Express
npm install express
在根目录下创建
express-simple-sever.js
作为入口文件(我比较喜欢用项目名作为入口文件), 并修改package.json文件
{
"name": "express-simple-server",
"version": "1.0.0",
"description": "",
"main": "express-simple-server.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "node express-simple-server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}
为express-simple-server.js添加
首页
,about页面
,定制化404页面
,定制化500页面
的处理逻辑
const express = require('express');
const app = express();
// 如果在环境变量内, 设定了程序运行端口,则使用环境变量设定的端口号, 否则使用3000端口
app.set('port', process.env.PORT || 3000);
// 匹配根路由 / (如果不特别指明返回的状态码, 则默认返回200)
app.get('/', function(req, res) {
res.type('text/plain');
res.send('访问了首页');
});
// 匹配/about路由
app.get('/about', function(req, res) {
res.type('text/plain');
res.send('访问了about页面');
});
// 定制 404 页面 (返回404状态码)
app.use(function(req, res) {
let currentTime = new Date();
res.type('text/plain');
res.status(404);
res.send('404 - 你访问的页面可能去了火星n' + currentTime);
});
//定制 500 页面 (返回500状态码)
app.use(function(err, req, res, next) {
let currentTime = new Date();
let errInfo = err.stack;
res.type('text/plain');
res.status(500);
res.send('500 - 服务器发生错误n' + 'errInfo:' + errInfo + 'n' + 'currentTime:' + currentTime);
});
// 监听服务端口, 保证程序不会退出
app.listen(app.get('port'), function() {
console.log('Express 服务正在运行在 http://localhost:' + app.get('port') + '; 按 Ctrl-C 关闭服务.');
});
让Express跑起来
npm run start
- 访问根路由
/
- 访问
/about
- 触发
404
- 触发
500
(故意改错了一些代码, 即可触发此效果)
配置静态文件目录
// 匹配静态文件目录
app.use(express.static(__dirname + '/public'));
- 在根目录下新建
public
文件夹, 在public
文件夹内新建static
文件夹
这里的public
不会显示在url中, 为了方便判别静态文件的url请求, 我们在public内新建一个static文件夹, 这样所有请求静态文件的url,都会以static开头(这里借鉴了django处理静态文件的方法)
- 访问
http://localhost:3000/static/index.html
- 访问
http://localhost:3000/static/images/1.jpg
- 后端服务的处理逻辑都是大同小异的: 第一步: 收到前端请求 第二步: 匹配路由 第三步: 根据路由找到对应的视图函数 第四步: 视图函数执行内部逻辑(查数据库, 读取html模板), 将产生的数据, 返回给前端
使用handlebars模板引擎, 动态渲染html文件
- 安装模板引擎
express-handlebars
npm install express-handlebars
- 在express-simple-server.js内配置express-handlebars模板引擎
const exphbs = require('express-handlebars');
// 配置模板引擎
app.engine('html', exphbs({
layoutsDir: 'views',
defaultLayout: 'layout',
extname: '.html'
}));
app.set('view engine', 'html');
- 修改根路径处理函数
// 匹配根路由 / (如果不特别指明返回的状态码, 则默认返回200)
app.get('/', function(req, res) {
res.render('index', {
layout: false,
title: "首页",
personInfoList: [{
name: "王炮儿(一拳超人)",
age: 20
}, {
name: "炮姐(御坂美琴)",
age: 15
}]
});
});
- 在根目录下创建文件夹
views
, 并创建index.html
,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<h1 style="color: #64B587">人物介绍</h1>
{{#each personInfoList}}
<h2>昵称:{{this.name}}</h2>
<h2>年龄:{{this.age}}</h2>
<hr>
{{/each}}
</body>
</html>
- 最终效果
express-simple-server.js
源码
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
// 配置模板引擎
app.engine('html', exphbs({
layoutsDir: 'views',
defaultLayout: 'layout',
extname: '.html'
}));
app.set('view engine', 'html');
// 如果在环境变量内, 设定了程序运行端口,则使用环境变量设定的端口号, 否则使用3000端口
app.set('port', process.env.PORT || 3000);
// 匹配静态文件目录
app.use(express.static(__dirname + '/public'));
// 匹配根路由 / (如果不特别指明返回的状态码, 则默认返回200)
app.get('/', function(req, res) {
res.render('index', {
layout: false,
title: "首页",
personInfoList: [{
name: "王炮儿(一拳超人)",
age: 20
}, {
name: "炮姐(御坂美琴)",
age: 15
}]
});
});
// 定制 404 页面 (返回404状态码)
app.use(function(req, res) {
let currentTime = new Date();
res.type('text/plain');
res.status(404);
res.send('404 - 你访问的页面可能去了火星n' + currentTime);
});
//定制 500 页面 (返回500状态码)
app.use(function(err, req, res, next) {
let currentTime = new Date();
let errInfo = err.stack;
res.type('text/plain');
res.status(500);
res.send('500 - 服务器发生错误n' + 'errInfo:' + errInfo + 'n' + 'currentTime:' + currentTime);
});
// 监听服务端口, 保证程序不会退出
app.listen(app.get('port'), function() {
console.log('Express 服务正在运行在 http://localhost:' + app.get('port') + '; 按 Ctrl-C 关闭服务.');
});
- package.json
{
"name": "express-simple-server",
"version": "1.0.0",
"description": "",
"main": "express-simple-server.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "node express-simple-server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4",
"express-handlebars": "^3.0.0"
}
}
小结:
如果你想通过一门编程语言实现全栈, javascript是你的不二之选(其实也没得选,浏览器能运行的图灵完备的语言只有javascript), Express是一个很基础的nodejs框架, 把Express学通, 其他nodejs后端框架也就一通百通了
- 【线程池】线程池与工作队列
- 一个快速方便的图形化 Python 调试器 —— birdseye | Github 项目推荐
- 关于分区表的在线重定义(r5笔记第98天)
- 10个实用的但偏执的Java编程技术
- 看似诡异的tablespace online问题(r5笔记第95天)
- python2.7进行爬虫POI代码(划分小网格算法)
- 从 Encoder 到 Decoder 实现 Seq2Seq 模型
- python2.7进行爬虫百度POI代码(划分小网格算法)
- 如何通过TTL调试光猫
- 基于树莓派和Tensowflow的物体识别-brain
- SNA中:中心度及中心势诠释(不完整代码)
- 教程 | 基于计算机视觉使用Python和OpenCV计算道路交通
- 干货 | MVP模式在携程酒店的应用和扩展
- memlock过低导致的数据库性能问题(r6笔记第10天)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- springboot解决前后端数据跨域问题
- 单细胞数据中到底应该如何处理线粒体基因
- Seurat小提琴图为什么有的只有点儿?
- Layui解决table日期的格式化问题
- Telegraf+Influxdb+Grafana 轻量级监控系统部署
- 国产开源文档管理系统——Wizard
- 力扣 1519——子树中标签相同的节点数
- PythonforResearch | 1_文件操作
- 你应该知道关于Python的这几个技巧!
- Pytest之fixture
- JAVA|Java的Scanner类初级使用
- systemd设置nginx开机自启动
- C盘爆满,如何移除软件~
- Microsoft PowerToys
- MagicEXIF(元数据编辑器)