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

背景

目前互联网应用呈现方式基本都是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描述或误操作导致安装不同版本等包。平时不用太关注。