前端工程化

大家好呀！我是reload。学完了前端三剑客和Vue基础，这次来简单学一下Ajax，以及重点学一下前端工程化。

一、Ajax

1、概述

Ajax（Asynchronous JavaScript And XML），异步的JavaScript和XML。

2、作用

1）数据交换: 通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
2）异步交互: 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等。

注：同步与异步的区别，如下

3、原生Ajax（了解）

二、Axios

1、简述

Axios对原生的Ajax进行了封装，简化书写，快速开发。中文官网：https://www.axios-http.cn/

2、使用步骤

1）步骤如下

2）通过Axios请求方式别名发起get和post请求（推荐）

三、前端工程化

所谓前端工程化，是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

1、概述

1.1 前后端分离开发方式（了解）

1.2 YApi (接口文档管理平台)

1）简述
YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
官网：https://yapi.pro/

使用文档：https://hellosean1025.github.io/yapi/

注册登录进去后如下，会有指引提示，不懂的也可以查看使用文档。

2）演示使用
2.1）添加项目

2.2）添加分类
在添加接口前先添加分类，便于对接口进行管理，比如要对用户的接口进行管理，可以添加一个用户管理的分类，如下。

2.3）添加接口

2.4）编辑完善
添加完成后，点击编辑，编辑如下。

a、请求参数设置

b、返回数据设置
设置返回参数，即将来前端人员在调用这个接口的时候返回数据的格式是怎么样的。可以设置返回一个json格式的数据，如下

并为各字段添加备注信息，完成后点击保存即可

c、点击预览查看

推荐下载一个插件：FeHelper，能够json自动格式化

接口管理好以后，会自动生成一个Mock地址，将来前端人员在测试时就可以直接访问该地址，会自动生成Mock测试数据。

注：Mock 是模拟真实 API 请求的一种方式，广泛应用于对接和测试。

如下，可以看出返回的数据不太好看

可以点击高级Mock，添加我们期望返回的数据。

再次访问Mock地址时，就会按我们添加的期望数据返回测试数据。

因为我设置的是开放的，所有人都能访问该Mock地址，如下

Mock地址：https://yapi.pro/mock/290026/user/getById

2、环境准备

2.1 Vue-cli（Vue脚手架）

1）简述
Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。
2）功能
Vue-cli提供了如下功能

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

依赖环境：Nodejs

2.2 Nodejs安装配置

1）下载安装
官网：https://nodejs.org/en

2）验证Nodejs的环境变量
安装完成后，win+R输入cmd打开命令提示符，输入 node -v，若成功显示版本号，说明安装成功。

3）配置npm的全局安装路径
我的已经配置过了，没有配置的看下面操作即可。搜索框搜索cmd，以管理员的身份打开命令提示符，输入如下命令

1	npm config set prefix "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Node.js"

我的Nodejs安装路径为：C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Node.js，上面根据自己的替换即可。

可能有的人安装之后忘记了自己的安装路径在哪，这里说一下快速查找安装路径的方法，如下图示。

4）切换npm的淘宝镜像

配置淘宝npm镜像，解决模块安装缓慢或者失败的问题，加速资源下载。

以管理员的身份打开命令提示符，输入如下命令

1	npm config set registry https://registry.npmmirror.com

2.3 安装Vue-cli（Vue脚手架）

以管理员的身份打开命令提示符，输入如下命令

1	npm install -g @vue/cli

安装可能需要一些时间，安装好后，输入 vue –version验证，显示版本号即说明安装成功。

3、使用脚手架创建Vue项目

有两种方式创建vue项目，分别是图形化界面和命令行方式创建。这里介绍图形化界面方式创建。

3.2 图形化界面创建

1）在桌面上新建一个文件夹，命名为vue，进入文件夹，在搜索栏上输入cmd敲回车，进入该文件夹的命令提示符。输入 vue ui 调出vue的图形化界面
2）点击创建 ->在此创建新项目

3）下一步 ->选择手动预设 ->下一步 ->开启Router路由

4）下一步 ->选择vue的版本(2.x) ->创建项目 ->创建项目，不保存预设。

上述设置完成后，就会联网创建项目。可以在命令行中看到进度情况，也可以在图形化界面中查看。

创建完成后，如下