详解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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 Javascript
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实现下载限制速度示例分享
2014/02/13 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
javascript数组的使用
2013/03/28 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
python打开网页和暂停实例
2014/09/30 Python
Python开发的实用计算器完整实例
2017/05/10 Python
python实现机器人行走效果
2018/01/29 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python把1变成01的步骤总结
2019/02/27 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
python日志模块logbook使用方法
2019/09/19 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
签约仪式致辞
2015/07/30 职场文书