目录
②、Vue的组件（template\script\style）
3、案例：通过Vue的路由VueRouter完成左侧菜单栏点击切换效果
一、Ajax
1、同步与异步
2、原生Ajax（繁琐）
代码可参考W3School中的参考手册
效果：（查看所有的异步请求，可以点击XHR）
①、写一个简易的Ajax
更多内容可参考：JavaScript之Ajax（一篇入门Ajax就够了）
| function ajax(url) { const p = new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true) xhr.onreadystatechange = () => { if(xhr.readyState === 4){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){ resolve( JSON.parse(xhr.response) ) }else{ reject(new Error('Response error')) } } } xhr.send(null) }) return p } const url = 'text.json' ajax(url).then(res => console.log(res)).catch(err => console.log(err)) |
3、Axios（推荐使用）
①、Axios入门
示例代码：
②、Axios请求方式别名
示例代码：对①的代码简化
③、案例：基于Vue及Axios完成数据的动态加载展示
示例代码：
二、前后端分离开发
1、前后端开发模式
①、前后端混合开发
前后端混合在一块会导致以上问题，十分不方便
②、前后端分离开发（主流模式）
接口文档示例：
前后端分离，根据接口文档共同开发：
如何维护接口文档：在线（团队协作工具）/离线
而接口文档是由产品经理根据页面原型与需求文档分析得来的：
页面原型示例：
③、前后端分离开发流程
2、YAPI（接口文档的管理平台）
YAPI官网： YApi-高效、易用、功能强大的可视化接口管理平台
①、什么是YAPI？
Mock服务指的是：通过YAPI这个平台可以模拟真实接口，生成接口的模拟测试数据，用于前端功能测试（即不用等后端开发完毕，前端就可以通过Mock服务进行功能测试）
②、如何使用YAPI？
分为三步：
点击Mock地址就可以自动生成测试数据：
通过可以设置期望返回值：高级Mock -> 添加期望
之后再次点击Mock地址，生成的数据就会按照期望数据返回：
Ⅰ、添加项目
Ⅱ、添加分类
Ⅲ、添加接口
请求参数设置：
返回数据设置：
三、前端工程化
模块化、组件化、规范化、自动化
主要包括以下三个方面：
1、Vue脚手架环境准备
①、安装NodeJS
Ⅰ、安装过程可参考：NodeJS安装文档.md
Ⅱ、验证NodeJS是否安装成功：
Ⅲ、配置npm的全局安装路径：
| npm config set prefix "E:\Software\Programs\nodejs" |
Ⅳ、检查npm是否配置成功：
Ⅴ、切换npm的淘宝镜像
| npm config set registry https://registry.npm.taobao.org |
②、通过 NodeJS 安装 Vue-cli
Ⅵ、安装Vue-cli：
| npm install -g @vue/cli |
Ⅶ、测试是否安装成功：
2、Vue项目简介
①、Vue项目创建
Ⅰ、在CMD中输入 vue ui，会自动调出Vue的图形化界面
Vue项目管理器，可以在此创建Vue项目
Ⅱ、创建新项目，设置文件夹及项目名：
Ⅲ、选择预设模板：
Ⅳ、选择插件功能：添加路由功能
Ⅴ、配置项目：
Ⅵ、是否保存为预设模板：（不保存）
正在联网下载：
②、Vue项目目录结构
③、Vue项目启动（serve）
打开项目：
④、修改Vue项目端口（vue.config.js）
修改端口号为：7000
再次启动项目：
3、Vue项目开发流程
①、Vue页面的显示过程
render 是一个函数，它的作用就是将 App 当中定义的视图创建出对应的虚拟DOM 元素，然后挂载到 #app 这个区域
②、Vue的组件（template\script\style）
template相当于HTML部分，script就是js部分，style就是css的样式
在Vue项目的开发中，其实main.js以及index.html很少会去操作，主要修改的都是.vue文件
四、Vue组件库Element
官方文档：https://element.eleme.cn/#/zh-CN/component/installation
1、什么是Element？
为什么要学Element？主要是方便和优美
2、Element快速入门
①、安装ElementUI组件库
| npm install [email protected] |
会被安装在node_modules目录下
②、引入ElementUI组件库
打开main.js：
③、定义Vue组件（内容可复制官方文档）
views目录下新建目录（element）：
默认显示根组件（App.vue）中的内容，所以要想显示其它组件，需要在根组件中进行设置：在template中定义element-view标签，下方的import语句就会自动导入
效果展示：
3、常见组件
①、表格（Table）
使用步骤：
Ⅰ、从官网复制代码到 ElementView.vue ：
运行展示：
②、分页组件（Pagination）
步骤同①，也是先从官方文档寻找自己想要的样式，进行复制粘贴：
layout属性：
事件：size-change 与 current-change：
效果展示：
③、对话框组件（Dialog）
相同套路：复制官方文档代码
数据模型：
效果展示：
控制对话框的显示与隐藏：visible.sync="dialogTableVisible"
④、表单组件（Form）
修改复制到的官方文档代码：
效果展示：
补充表单内容：
数据模型：
方法：
通过JSON.stringify()将对象转为字符串
效果演示：
4、案例：根据页面原型完成员工管理页面的开发
实现步骤：
①、创建页面，并完成页面的整体布局规划
Ⅰ、创建EmpView.vue文件，并在根组件中进行声明和导入
Ⅱ、拷贝基本的布局结构
Ⅲ、拷贝样式
Ⅳ、定义数据模型
效果展示：
②、布局中各个组件的实现
Ⅰ、表单组件
template：
数据模型：
效果展示：
Ⅱ、表格加边框
直接添加属性 border 即可
Ⅲ、分页条
template：
数据模型：
效果展示：
③、列表数据的异常加载与渲染展示
Ⅰ、安装Axios：
| npm install axios |
Ⅱ、导入Axios：
在EmpView.vue文件中导入：
Ⅲ、发送异步请求
效果展示：
Ⅳ、解决图片与性别展示（使用插槽 slot-scope）
效果展示：
五、Vue路由
1、前端路由
URL中的hash指的是#号后面的部分，如下图hash为/dept：
2、Vue Router
①、安装vue-router
②、定义路由配置信息（index.js）
如果你要访问的是/emp路径，那么你要导入的就是EmpView.vue组件，/dept同理：
3、案例：通过Vue的路由VueRouter完成左侧菜单栏点击切换效果
示例代码：
在组件的template中的对应位置添加<router-link>标签：
在根组件中添加对应的<router-view>标签：
4、Bug：默认访问路由路径为/
| 问题：由于默认的访问路由路径为/，但我们在index.js中配置的路径只有两个，并不存在/，那么怎么解决这个问题呢？如果你访问/是找不到对应的组件的 |
| 解决办法：很简单！没有就加上 |
六、打包部署
1、如何打包？
效果展示：
打包后的文件：
2、如何部署？（Nginx）
①、将 dist 目录下的文件复制到 nginx 安装目录
②、启动nginx.exe
查错过程：
Ⅰ、查看 80 端口的占用情况：
Ⅱ、检查任务管理器
Ⅲ、更换 nginx 的端口号
config目录 -> nginx.conf：
找到默认端口，将其改为90：
Ⅳ、访问项目
③、扩展：反向代理、负载均衡
反向代理可参考： 实现nginx反向代理（附nginx教程）
负载均衡可参考： Nginx如何优雅的实现负载均衡