Web前端开发涉及的一些技术

目录

1.Ajax

2.Axios

3.前端工程化（前后端分离）

4.Vue组件库Element

5.打包部署

---

 Web所涉及的技术几乎都包含在了w3school 在线教程中，有任何不懂的地方可以在此网站中查找。

1.Ajax

ajax可以动态的发送ajax请求到服务器端去获取数据，html获取到服务器端响应返回的数据后就可以基于vue中的指令来完成对数据的渲染展示了。

下图就是异步交互的体现。网页并没有刷新，但搜索的内容发生了改变。

同步的流程如下，当服务器没有处理完毕，客户端只能一直等待。点击具体的网页就是同步请求，只有等网页完全加载完成了，才能对网页中的内容进行操作。

异步的流程如下，当服务器在进行逻辑处理的的过程中，客户端依然可以进行其他操作。

原生Ajax请求：Ajax核心是XMLHttpRequest对象，现在所有浏览器都支持XMLHttpRequest对象。

 var xhttp = new XMLHttpRequest(); //构造XMLHttpRequest对象
  xhttp.onreadystatechange = function() {
        //当readyState为4，statu为200，就将从服务端响应回的数据填充在对应区域中
    if (this.readyState == 4 && this.status == 200) {s
     document.getElementById("demo").innerHTML = this.responseText;
    }

在官方手册（开头网站）中的部分API如下

原生的Ajax请求比较繁琐，而且还有一些兼容性问题，取而代之的是基于原生的Ajax封装起来的技术，比如Axios

2.Axios

Axios对原生的Ajax进行封装，简化书写，快速开发。官网：Axios中文文档 | Axios中文网

then前的为js中的对象属性，分别是请求方式get/post，请求路径url，如果还需要传递请求参数的话，get方式通过在url后面？key=value的形式传递。post方式的请求参数是在请求体中传递的，在axios中通过data属性来指定传递的请求参数。

.then用于获取服务端响应的数据。这个函数是ajax请求成功后自动调用的函数，称为成功回调函数，其中的result.data里面封装的就是服务器端响应回来的数据。它们都是异步请求。

请求方式的别名如下，[ ]内的为其他需要传递的配置信息，此项按照需求可选可不选。

与上图等价，推荐使用这种方式。

例子：基于Vue和Axios完成数据的动态加载显示

当加载HTML页面时，会自动触发mounted钩子函数，在这个函数中发送异步请求加载数据，将返回的数据赋值给emps。

然后在视图层中基于Vue的指令来渲染展示emps中的列表数据

3.前端工程化（前后端分离）

当我们个人开发web或其他工程时，通常每个功能都是从零开始，组件和功能的复用性不强，并且图片、js文件等都没有规范化的存储路径。在团队协作中，这并不利于项目的维护和管理。

前端工程化：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。Vue官方提供的脚手架工具(Vue - cli)可以帮助开发人员完成前端工程化

混合开发模式：前端代码和后端代码都写在一个工程中，后端开发时需要根据已经开发好的静态html页面进行改造，与服务器端进行交互并完成页面渲染和展示。

因此在开发后端时发现html页面有问题，又要返回前端进行修改。这要求开发人员既熟悉后端又熟悉前端，还不便于管理。并且如果已经开发好了前端(pc端和移动端)，后面要增加小程序端，就要修改原有的代码，不利于拓展。

前后端分离开发：前端后端分别进行开发，两端的开发人员根据接口文档API去规范自己的开发流程，最后进行前后端交互。

部分功能接口文档类似下图，里面还包含请求参数、响应数据等。

开发流程：需求分析--接口定义（API接口文档）--前后端并行开发（遵守规范）--测试（前、后端）--前后端联调测试

根据需求写出一份接口文档，前后端开发人员根据这份文档各自编写前后端程序，完成之后，开发人员各自测试自己的前后端，都没问题后，最后由前端调用后端程序进行联合测试。

4.Vue组件库Element

Element由饿了么前端团队开发并开放源代码，是一个基于 Vue 2.0 的桌面端组件库，它提供了一系列丰富的组件和工具，帮助开发者快速构建高质量的 Vue 应用。

官网：Element - 网站快速成型工具

例子：左侧是html标签定义的一些按钮和表单，右侧为element提供的按钮和表单。

按钮、表格、分页甚至页面的布局等等，这些组件都能在官网中找到，直接ctrl+c、ctrl+v就完事了，十分的方便好用。

Vue路由：要切换不同的组件，就需要用到路由功能。切换组件时，地址栏会发生变化。

发送路由请求后，路由器根据定义好的路由表去查找对应的组件，最后进行展示。

5.打包部署

在前后端分离开发模式中，前端工程（nginx）和后端工程最后要分别部署在对应的服务器上。

对于vue项目的打包，直接build即可，打包的资源会放在dist目录下，把目录下的资源部署在Nginx服务器上就行了。

Nginx 是一款高性能的 HTTP 服务器和反向代理服务器，由俄罗斯程序员 Igor Sysoev 开发并于 2004 年首次发布。它以其轻量级、高性能和低内存消耗而著称，特别适用于处理高并发连接。Nginx 的设计目标是提供高性能、高并发的服务，同时保持较低的系统资源消耗，这使得它在互联网架构中发挥着重要作用    官网:https://nginx.org/

Nginx服务器默认占用80端口号，如果80端口被占用，Nginx就不会成功启动。可以在命令行通过(netstat -ano| findStr 80) 这条指令去查看80端口占用情况。这里被PID为4的进程占用。

如果这个进程是不能被结束的，比如系统进程等，那么我们就修改Nginx的默认端口。在nginx.conf里修改默认端口（80改成90）

启动Nginx服务器之后，这时我们进入http://localhost:90就能访问到在Ningx服务器上部署的前端资源了。