详解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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
angularJS 中input示例分享
Feb 09 Javascript
基于jquery编写分页插件
Mar 07 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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
You might like
mysql时区问题
2008/03/26 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
js实现日历的简单算法
2017/01/24 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
Jupyter加载文件的实现方法
2020/04/14 Python
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
班主任评语大全
2014/04/26 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js