首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解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后端框架也就一通百通了

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

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

- Author -

木子昭

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
图片之间的切换
Jun 26 Javascript
jQuery 行级解析读取XML文件（附源码）
Oct 12 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
js 函数调用模式小结
Dec 26 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
一文带你理解vue创建一个后台管理系统流程（Vue+Element）
May 18 Vue.js
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
乌克兰购物网站(27) 摩纳哥购物网站(1) 巴基斯坦购物网站(2) 马耳他购物网站(1) 希腊购物网站(6) 缅甸购物网站(1) 越南购物网站(9) 罗马尼亚购物网站(10) 约旦购物网站(1) 亚洲购物网站(6)
You might like
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
实现PHP搜索加分页
2016/10/12 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
ionic使用angularjs表单验证（模板验证）
2018/12/12 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
python正则表达式及使用正则表达式的例子
2018/01/22 Python
Python实现的质因式分解算法示例
2018/05/03 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python中rb含义理解
2020/06/18 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
华为的Java面试题
2014/03/07 面试题
2015年幼儿园大班工作总结
2015/04/25 职场文书
小学班主任心得体会
2016/01/07 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
MySQL 十大常用字符串函数详解
2021/06/30 MySQL