详解Express笔记之动态渲染HTML(新手入坑)


Posted in Javascript onDecember 13, 2018

在日常项目中,我喜欢用Django做后端, 因为大而全

如果只是写一个简单服务的话, Express是更好的选择, Express是基于nodejs的一个后端框架,特点是简单,轻量, 容易搭建, 而且性能非凡,下面我们就用最少的步骤搭建一个Express的后端服务吧!

创建文件夹

mkdir express-simple-server

详解Express笔记之动态渲染HTML(新手入坑) 

初始化项目

cd express-simple-server
npm init -y

详解Express笔记之动态渲染HTML(新手入坑) 

安装Express

npm install express

在根目录下创建 express-simple-sever.js 作为入口文件(我比较喜欢用项目名作为入口文件), 并修改package.json文件

详解Express笔记之动态渲染HTML(新手入坑)

{
 "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

详解Express笔记之动态渲染HTML(新手入坑) 

访问根路由 /

详解Express笔记之动态渲染HTML(新手入坑) 

访问 /about

详解Express笔记之动态渲染HTML(新手入坑) 

触发 404

详解Express笔记之动态渲染HTML(新手入坑) 

触发 500 (故意改错了一些代码, 即可触发此效果)

详解Express笔记之动态渲染HTML(新手入坑)

配置静态文件目录

详解Express笔记之动态渲染HTML(新手入坑)

// 匹配静态文件目录
app.use(express.static(__dirname + '/public'));

在根目录下新建 public 文件夹, 在 public 文件夹内新建 static 文件夹

详解Express笔记之动态渲染HTML(新手入坑) 

这里的 public 不会显示在url中, 为了方便判别静态文件的url请求, 我们在public内新建一个static文件夹, 这样所有请求静态文件的url,都会以static开头(这里借鉴了django处理静态文件的方法)

访问 http://localhost:3000/static/index.html

详解Express笔记之动态渲染HTML(新手入坑) 

访问 http://localhost:3000/static/images/1.jpg

详解Express笔记之动态渲染HTML(新手入坑)

后端服务的处理逻辑都是大同小异的:

第一步: 收到前端请求

第二步: 匹配路由

第三步: 根据路由找到对应的视图函数

第四步: 视图函数执行内部逻辑(查数据库, 读取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 ,

详解Express笔记之动态渲染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笔记之动态渲染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后端框架也就一通百通了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
js实现黑白div块画空心的图形
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 #Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 #Javascript
Element UI框架中巧用树选择器的实现
Dec 12 #Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 #Javascript
新版小程序登录授权的方法
Dec 12 #Javascript
加快Vue项目的开发速度的方法
Dec 12 #Javascript
You might like
PHP中的float类型使用说明
2010/07/27 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP的全局错误处理详解
2016/04/25 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
js实现随机点名功能
2020/12/23 Javascript
编写简单的Python程序来判断文本的语种
2015/04/07 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python实现二维插值的三维显示
2018/12/17 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
WxPython实现无边框界面
2019/11/18 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
大学生军训广播稿
2014/01/24 职场文书
医生辞职信范文
2015/03/02 职场文书
2015年教师节主持词
2015/07/03 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫