热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这篇文章主要介绍了详解Express笔记之动态渲染HTML(新手入坑),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

创建文件夹

mkdir express-simple-server

 

初始化项目

cd express-simple-server
npm init -y

 

安装Express

npm install express

在根目录下创建 express-simple-sever.js 作为入口文件(我比较喜欢用项目名作为入口文件), 并修改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-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

 

访问根路由 /

 

访问 /about

 

触发 404

 

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

配置静态文件目录

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

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

 

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

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

 

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

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

第一步: 收到前端请求

第二步: 匹配路由

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

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




  
  


  

人物介绍

{{#each personInfoList}}

昵称:{{this.name}}

年龄:{{this.age}}


{{/each}}

最终效果

 

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

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


推荐阅读
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • 必须先赞下国人npm库作品:node-images(https:github.comzhangyuanweinode-images),封装了跨平台的C++逻辑,形成nodejsAP ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • 阿,里,云,物,联网,net,core,客户端,czgl,aliiotclient, ... [详细]
  • 本文介绍了Hyperledger Fabric外部链码构建与运行的相关知识,包括在Hyperledger Fabric 2.0版本之前链码构建和运行的困难性,外部构建模式的实现原理以及外部构建和运行API的使用方法。通过本文的介绍,读者可以了解到如何利用外部构建和运行的方式来实现链码的构建和运行,并且不再受限于特定的语言和部署环境。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
  • 在Android中解析Gson解析json数据是很方便快捷的,可以直接将json数据解析成java对象或者集合。使用Gson解析json成对象时,默认将json里对应字段的值解析到java对象里对应字段的属性里面。然而,当我们自己定义的java对象里的属性名与json里的字段名不一样时,我们可以使用@SerializedName注解来将对象里的属性跟json里字段对应值匹配起来。本文介绍了使用@SerializedName注解解析json数据的方法,并给出了具体的使用示例。 ... [详细]
  • npminstall-Dbabelcorebabelpreset-envbabelplugin-transform-runtimebabelpolyfillbabel-loader ... [详细]
  • 前言:原本纠结于Web 模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中eval函数。虽然eval函 ... [详细]
author-avatar
手机用户2602907455
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有