前端渲染 vs 后端渲染

最新推荐文章于 2024-01-16 09:51:15 发布

a～你我

最新推荐文章于 2024-01-16 09:51:15 发布

阅读量494

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/x415329/article/details/90270372

前端渲染和后端渲染是现代Web开发中的两种主要技术。在前后端分离的架构下，当后端数据接口未准备好时，前端可以通过模拟假数据（如mock数据或json-server）进行开发。而在过去，所有网页都是由后端完成，这种模式被称为前后端耦合。Node.js项目可以选择使用express-generator快速搭建，并利用中间件（Middleware）进行请求和响应处理，中间件分为应用级、路由级和错误处理级三种类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端渲染 vs 后端渲染

1. 前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染
2. 后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端

	1. 后端模板

		1. ejs
		2. pug( jade )
		3. art-template

现在流行的：前端渲染

问题：当前后端同时进行项目开发是，后端数据接口没有写好，但是前端却需要这个接口，这个时候怎么办？
分析：需要一段数据
解决：模拟假数据（ mock数据 json-server / mock.js ）
以上这种形式叫做：前后端架构分离
很久以前，没有前端岗位的，所有的网页都需要后端完成，那个时候的情况我们称之为：前后端耦合

Node.js做项目的时候，就有两种选择了

 1. 前后端分离 ：后端提供接口，前端渲染
 2. 前后端耦合： 后端渲染

直接借助一个工具来搭建一个Node.js项目，这个工具叫做 express-generator ,这个工具帮助我们实现了express框架

创建express项目的流程

 1. 安装 express-generator
 		$ cnpm i express-generator -g
 2. 创建express 项目
 	$ express -e 项目名称 -e是安装 ejs 模板
 3. 分析目录

 	* package.json 整个项目的依赖配置文件
 	* app.js 是整个项目的入口文件
 	* views/xx.ejs 是整个项目的模板（模板内容是什么，将来页面呈现就是什么）
 	* routes 是整个项目的路由配置文件
 	* public 静态资源文件（img css js )
 	* node_modules 整个项目的依赖包
 	* bin / www 整个项目的服务器配置文件
 4. 启动项目 package.json 中 npm 脚本
 				$ npm run start
 5. 研究项目代码

 	* 入口文件

express 中间件（Middleware）

中间件是一个函数,函数中参数有三个：

request 请求
response 响应
next 请求和响应中间的循环流程

中间件有三种类型
1. 应用级中间件
2. 路由中间件
3. 错误处理中间件