首页
所有分类
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 相关文章推荐
Mootools 1.2教程 滚动条（Slider）
Sep 15 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
javaScript中封装的各种写法示例（推荐）
Jul 03 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
vue实现购物车小案例
Sep 27 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
mysqldump(1) csgo(1) Stater(1) XPathParser(1) sentinel(1) sock(2) protocol(1) ACID(1) Windows server 2003(1) minio(1)
You might like
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
phpmyadmin安装时提示：Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
php 多文件上传的实现实例
2016/10/23 PHP
iOS+PHP注册登录系统 PHP部分（上）
2016/12/26 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
Python实现的简单hangman游戏实例
2015/06/28 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
django使用html模板减少代码代码解析
2017/12/12 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
某公司Java工程师面试题笔试题
2016/03/27 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
大学生个人推荐信范文
2013/11/25 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
MySQL学习之基础命令实操总结
2022/03/19 MySQL
在 Python 中利用 Pool 进行多线程
2022/04/24 Python