详解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 ,
<!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-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后端框架也就一通百通了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Nodejs+express+html5 实现拖拽上传
一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可以让j
-
Express使用html模板的详细代码
express默认使用jade模板,可以配置让其支持使用ejs或html模板. 1. 安装ejs 在项目根目录安装ejs. npm install ejs 2.引入ejs var ejs = require('ejs'); //我是新引入的ejs插件 3.设置html引擎 app.engine('html', ejs.__express); 设置视图引擎 app.set('view engine', 'html'); 保存后重启服务,即可访问html文件. 注:在express搭建的服务器中,
-
详解Express笔记之动态渲染HTML(新手入坑)
在日常项目中,我喜欢用Django做后端, 因为大而全 如果只是写一个简单服务的话, Express是更好的选择, Express是基于nodejs的一个后端框架,特点是简单,轻量, 容易搭建, 而且性能非凡,下面我们就用最少的步骤搭建一个Express的后端服务吧! 创建文件夹 mkdir express-simple-server 初始化项目 cd express-simple-server npm init -y 安装Express npm install express 在根目录下创
-
详解SpringBoot+Mybatis实现动态数据源切换
业务背景 电商订单项目分正向和逆向两个部分:其中正向数据库记录了订单的基本信息,包括订单基本信息.订单商品信息.优惠卷信息.发票信息.账期信息.结算信息.订单备注信息.收货人信息等:逆向数据库主要包含了商品的退货信息和维修信息.数据量超过500万行就要考虑分库分表和读写分离,那么我们在正向操作和逆向操作的时候,就需要动态的切换到相应的数据库,进行相关的操作. 解决思路 现在项目的结构设计基本上是基于MVC的,那么数据库的操作集中在dao层完成,主要业务逻辑在service层处理,controll
-
详解Java的Proxy动态代理机制
一.Jvm加载对象 在说Java动态代理之前,还是要说一下Jvm加载对象的过程,这个依旧是理解动态代理的基础性原理: Java类即源代码程序.java类型文件,经过编译器编译之后就被转换成字节代码.class类型文件,类加载器负责读取字节代码,并转换成java.lang.Class对象,描述类在元数据空间的数据结构,类被实例化时,堆中存储实例化的对象信息,并且通过对象类型数据的指针找到类. 过程描述:源码->.java文件->.class文件->Class对象->实例对象 所以通过
-
详解微信小程序「渲染层网络层错误」的解决方法
问题描述: 情况是这样的,我需要在小程序中通过image标签显示三张我的图片,毫无疑问,其重点部分肯定在image的src属性上,请看思路分析: 我们可以新建一个专门放图片的文件夹,然后将我们项目所需要的图片文件全部放到这里.但是这会引发一个问题:微信官方对上线的小程序有大小的限制,所以如果你只是本地跑跑,那无可厚非,你开心就好:如果要做上线,这种方法的可行度不高: 使用外部链接.成功发布过小程序的小伙伴们都知道,外部链接必须使用https协议,且所使用域名必须设置在request合法域名列表中
-
详解C语言中动态内存管理及柔性数组的使用
目录 一.malloc 二.free 三.calloc 四.realloc 1.realloc在扩容时的情况 2.realloc也能实现malloc功能 五.使用动态内存的常见错误 1.free空指针 2.对动态开辟的空间越界访问 3.对非动态开辟内容free 4.只free动态开辟空间的一部分 5.对同一块内存多次free 6.动态内存空间忘记释放(内存泄漏) 六.柔性数组 1.柔性数组的概念 2.柔性数组的特点 3.柔性数组的使用场景 4.柔性数组的优点 一.malloc 这个函数向堆区申请
-
详解Mybatis-plus中更新date类型数据遇到的坑
最近一年的项目都是在使用Mybatis-plus,感觉挺好用的,也没遇到很多问题,但是在最近项目上线之后,遇到了一些新的需要,在进行新版本开发的时候就开始遇到坑了,今天来说一下更新数据中有date类型数据的时候会出现的问题. 实体类部分字段如下: @Data @Builder @NoArgsConstructor @AllArgsConstructor public class ProductPo implements Serializable { /** * 产品主键,自增 */ privat
-
详解key在Vue列表渲染时究竟起到了什么作用
Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点.而通常在我们使用v-for这个指令的时候,Vue会要求你给循环列表的每一项添加唯一的key,那么这个key在渲染列表时究竟起到了什么作用呢? 在解释这一点之前,你最好已经了解Vue的diff算法的具体原理是什么. Vue2更新真实DOM的操作主要是两种:创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点,这两种方式里创建新DOM节点的开销肯定是远大于更新或移动已有的DOM节点,所以在diff中逻辑都是为了减少新的创建
-
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法 1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicVa
-
详解Vue2.0配置mint-ui踩过的那些坑
最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑.. vue.js介绍 Vue.js 是一个用于创建 web 交互界面的.其特点是 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 数据驱动 自动追踪依赖的模板表达式和计算属性. 组件化 用解耦.可复用的组件来构造界面. 轻量 ~2
-
详解vue的数据劫持以及操作数组的坑
TL;DR 给data添加新属性的时候vm.$set(vm.info,'newKey','newValue') data上面属性值是数组的时候,需要用数组的方法操作数组,而不能通过index或者length属性去操作数组,因为监听不到属性操作的动作. 安装和初使用vue vue是构建用户界面的渐进式框架.所谓的渐进式:vue + components + vue-router + vuex + vue-cli可以根据需要选择相应的功能. 来串命令mkdir vue-apply;cd vue-ap