【前端】《手把手带你入门前端》前端的一整套从开发到打包流程, 这篇文章都会教会你；什么是vue，Ajax，Nginx，前端三大件？
文章目录
- web前端概念引入
- 一、前端3大件
- (1)HTML
- 1.基本标签
- 2.超链接标签
- (2)CSS
- 1.CSS引入方法
- 2.基本属性
- 2.css选择器
- (3)JavaScript
- 1.js引入方式
- 2.js基础语法
- 3.js函数
- 4.js对象
- 5.js事件监听
- 二、Vue
- (1)介绍
- (2)常用指令
- (3)生命周期
- 三、Ajax
- (1)介绍：
- (2)同步与异步
- (3)原生Ajax
- (4)Axios
- 四、Nginx打包部署
- (1)Nginx介绍
- (2)打包部署流程
- 五、前端工程化
- (1)前后端分离：
- (2)介绍：
web前端概念引入
1.网页是什么
web网页由各个网页元素比如文字，图片，视频等组成，由程序员编写的前端代码，由浏览器转换后形成。
浏览器中对代码进行渲染的部分，称为浏览器内核。
不同的浏览器，内核不同，对于相同的前端代码解析效果会存在差异
2.web标准
- web标准也称为网页标准，由一些列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责指定。
- 三个组成部分：
- HTML：负责网页的结构（页面元素和内容）
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
- JavaScript：负责网页的行为（交互行为）
还有基于js封装的组件Vue.js以及对于vue封装的element组件
一、前端3大件
HTML：超文本标记语言；
CSS：层叠式样式表
JavaScript：脚本语言
使用文档:w3school 在线教程](https://www.w3school.com.cn/)
(1)HTML
HTML(HyperText Markup Language):超文本标记语言。
-
超文本：除了文字信息，还可以定义图片，音视频等内容
-
标记语言：由标签构成的语言。
HTML标签都是预定好的不能随意定义；并且HTML代码能够在浏览器中运行，标签由浏览器解析；
1.基本标签
(1)标签的特点
-
HTML标签不区分大小写
-
HTML标签属性值单双引号都可以
-
HTML标签语法松散
基本标签种类如下：
(1)结构标签与布局标签
<html><head><title>标题</title></head><body></body>
</html>
//开发中经常使用的没有语义的布局标签
<div></div>
1.一行显示一个
2.宽度默认为父元素的宽度，高度默认由内容展开
3.可以设置宽高
<span></span>
1.一行显示多个
2.宽度和高度默认由内容撑开
3.不可设置宽高
HTML的内容前无论输入多少空格，最后只会显示一个，我们可以用空格占位符 
(2)标题标签
<h1></h1> <!-- h1到h6重要程度依次降低 -->
(3)水平线标签
<hr>
(4)图片标签
<img src="..." width="..." height="...">
<!-- 1.绝对路径：绝对磁盘路径"D:/xxx"、绝对网络路径"https://xxx" -->
<!-- 2.相对路径：从当前文件开始查找。(./当前目录 ；../上级目录) -->
(5)音视频标签
<audio src="..."></audio>
<video src="..."></video>
(6)换行、段落标签
换行：<br>
段落: <p>xxx</p>
(7)文本加粗标签
<b>xxx</b>
<srong>xxx</srong> <!-- 两者效果一样，但是strong有强调意味 -->
(8)表格标签
<table> <!-- 1.table定义表格 --><tr> <!-- 2.tr定义表格的行 --><th></th> <!-- 3.th定义表格一行的字段 --></tr><tr><td></td> <!-- 4.td定义表格一行的内容 --></tr>
</table>
(9)表单标签
<form action="" method="get"> <!-- 1.from定义表单 -->用户名:<input type="text" name="username"> <!-- 2.表单项,必须有name才可以提交 -->
</form>
1.表单属性：
action：表单数据提交的url地址(默认为当前地址)
method:表单提交的方式（get或者post等）
2.表单项：
<input>：通过type属性控制输入形式
<select>：定义下拉列表,其中加入<option>定义列表项
<textarea>：文本域
(10)label标签：
<label><input type="radio" name="gender" value="1">男</label>
label标签能够使得单选按钮与文本‘男’聚焦，点击男也可以选中该选项；
2.超链接标签
<a></a>
1. 属性：
href：指定访问资源的url
target：指定何处打开资源链接(_self默认值，在当前页面打开；__blank:在空白页面打开)
2. CSS属性：
text-decoration：规定添加到文本的修饰，none可以消除默认超链接的下划线。
color：定义文本颜色
(2)CSS
CSS(Cascading Style Sheet)：层叠样式表，用于控制页面的样式；、
1.CSS引入方法
(1)行内样式：
写在标签style属性中
<h1 style="xxx:xx; xxx:xx;">行内样式</h1>属性名:属性值
(2)内嵌样式：
写在style标签中，可以是任意位置，但是规范是把style标签写到head标签中
<style>h1 {xxx:xx;xxx:xx;}
</style>
(3)外联样式：
单独写到一个css文件中，需要使用时用link标签导入
.css文件一中直接写h1 {xxx:xx;
}需要使用的时候引入文件：
<link rel="stylesheet" herf="css文件路径">
2.基本属性
(1)color:
设置文本颜色
| 表示方式 | 表达含义 | 取值 |
|---|---|---|
| 关键字 | 预定义的颜色名 | red、green、blue… |
| rgb表示法 | 红绿蓝三原色，每项取值范围：0-255 | rgb(0,0,0) |
| 十六机制表示法 | #开头，将数字转换成十六机制表示 | #000000、简写：#000 |
十六进制和rgb都是表示红绿蓝混合占比，十六进制前两位为红以此类推；
(2)容器属性：
1.盒子模型
页面中所有的标签页都具有的属性，将内容包裹在其中；
组成为：内容区域content、内边距区域padding、边框区域border、外边距区域margin四个属性
- 内容区域、内边距区域、边框区域三者宽之和为width
- 内容区域、内边距区域、边框区域三者高之和为height
2.属性设置
border:设置边框属性,如1px soild #000 宽高1px 实线 黑色
padding:设置内边距
margin:设置外边距
（如果只需设置一个方位的边框,可以在属性名后-位置：padding-top:10px)
设置的时候指定了四个值，顺序是上右下左（顺时针）；
三个值就是上右下；
两个值就是：第一个值表示上下，第二个值表示左右；
3.案例：
但我们需要一块内容居中，我们可以这样设置：
<div width=60% style="margin=0 auto">
</div>
2.css选择器
CSS选择器用来选择需要设置样式的元素（标签）
主要分类为：
元素选择器，id选择器，类选择器
同时存在：id选择器>类选择器>元素选择器
(3)JavaScript
Javascript是一门跨平台、面向对象的脚本语言。用来控制网页的交互；
JS和java是完全不同的语言，从概念到设计都不同；基础语法类似
JS在1995年由Brendan Eich发明，并于1997年成为ECMA标准
（ECMA：ECMA国际制定了标准化的脚本程序语言ECMAScript，而js是遵循ECMAscript标准的）
1.js引入方式
两种方法:
(1)内部脚本
将JS代码定义在HTML页面中
<script>alert("helloJS")
</script>
在HTML文档中:
1.脚本位置和数量都是任意的；
2.一般脚本位置置于元素的底部，可改善显示速度；
2.
(2)外部脚本
定义在外部JS文件中，此时无需包含
<script srcc="demo.js"></script>
2.js基础语法
(1)书写语句
1.区分大小写：于java一样，变量名、函数名以及其他一切东西都是区分大小写的；
2.每行结尾的分号可有可无(推荐加上)
3.注释方法：单行注释//、多行注释/* */
4.大括号表示代码块
if(count===3){alert(count);
}
(2)输出语句
一共有三种输出语句：
1.使用window.alert()写入警告框
2.使用document.write()写入HTML输出到页面
3.使用console.log()写出浏览器控制台
<scirpt>window.alert("Hello JS");document.write("Hello JS");console.log("Hello JS");
</scirpt>
(3)变量
1.基本用法
JS中使用关键字var（variable的缩写）来声明变量。
JS是一门弱类型语言，变量可以存放不同类型的值。（var a=20；a = “张三”;是合法的）
变量名需要遵循如下规则：
1.组成字符可以是任何字母、数字、下划线_ 或美元符号$
2.数字不能开头
3.建议使用驼峰命名
2.声明关键字区别
CAMAScript6新增了关键字let和const：
var，let，const三者区别
var是全局变量，可以重复定义；
let作用域为当前函数内，不可重复定义；
const作用域为当前代码块，相当于一个常量，一旦声明，常值就不能修改；
(4)数据类型、运算符、流程控制语句
1.数据类型
JS中分为：原始类型和引用类型
（原始类型直接操作值，引用类型操作的是值的引用。）
原始类型：
number：数字（整数、小数、NaN(Not a Number)）
string：字符串、单双引皆可。
boolean：布尔。true、false。
null：对象为空。
undefined：当声明的变量未初始化时，该值默认值是undefined。使用type of a；可以获取a的数据类型
而引用类型就是如对象、数组、函数、日期等值存储在堆内存中，变量值存储的是内存地址；
2.运算符
算数运算符：+ - * / % ++ --
比较运算符：> < >= <= != == ===
逻辑运算符：&& || !
三元运算符：条件表达式?ture_value:false_value
赋值运算符：= += -= *= /= %=
js中有两个等于的比较运算符 和=：
==会进行类型转换，===不会进行类型转换
var a = 10；
a == "10"; //ture
a === "10"; //false
a === 10; //ture
类型转换
1.字符串转数字：如果字面值不是数字，则转为NaN。
parseInt("12"); //12
parseInt("12A54"); //12
parseInt("A12"); //NaN
2.其他类型转为boolean值：
0,NaN,空字符串,undefined 四个为false，其余都为true。
（空字符串是”“ 而空格字符为” “空格字符不为空字符串）
3.流程控制语句
if..else if else..
switch
for
while
do..while
3.js函数
介绍:函数（方法）是被设计为执行特定人物的代码块
定义：JS通过function关键字进行定义，语法为：
//方式1:
function 函数名(参数1,参数2...){//要执行的代码
}
//方式2:
var 函数名 = function(参数1,参数2...){//要执行的代码
}
注意：
1.形式参数不需要类型。（因为JS是弱类型语言）
2.返回值也不需要定义类型，直接在函数内部使用return即可
调用：函数名(参数列表)
(传递可以传递任意数量的参数，但是只会接收对应形参个数；)
4.js对象
将会介绍数组对象，字符串对象，JSON与Obj对象，BOM对象，DOM对象
(1)Array
JS中Array对象用于定义数组
1.定义：
//方式1：
var 变量名 = new Array(元素列表); //var arr = new Array(1,2,3.4);//方式2：
var 变量名=[元素列表]; //var arr=[1,2,3,4];2.属性：
length：设置或返回数组元素的数量。（无值元素也算长度）
3.方法：
| 方法 | 描述 |
|---|---|
| forEach() | 遍历数组中的每个有值元素，并调用一次传入的函数 |
| push() | 将新元素添加到数组的末尾，并返回新的长度 |
| splice() | 从数组中删除元素 |
//forEach
arr.forEach(function(e){ console.log(e);
})
ES6：可以用箭头函数简化
arr.forEach((e)=>{console.log(e);
})
//push
arr.push(7,8,9);
//splice
arr.splice(2,2); //从索引为2的地方开始删除2个元素，然后返回删除后的数组，会改变数组长度
(2)String
定义：
//方式1：
var 变量名 = new String("..."); //var str = new String("abc");//方式2：
var 变量名 = "..."; //var str = "abc";单双引号都一样
属性：
length：字符串长度
方法：
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符 |
| indexOf() | 检索字符串 |
| trim() | 去除字符串两边的空格（不去除中间） |
| substring() | 提取字符串中两个指定的索引号直接的字符 |
//charAt()
let str = "Hello World";
console.log(str.charAt(1)); // 输出: "e"（索引1的字符）//indexOf()
let str = "Hello World, Hello JavaScript";
console.log(str.indexOf("Hello")); // 输出: 0（首次出现的位置）
console.log(str.indexOf("Hello", 5)); // 输出: 13（从索引5开始查找的首次位置）
console.log(str.indexOf("xyz")); // 输出: -1（未找到指定值）//trim()
let str = " Hello World ";
let trimmedStr = str.trim();
console.log(trimmedStr); // 输出: "Hello World"（仅去除首尾空格）//subString()
let str = "JavaScript";// 从索引0提取到索引4（不包含4）
console.log(str.substring(0, 4)); // 输出: "Java"// 省略第二个参数，提取从startIndex到字符串末尾
console.log(str.substring(4)); // 输出: "Script"
(3)JSON
1.介绍
JavaScript Object Notation（JS对象标记法。）
JSON是通过JS对象标记法书写的文本。
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
2.JS中Object对象的定义
var 对象名 = {属性名1：属性值1, 属性名2：属性值2,函数名称：function(形参列表){}
}；
//例子
var user = {name:"TOM",age:18,eat:function(){ //eat(){alert("吃饭");}ES6可以alert("吃饭");}
}
3.JS中JSON的定义
在JS中这样定义出来的JSON本质上是个字符串；
var 变量名 = '{"key1":value1,"key2":"value2"}';//本质上就是字符串，内容为JSON格式数据
//value的值：数组放方括号中，对象放花括号中，字符串在双引号中
4.JS的Obj对象与JSON的互相转换
//JSON字符串转化为JS对象
var jsObject = JSON.parse(userStr);//JS对象转换为JSON字符串
var jsonStr = JSON.stringify(jsObject);
(4)BOM
1.介绍
Browser Object Model
2.组成：
Window：就是当前页面标签下的窗口（以下皆为其属性)
Navigator：就是单曲浏览器及其浏览器内核
Screen：当前的屏幕对象
History：返回上一页和历史记录
Location：地址栏（输入baidu.com的地方）
3.Window使用
浏览器窗口对象
window.alert("hello") //其中window可以省略 alert("hello")
属性：
history,location,navigator,screen
方法：
| 方法 | 作用 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| setlntertval() | 按照指定的周期(毫秒计算)来调用函数或计算表达式 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
3.Location使用
地址栏对象
window.location.属性 或 location.属性
属性：
href：设置或返回完整的URL
location.href = "https://www.abc.com"; //设置herf
(5)DOM
1.介绍
Document Object Model，文档对象模型；
DOM将标记语言的各个部分封装为对应的对象，我们通过操作对应的对象可以做到：
1.改变HTML元素内容
2.改变HTML元素的演示(CSS)
3.堆HTML DOM事件做出反应
4.添加和删除HTML元素
（那么重点就是：获取DOM对象、使用DOM对象的属性和方法）
2.DOM分类
DOM由W3C的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分
(1)Core DOM – 所有文档类型的标准模型
| 对象类型 | 作用域 |
|---|---|
| Document | 整个文档对象 |
| Element | 元素对象 |
| Attribute | 属性对象 |
| Text | 文本对象 |
| Comment | 注释对象 |
(2)XML DOM：xml文档的标准模型
(3)HTML DOM：html文档的标准模型（多了更多对象，比如Image对应标签）
（HTML DOM扩充了更多了DOM对象；每一个对象都有对应的属性和方法能够调用；
3.DOM对象的获取
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取。
Document对象中提供了获取Element元素对象的函数：
//1.根据id值获取，返回单个Element对象
var h1 = document.getElementById('h1');//2.根据标签名获取，放回Element对象数组
var divs = document.getElementByTagName('div');//3.根据标name属性获取，放回Element对象数组
var courses = document.getElementByName('course');//4.根据标class属性获取，放回Element对象数组
var clss = document.getElementByClassName('cls');
当我们需要得到DOM对象后，设置一个文档的样式的时候，我们可以直接使用标签，能够正确识别
//将所有的div标签的内容后面加上：very good(红色字体)
var divs = document.getElementByTagName('div');
for (let i =0; i < divs.length; i++){const div = divs[i];div.innerHTML += "<font color='red'>very good</font>"
}
5.js事件监听
(1)事件绑定
<!-- 方式1：通过HTML标签中的事件属性进行绑定 -->
<input type="button" onclick="on()" value="按钮1"><script>function on(){alert('触发点击事件');}
</script><!-- 方式2：过DOM元素属性绑定定 -->
<input type="button" id="btn" value="按钮2"><script>document.getElementById('btn').onclick=function(){alert('触发点击事件');}
</script>
(2)常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获取焦点 |
| onload | 某个页面或图形完成被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移动到某元素上 |
| onmouseout | 鼠标从某元素移开 |
获得焦点是要点击进入，与鼠标移动到某元素还是有区别；
二、Vue
(1)介绍
Vue是一套前端框架，免除原生JS中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
（框架：是一个半成品软件，一套可重用的、通用的、软件基础代码模型。）
快速入门：
三步：引入Vue.js文件，创建Vue对象并指定接管区域，编写视图时使用v-model进行双向绑定
(1)新建HTML页面，引入Vue.js文件
<script src="js/vue,js"></script>
(2)在JS代码区域，创建Vue核心对象，定义数据模型
<script>new Vue({el:"#app",data:{message:"Hello Vue!"}})
</script>
(3)编写视图
<div if="app"><input type="text" v-mdoel="message">{{message}} <!-- 插值表达式 -->
</div>
插值表达式：
- 形式：{{表达式}}
- 内容可以是：变量、三元运算符、函数调用、算术运算。
(2)常用指令
1.指令概念：指HTML标签上带有V-前缀的特殊属性，不同指令具有不同含义。如：v-if，v-for…
2.常用指令：
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置 href，css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if、v-else-if、v-else | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
3.指令使用示例：
(1)v-bind，v-model
v-bind：为HTML标签绑定属性值，如设置 href，css样式等
v-model：在表单元素上创建双向数据绑定
<!-- 1.v-bind -->
<a v-bind:herf="url">测试</a>
<a :herf="url">测试</a> <!-- v-bind用：代替 --><!-- 2.model -->
<input type="text" v-model="url"><script>new Vue({el:"#app",data:{url:"https://www.aaa.com"}})
</script>
通过v-bind或者v-model绑定的变量，必须在模型中声明
(2)v-on
v-on：为HTML标签绑定事件
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()"> <!-- v-on用@代替 -->
<script>new Vue({el:"#app",data:{//....},methonds:{handle:function(){alert('点击事件');}},})
</script>
(3)v-if,v-show
v-if、v-else-if、v-else：条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show：根据条件展示某元素，区别在于切换的是display属性的值，都会渲染一遍
- v-if
年龄{{age}},经判定为：
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
- v-show
年龄{{age}},经判定为：
<span v-show="age <= 35">年轻人</span>
(4)v-for
v-for：列表渲染，遍历容器的元素或者对象的属性
<div v-for="addr in addrs">{{addr}}</div>
data:{...addrs:['湖南','江西','黑龙江']
}
(3)生命周期
**生命周期：**指一个对象从创建到销毁的整个过程
八个生命周期阶段如下：
每触发一个生命周期，会自动执行一个生命周期方法（钩子）。
| 状态 | 阶段周期 |
|---|---|
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 挂载前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestory | 销毁前 |
| destroyed | 销毁后 |
<script>new Vue({el:"#app",data:{//....},mounted(){console.log("Vue挂载完毕，发送请求获取数据");},methonds:{},})
</script>
vue流程图：
三、Ajax
(1)介绍：
Asynchronous JavaScript And XML，异步的JavaScript和XML
作用：
1.数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
2.异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。如：搜搜联想、用户名是否可用的校验等等
(2)同步与异步
- 同步（Synchronous）：
客户端向服务端发送请求后，会阻塞当前操作流程，必须等待服务端返回响应（无论成功或失败），才能继续执行后续的代码或操作。 - 异步（Asynchronous）：
客户端向服务端发送请求后，不会阻塞当前操作流程，可以立即执行后续的其他代码或操作；当服务端返回响应时，会通过回调函数、事件等方式通知客户端处理结果。
(3)原生Ajax
原生Ajax事指不依赖第三方库，直接使用浏览器内置的XMLHttpRequest对象实现的异步网络请求技术；
他的实现一共有三步：
<script>function getData(){//1.创建XMLHttpRequestvar xmlHttpRequest = new XMLHttpRequset();//2.发送异步请求xmlHttpRequest.open('GET','URL');//创建请求xmlHttpRequest.send(); //发送请求//3.获取服务器响应数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1'),innerHTML = xmlHttpRequest.reposeText;//更新div1处的内容为xmlHttpRequest.reposeText;}}}
</script>
我们可以在下面整个链接查看各个状态码对应的状态：
AJAX - XMLHttpRequest 对象
(4)Axios
Axios对原生的Ajax进行了封装，简化书写，快速开发；
使用方式
无论哪种方式使用Axios，都需要引入Axios的js文件
<script src="js/axios-0.18.0.js"></script>
1.方式1
//(1)Get请求
axios({method:"get",url:"URL"
}).then((result)=>{ //成功回调函数console.log(result.data);
})//(2)Post请求(假设是根据id新增数据)
axios({method:"post",url:"URL",data:"id=1"
}).then((result)=>{console.log(result.data);
})
2.方式2（推荐使用方式2）
//格式：
//请求方法别名
axios.get(url,其余参数)；
axios.post(url,data,其余参数)；
......
//示例：
//(1)Get请求
axios.get("URL").then((result)=>{ //成功回调函数console.log(result.data);
})
//(2)Post请求(假设是根据id新增数据)
axios.post("URL","id=1").then((result)=>{console.log(result.data);
})
3.使用案例：获取数据
<script>new Vue({el:"#app",data:{emps:[]},mounted(){//发送异步请求，加载数据axios.get("URL").then((result)=>{this.emps = result.data.data;})}})</script>
获取data中的data数组；
四、Nginx打包部署
(1)Nginx介绍
Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
官网：nginx
(2)打包部署流程
1.打包vue过程
npm run buid
打包完毕之后会生成一个叫dist的文件夹，里面就是HTML静态资源文件
2.部署
(1)Nginx目录结构如图
(2)部署步骤
1.将打包好的dist目录下面的文件，复制到nginx安装目录的html目录下。
2.双击nginx.exe文件即可启动，Nginx服务器默认占用80端口
Nginx默认占用的80端口如果以及被使用，可以在nginx.conf中修改端口号。(netstat-ano | findStr 80)
五、前端工程化
(1)前后端分离：
我们可以使用API接口管理平台来实现前后端流畅对接。比如APIfox
(2)介绍：
前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
