前端渲染和后端渲染

博客介绍了前端渲染和后端渲染的概念,前端通过ajax请求数据用js展示,后端用后端语言和模板发送页面。还提到前后端架构分离和耦合的情况,以及前后端分离时模拟假数据的解决办法。此外,介绍了用express - generator搭建Node.js项目的流程、项目目录结构和启动方式。
  1. 前端渲染是通过ajax请求数据,然后通过js语法将数据展示到页面中,称之为前端渲染
  2. 后端渲染是通过后端语言 + 后端模板( ejs ) 将 页面整个发送给前端
    1. 后端模板
      1. ejs
      2. pug( jade )
      3. art-template

现在流行的: 前端渲染

问题: 当前后端同时进行项目开发是, 后端数据接口没有写y好,但是前端却需要这个接口,这个时候怎么办?
分析: 需要一段数据
解决: 模拟假数据( mock数据 json-server / mock.js )

以上这种形式叫做 : 前后端架构分离

很久以前,没有前端岗位的, 所有的网页都需要后端完成, 那个时候的情况我们称之为: 前后端耦合

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

    1. 前后端分离 :后端提供接口,前端渲染
    2. 前后端耦合: 后端渲染
  2. 直接借助一个工具来搭建一个Node.js项目,这个工具叫做 express-generator ,这个工具帮助我们实现了express框架

  3. 创建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. 研究项目代码

      • 入口文件
<think>首先,用户在问:“我想了解前端代码后端代码的区别请问前端代码与后端代码的区别及各自的功能”,这基于提供的引用(reference)资料。提供的引用包括:-引用[1]:讨论了前端后端的缺失,部署后端,连接数据库等。Vue涉及响应式数据。-引用[2]:前端渲染vs后端渲染的区别。-引用[3]:大前端架构,包括端多样性后端扩展。-引用[4]:前端路由与后端路由的区别。-引用[5]:生成后端请求的方法。用户的问题是直接关于前端代码后端代码的区别及其功能。所以,我需要结构化回答,解释差异各自功能。关键点:-**前端代码**:主要运行在客户端(浏览器或移动应用)。处理用户界面(UI)、用户体验(UX)、用户输入、渲染页面等。使用HTML、CSS、JavaScript、框架如Vue、React等。功能包括显示数据、处理用户事件、与后端通信。-**后端代码**:运行在服务器端。处理业务逻辑、数据库交互、API提供、服务器管理、安全等。使用语言如Python、Java、Node.js,框架如Django、Spring。功能包括存储数据、计算、用户认证。差异:-**运行环境**:前端在客户端,后端在服务器。-**关注点**:前端是用户交互,后端是数据处理。-**通信**:通过HTTP请求(如RESTAPI)交互。-**渲染**:引用[2]提到前端渲染vs后端渲染的区别。前端渲染通过AJAX获取数据渲染后端渲染在服务器生成完整HTML。从引用中提取相关信息:-[1]:提到前端不能直连数据库,需要后端(安全原因)。-[2]:解释了渲染区别。-[3]:谈论大前端扩展到后端,比如Node.js。-[4]:路由的区别(前端处理客户端路由,后端处理服务器路由)。-[5]:自动化生成代码以减少重复工作。系统指令:-必须使用中文回答。-结构化清晰:逐步解释。-引用的内容末尾添加引用标识,如[^1]。-使用行内数学表达式用$...$格式(虽然问题中无数学,但需注意)。-对于独立公式用$$...$$。-生成相关问题在最后。回答结构:1.**介绍**:概述前端后端。2.**主要区别**:-运行位置-功能职责-技术栈-数据交互方式3.**详细功能**:-前端功能-后端功能4.**交互方式**:通过引用解释。5.**结论**:总结差异协同工作。6.**生成相关问题**:基于主题。添加引用:在回答中引用特定点结尾添加[^n],如解释渲染区别时引用[2]。最终,生成相关问题:-例如:1.前端如何与后端通信?2.前端渲染后端渲染的优缺点是什么?3.什么是API?它在前后端交互中起什么作用?保回答真实可靠:基于常识引用。</think> ### 前端代码与后端代码的区别及各自功能 在前端开发中,前端代码主要负责用户界面的呈现交互,而后端代码则负责数据处理、业务逻辑服务器管理。两者的区别主要体现在运行位置、技术栈、功能职责以及数据交互方式上。以下我将逐步解释这些差异各自的具体功能,参考用户提供的引用内容。 #### 1. **运行位置** - **前端代码**:运行在客户端(用户的浏览器或移动设备),例如在网页上显示按钮、文本框或动画。 引用[2]提到,随着前端行业的发展,前端的工作专注于UI渲染,通过JavaScript框架如Vue或React实现用户视图的动态更新[^2]。 - **后端代码**:运行在服务器端(远程服务器或云平台),处理所有用户看不见的后台任务,如与数据库通信或执行计算任务[^1]。 引用[3]指出,大前端架构扩展了前端的范围,但后端代码仍独立于客户端运行,处理核心逻辑[^3]。 #### 2. **功能职责** - **前端代码的主要功能**(专注于用户界面交互): - **渲染用户界面**:将数据可视化到屏幕上,使用HTML/CSS构建布局,结合JavaScript实现动态效果。例如,在Vue中,响应式数据绑定会自动更新UI内容[^1]。 - **处理用户输入**:捕捉点击、表单提交或手势事件,并验证用户数据(如检查邮件格式)。 - **客户端路由管理**:在单页面应用(SPA)中,前端路由负责在不刷新页面的情况下切换视图。 引用[4]解释,前端路由是SPA的核心机制,通过JavaScript管理导航[^4]。 - **与后端通信**:通过HTTP请求(如AJAX或Fetch API)调用后端API,获取或发送数据。 - **后端代码的主要功能**(专注于数据逻辑): - **业务逻辑处理**:实现应用的规则(如用户注册、支付流程),使用Python、Java或Node.js等技术。 - **数据库操作**:连接数据库存储、查询或修改数据(如用户信息)。 引用[1]强调,前端不能直连数据库(因安全风险),需后端负责数据访问[^1]。 - **API提供**:创建RESTful API或其他接口,为前端提供数据服务(例如返回JSON格式的数据)。 - **安全与认证**:管理用户认证、授权攻击防护(如防范SQL注入)。 - **服务器部署**:配置服务器环境资源优化,支持高并发访问[^3]。 #### 3. **技术栈差异** - **前端代码**:常使用HTML/CSS/JavaScript,辅以框架如Vue、React或Angular。Vue等框架结合了组件化设计,可复用代码块,模拟后端概念(如状态管理)[^1]。 - **后端代码**:多用服务器端语言(如Node.js、Python、Java),结合框架如Express、Django或Spring。 引用[3]提到,Node.js的兴起让前端开发者也能处理后端任务(如BFF层),但核心后端代码仍独立[^3]。 #### 4. **数据交互方式** - 前端后端通过 **HTTP 协议**交互:前端发起请求到后端API(如GET/POST方法),后端响应数据或状态码。 例如,前端渲染通过AJAX获取数据,实现UI更新;后端渲染则在服务器生成完整HTML后直接输出[^2]。 - **为什么不直连数据库?** 后端作为中间层,保数据安全逻辑分离。若前端直连数据库,会暴露敏感操作(如密码验证)增加风险[^1]。 #### 5. **协同工作示例** 在一个典型的Web应用中: - 当用户访问网站时,前端代码加载HTML/CSS,创建界面。 - 用户填写表单提交后,前端发送请求给后端API。 - 后端代码处理请求:验证用户数据,存储到数据库,返回成功响应。 - 前端接收响应,更新UI(如显示“注册成功”消息)。 总之,前端代码关注用户体验,后端代码处理数据服务器任务。两者分工明,通过API连接提升效率安全性。现代开发中,“大前端”概念模糊了界限,但本质区别未变:前端是客户端界面层,后端是服务器逻辑层[^3][^5]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值