Express与传统Web应用(服务端渲染、art-template模板引擎、配置静态资源托管)
一、服务端渲染相关的概念
什么是渲染?
例如对于我们前端开发者来说最常见的一种场景就是:请求后端接口数据,然后将数据通过模板绑定语法绑定到页面中,最终呈现给用户。
数据:
模板:
渲染(数据+模板)结果:
把(数据+模板)拼接到一起的这事儿就是我们这里所指的渲染。
二、传统的Web应用
最早期,Web页面渲染都是在服务端完成的,即服务端运行过程中将所需的数据结合页面模板渲染为HTML,响应给客户端浏览器。所以浏览器呈现出来的是直接包含内容的页面。
工作流程:
这种方式的代表性技术有:ASP、PHP、JSP等,再到后来的一些相对高级一点的服务端框架配合一些模板引擎。
无论如何这种方式对于没有玩儿过后端开发的来说可能会比较陌生,所以下面通过我们前端比较熟悉的Node.js来了解一下这种方式。
这也就是最早的网页渲染方式,也就是动态网站的核心工作步骤。在这样的一个工作过程中,因为页面中的内容不是固定的,它有一些动态的内容。
const express = require('express')
const fs = require('fs')
const app = express()app.get('/', (req, res) => {// 1. 普通文本// res.send('Hello World')// 2. HTML 格式文本// res.send('<h2>Hello World</h2>')// 3. 为了便于开发和维护,把文件内容放到单独文件// fs.readFile('./views/index.html', (err, data) => {// if(err) {// return res.status(404).send('404 Not Found')// }// res.end(data)// })// 4. 动态页面渲染const todos = [{id: 1,title: '吃饭1'},{id: 2,title: '吃饭2'},{id: 3,title: '吃饭3'},{id: 4,title: '吃饭4'}]fs.readFile('./views/index.html', 'utf8', (err, data) => {if(err) {return res.status(404).send('404 Not Found')}// 获取数据// 获取页面模板// 数据 + 模板 = 完整页面let str = ''todos.forEach(todo => {str += `<li>${todo.title}</li>`})const ret = data.replace('(*^▽^*)', str)res.end(ret)})// 5. 使用模板引擎
})app.listen(3000, () => {console.log(`Server running at http://localhost:3000/`)
})
在今天看来,这种渲染模式是不合理或者说不先进的。因为在当下这种网页越来越复杂的情况下,这种模式存在很多明显的不足:
- 应用的前后端部分完全耦合在一起,在前后端协同开发方面会有非常大的阻力;
- 前端没有足够的发挥空间,无法充分利用现在前端生态下的一些更优秀的方案;
- 由于内容都是在服务端动态生成的,所以服务端的压力较大;
- 相比目前流行的SPA应用来说,用户体验一般;
但是不得不说,在网页应用并不复杂的情况下,这种方式也是可取的。
三、art-template 模板引擎
npm install art-template --save
const express = require('express')
const fs = require('fs')
const path = require('path')
const app = express()
const template = require('art-template')// 当渲染以 .art结尾的资源文件的时候 使用express-art-template
app.engine('art', require('express-art-template'))
// art-template 模板引擎的配置
app.set('view options', {debug: process.env.NODE_ENV !== 'production'
})
// 配置模板文件的存储目录
app.set('views', path.join(__dirname, 'views'))
// 可以省略的模板文件后缀名
app.set('view engine', 'art')app.get('/', (req, res) => {// 1. 普通文本// res.send('Hello World')// 2. HTML 格式文本// res.send('<h2>Hello World</h2>')// 3. 为了便于开发和维护,把文件内容放到单独文件// fs.readFile('./views/index.html', (err, data) => {// if(err) {// return res.status(404).send('404 Not Found')// }// res.end(data)// })// 4. 动态页面渲染// const todos = [// {// id: 1,// title: '吃饭1'// },// {// id: 2,// title: '吃饭2'// },// {// id: 3,// title: '吃饭3'// },// {// id: 4,// title: '吃饭4'// }// ]// fs.readFile('./views/index.html', 'utf8', (err, data) => {// if(err) {// return res.status(404).send('404 Not Found')// }// // 获取数据// // 获取页面模板// // 数据 + 模板 = 完整页面// let str = ''// todos.forEach(todo => {// str += `<li>${todo.title}</li>`// })// const ret = data.replace('(*^▽^*)', str)// res.end(ret)// })// 5. 使用模板引擎// 1.读取模板内容// fs.readFile('./views/index.html', 'utf8', (err, templateStr) => {// if(err) {// return res.status(404).send('404 Not Found')// }// // 2.获取数据const todos = [{id: 1,title: '吃饭1'},{id: 2,title: '吃饭2'},{id: 3,title: '吃饭3'},{id: 4,title: '吃饭4'}]// // 3.渲染这件事是在服务端完成的// const ret = template.render(templateStr, { // 模板中使用的数据// foo: 'bar',// todos// })// res.end(ret)// })// 1.读取模板文件// 2.渲染// 3.发送响应res.render('index.art', {foo: 'bar',todos: todos})})
app.listen(3000, () => {console.log(`Server running at http://localhost:3000/`)
})
四、在Express 中托管静态资源
4.1 配置选项
4.2 托管多个资源目录
注意:
建议加上前缀,防止出现比如
/node_modules里面有css/main.css
/public里面也有css/main.css,
如果这时没有加前缀的话,默认访问的是前面的那个(也就是上面代码中第一行的)目录里面的css/main.css
4.3 页面中的资源路径问题
关于页面中的静态资料路径,建议使用 绝对路径 / , / 代表的就是当前网站的根目录。
如果使用相对路径的话,./相对的并不是文件中的路径,而是请求的url,这样容易出现静态资源访问不到的问题
Express与传统Web应用(服务端渲染、art-template模板引擎、配置静态资源托管)相关推荐
- nuxtjs+express+vue2+vuex搭建的服务端渲染(SSR)个人网站项目 1
5se7en.com nuxtjs+express+vue2.0+vuex搭建的服务端渲染个人网站项目. github项目地址: https://github.com/se7en-1992... 项目 ...
- Vite(三)部署静态站点(wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI)、环境变量与模式、服务端渲染(SSR)
Vite(三)部署静态站点(wordpress与hugo与Vercel.CI/CD.Travis CI.GitLab CI).环境变量与模式.服务端渲染(SSR) 文章目录 Vite(三)部署静态站点 ...
- 浅谈服务端渲染(SSR) 与使用场景
什么是SSR(服务端渲染)MUA? SSR是Server Side Render的缩写,简单来讲:服务端渲染 就是网页上面呈现的内容在服务器端就已经生成好了,当用户浏览网页时,服务器把这个在服务端生成 ...
- react ssr 服务端渲染入门
react ssr 服务端渲染入门 前言 前后端同构,作为针对单页应用 SEO 优化乏力.首屏速度瓶颈等问题而产出的解决方案,近来在 react.vue 等前端技术栈中都得到了支持.当我们正打算抛弃传 ...
- 渐进式网络应用程序(PWA)与服务端渲染(SSR)
1.渐进式网络应用程序(PWA) 什么是渐进式网络应用程序? 是一种普通网页或网站架构起来的网络应用程序,但它可以以传统应用程序或原生移动应用程序形式展示给用户.这种应用程序形态视图将目前最为现代化的 ...
- nuxt服务端渲染技术
第5章 网站前台-活动与招聘 学习目标: 掌握NUXT框架的基本使用方法 完成十次方网站前台的搭建 完成十次方网站前台活动模块的功能 完成十次方网站前台招聘模块的功能 1 服务端渲染技术NUXT 1. ...
- Day210.服务端渲染技术NUXT、整合前台主页面、名师、课程静态页面、首页整合banner数据后端部分【创建banner微服务、接口、banner后台前端实现】 -谷粒学院
谷粒学院 服务端渲染技术NUXT 一.服务端渲染技术NUXT 1.什么是服务端渲染 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获 ...
- Vue SSR之服务端渲染
目录 准备工作 开始折腾 1. 首先安装 ssr 支持 2. 增加路由test与页面 3. 在src目录下创建两个js: 4. 修改router配置. 5. 改造main.js 6. entry-cl ...
- 一、服务端渲染技术NUXT
文章目录 一.服务端渲染技术NUXT 1.1 什么是服务端渲染 1.2 什么是NUXT 2.NUXT环境初始化 2.1 下载压缩包 2.2解压 2.3修改package.json 2.4修改nuxt. ...
最新文章
- Nagios监控笔记上
- 福利 | 2022全球敏捷运维峰会:跟技术老将畅聊时下数据库、运维、金融科技应“云”而生的技术创新...
- 简单XML文件C#操作方法
- 学而思的python课怎么样_有在用学而思网校的同学觉得孙墨漪老师怎么样?报她的课值得吗?...
- Python数据类型判断常遇到的坑
- Linux系统信息查看命令大全
- 【二分】最大均值(ybtoj 二分-1-3)
- (笔记)Mysql命令drop database:删除数据库
- JavaScript和Chrome中的SSDP发现
- tensorflow中slim模块api介绍
- 微信模板消息跳转小程序
- 无线传感网学习笔记(6)—— S-MAC协议 和 Z-MAC协议
- C语言:将两个按值有序排列的非空线性链表合并为一个按值有序的线性链表算法
- 【物联网平台篇9】使用MQTT上传图片到OneNET
- 阿里云移动数据分析服务功能与应用场景
- 停止及启动k8s服务
- 计算机编程课程顺序_470道免费的在线编程和计算机科学课程,四月开始
- mod_rewrite模块详解(转)
- 第十一届蓝桥杯C++国赛C题:阶乘约数(唯一分解)
- 动态规划:机器人走n米有多少种走法问题
热门文章
- 2000服务器文件共享,Win2000 Server实现对共享文件的监控
- vue router传参_新手使用vue-router传参时注意事项
- opencv双目视觉标定、匹配和测量 (附代码)
- WindowsAPI详解——GetCurrentDirectory 获得程序当前目录
- html 转word c#,c#操作word类,进行html和word文档的互相转换
- Oracle开启关闭归档日志
- 在unity 中,使用http请求,下载文件到可读可写路径
- 8-[函数]-嵌套函数,匿名函数,高阶函数
- 读书笔记:Information Architecture for the World Wide Web, 3rd Edition 北极熊 第一部分 1-3...
- kafka Failed to send messages after 3 tries 问题解决