前端和后端如何进行交互?

article/2025/8/27 0:02:45
背景

目前互联网应用呈现方式基本都是app客户端和web端,其次是移动网站和小程序。以app客户端或web端为例子(统一认为前端),前端负责用户的交互与数据收集与展示,数据经后台处理存储在数据库。设计师在参与项目时,一般会注重用户和前端之间的交互,至于前端和后端的交互则经常被认为是技术大大们的工作。虽然数据交互是技术需解决的问题,但是在工作中若不懂这方面的问题在评审会议上经常会被技术们说这实现不了、这个需要接口返、balabala…甚至遇到不靠谱的工程师还需要你提供具体的实现方案等,如果交互设计师了解开发知识甚至在方案中有意识思考这些问题会更符合技术实现的需求,体验更加流畅。

数据交互

用户与前端进行人机交互,触发某个操作,前端会将用户触发的操作转化为相应指令,向服务器请求数据。若网络和服务器正常,服务器会返回数据到前端,用户便能看到操作所引发的结果。

在这里插入图片描述
在这里插入图片描述
前后端之间产生的数据交互将会影响到人机交互,如数据传输遇到网络不稳定或者服务器异常,就要在人机界面体现出来,不然用户不知所措产生焦虑,影响用户体验。这就是为什么交互设计师也要了解数据交互。

前后端的数据交互方式

在这里插入图片描述 ### 主要步骤↓↓↓

  1. 建立连接。
  2. 客户端发送请求(request),
  3. 服务器端响应并生成结果回发。
  4. 服务器端关闭连接,客户端解析并回发响应,恢复页面。

npm介绍

npm: nodejs package manager ,nodejs包(库)管理器。
包管理器:第三库实际情况会复杂,例如程序员写了TCP/IP协议底层库叫A库,程序员B想写关于http库,但从头开发麻烦,程序员B引用了程序员A写的A库,加上自己的代码功能,最终完成http的B库。程序员C引用了B写的http库,最终完成了一个web开发框架C。 A→B→C。 实际情况会更加复杂,每一个人用了多个库,每一库可能又用了另外一些库。
A→B, B库引用A库,B’依赖’A。
npm专门解决nodejs包的上传、下载、安装、解决安装依赖。

使用

npm官方网站 搜索和看文档

  1. 搜索 search 。
    系统终端下 npm search 包名
  2. (重要)安装
    npm install 包名
    可以缩写 npm i 包名
    会在脚本的当前目录下生成’node_modules’文件夹,文件夹下有你安装的包。
    有些包只需要被js文件引用,不需要全局入口,例如 randomint, arrutil。
    优缺点:每一个项目自己的依赖包一个文件夹,项目与项目环境隔离。缺点,需要花时间下载第三方包。

npm install -g 包名 --global 全局。全局安装的包会在C:\Users\Admin\AppData\Roaming\npm 下生成包入口命令,而这个路径已经在nodejs安装时添加到windows环境变量path中,终端直接运行。例如httpserver,tetris。
不同的js项目中可以require全局安装过的包。
缺点:多个引用同一个包版本,但包可能随着时间,代码功能发生了一些变化。为了追踪不同版本,引入版本号1.10.13。
但不同项目可能依赖不同版本,所以最好的方法是一个项目专门一个文件夹放置自己依赖的第三方库。
3. 卸载
npm uninstall 包名 或直接删除node_modules文件夹。
npm uninstall -g 包名
4. 缓存
有时包有问题,卸载了,再装还有问题。一种可能性下载包时由于网络包并不完整,这个包作为npm缓存会在下一次安装时使用。所以重复安装出错时,先清除缓存排除这种可能。

包版本管理 package.json

‘cd [project root]’
‘npm init’
看到向导,一般保持默认回车,生成package.json 依赖描述文件。
作用,如果项目团队合作,别人可以根据此安装安装依赖。

安装
‘npm install [packagename] --save’ 缩写-S 安装并添加到package.json到’依赖’中。不论本地开发还是线上生产都需要。
‘npm install [packagename] --save-dev’ 缩写-D development 安装并添加到package.json 到’开发依赖’ 中。本地开发需要,最终会编译成普通js生产不需要。

每个项目下都有node_modules, 可以会觉得重复安装,如果像node.js但内置包属于全局每次使用就方便。但实际工作老项目、新项目同时开发,如果只有一套环境,就可能一套正常运行另一套不可运行。

生成了package-lock.json ,发现也是依赖描述,但比package.json更加细致,详细列出了安装但包和其依赖包和版本、仓库等信息,跟用户安装在node_modules文件夹等包信息完全一致。作用,防止个别用户不按照package.json描述或误操作导致安装不同版本等包。平时不用太关注。


http://chatgpt.dhexx.cn/article/xUnZJjae.shtml

相关文章

新手入门前端与后端交互案例(HTML+Java+Axios)

需求分析 前端网页向后端发起相应请求,后端响应前端的请求,做出相关操作.如前端发出获取数据库用户表的请求,后端则将用户表的内容返回给前端.简而言之,前端发出对数据库访问的请求,后端需响应结果. 项目结构 后端项目结构 实现步骤 导入相关依赖包 <parent><grou…

web开发中前端页面是如何跟后端服务器数据交互的

后端服务器一般是指servlet容器&#xff0c;用于执行java源程序 常见的网页有html&#xff0c;htm,shtml&#xff0c;asp&#xff0c;aspx&#xff0c;php&#xff0c;jsp等格式 前两个常用于静态网页&#xff0c;后面几个常用于动态网页。 这里前端网页以比较常见的 xx.html…

前端与后端接口的交互案例

一、案例描述 1&#xff0c;前端页面提供用户名&#xff0c;密码输入框。 2&#xff0c;通过Ajax发送请求到后端Serlvet。 3&#xff0c;后端Serlvet处理请求&#xff0c;根据输入的用户名和密码返回给前端不同信息 前端访问后端接口通过后端提供的的URL 二、主要代码 1、前…

前端和后端 数据交互的基本知识

一、首先了解前端、后端、数据三者的关系 1) 前端通常是html&#xff0c;css&#xff0c;js三者构成的页面的总称。运行在客户端。以浏览器为例。 2) 后端是指后端程序。比如java&#xff0c;php等编写的一些服务。用来操作服务器。 3) 数据&#xff0c;数据都存放在服务器上…

前端和后端交互的方式

1.前端开发与后台交互的方式 &#xff08;1&#xff09;form提交 同步请求 &#xff08;2&#xff09;Ajax提交 异步请求 发送json对象 一 、Ajax&#xff1a;异步的javascript和XML 主要优点&#xff1a; 1.异步请求&#xff0c;不妨碍用户浏览页面或者其他操作。 2.局部刷…

树与树的存储结构+二叉树的遍历

树的存储结构&#xff1a; 三序说的是根节点的访问顺序 深度优先遍历(先序、 中序和后序) 沿着上图路径行走: 第一次来到某个结点时访问&#xff0c;所得序列为先序遍历序列; 第二次来到某个结点时访问&#xff0c;所得序列为中序遍历序列; 第三次来到某个结点时访问&#xff0…

2023年最新前端面试题

HTML 一、HTML5标记 <header></header> 头标记<nav></nav> 导航标记&#xff0c;表示页面中导航链接部分<!--main标记在一个网页中只能有一个&#xff0c;主要内容区域要区别--> <main></main> 主要内容标记<secti…

每日一题之二叉树

描述 输入一个整数数组&#xff0c;判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则返回 true ,否则返回 false 。假设输入的数组的任意两个数字都互不相同。 数据范围&#xff1a; 节点数量 0 \le n \le 10000≤n≤1000 &#xff0c;节点上的值满足 1 \le val \le 1…

2021最新最全前端面试题(包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等)

整理了一些前端面试题,希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大,主要针对初中级前端开发工程师。 篇幅过长,大家可以先点赞收藏以后慢慢看。 关于HTML 的title和alt属性有什么区别 alt:图片加载失败时,显示在网页上的替代文字title:鼠标(手机端该属性无…

CSS解决盒模型居中的问题,分分钟搞定!

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

培训前端开发机构,CSS文本样式值

一、简历的准备 简历制作是很重要的一个环节&#xff0c;一份好的简历会给面试官留下很不错的印象&#xff0c;也有助于你顺利通过简历筛选环节。 个人基本信息&#xff1a;主要是姓名&#xff0c;联系方式&#xff0c;邮箱&#xff0c;学历等&#xff1b;技术技能&#xff1…

学习路线图必不可少,CSS字体样式的使用

标签语义化&#xff1a; 语义和默认样式的区别&#xff1a; 默认样式是浏览器设定的一些常用tag的表现形式&#xff1b;语义化的主要目的就是让大家直观的认识标签和属性的用途和作用&#xff1b; 标签语义化作用&#xff1a; 当只有HTML页面时&#xff0c;没有CSS&#xf…

web前端开发自学难吗,CSS颜色基本样式

字节跳动算法题 链表 面试题&#xff1a;反转单向链表 题目需要将一个单向链表反转。思路很简单&#xff0c;使用三个变量分别表示当前节点和当前节点的前后节点&#xff0c;虽然这题很简单&#xff0c;但是却是一道常考题 以下是实现该算法的代码 var reverseList funct…

CSS的浮动属性,终获offer

前言 最近在准备面试&#xff0c;然后复习下之前写过的项目&#xff0c;书籍&#xff0c;笔记&#xff0c;文章。一看很多知识点都没有印象&#xff0c;最可拍的是连自己为了防止忘记写的文章竟然都感觉不是自己写的。有些开始怀疑人生了。 好了&#xff0c;废话少说&#xf…

CSS介绍,这些知识你必须拿下

前言 跳槽&#xff0c;这在 IT 互联网圈是非常普遍的&#xff0c;也是让自己升职加薪&#xff0c;走上人生巅峰的重要方式。那么作为一个普通的Android程序猿&#xff0c;我们如何才能斩获大厂offer 呢&#xff1f; 疫情向好、面试在即&#xff0c;还在迷茫踌躇中的后浪们&…

web开发在线培训,CSS浮动实战

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

CSS浮动实战,你还看不明白?

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

web设计与开发,CSS块元素

一、简历的准备 简历制作是很重要的一个环节&#xff0c;一份好的简历会给面试官留下很不错的印象&#xff0c;也有助于你顺利通过简历筛选环节。 个人基本信息&#xff1a;主要是姓名&#xff0c;联系方式&#xff0c;邮箱&#xff0c;学历等&#xff1b;技术技能&#xff1…

CSS介绍,含面试题+答案

前言 正式学习前端大概 3 年多了&#xff0c;接触前端大概 4 年了&#xff0c;很早就想整理这个书单了&#xff0c;因为常常会有朋友问&#xff0c;前端该如何学习&#xff0c;学习前端该看哪些书&#xff0c;我就讲讲我学习的道路中看的一些书&#xff0c;虽然整理的书不多&a…

CSS全局样式,帮你突破瓶颈

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…