JavaWeb——前端之AjaxVue
6. 前后端交互
6.1 Ajax（原生的）
概念： Asynchronous JavaScript And XML（异步的JavaScript和XML）
作用：
- 数据交互：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术
步骤：
- 准备数据地址
- 创建XMLHttpRequest对象：用于和服务器交换数据
- 向服务器发送请求
- 获取服务器响应的数据
6.2 Axios
概念： 对原生的Ajax进行了封装，简化书写，快速开发
步骤：
1）引入Axios的js文件
- <script src = “js/axios-0.18.0.js”></script>
2）使用Axios发送请求，并获取响应结果
3）请求方式别名对上述代码进行改造
- axios.get(url[, config])
- axios.post(url[, config])
- axios.delete(url[, config])
- axios.put(url[, config])
- 例：
7. 前后端分离开发
前后端分离： 各司其职，前端发送请求给后端，后端发送响应给前端，那么他们中间就需要一个规范——接口文档，基于接口文档进行开发
接口文档维护： 在线和离线
接口文档来源： 产品经理的页面原型和需求文档分析
接口文档的管理平台：YAPI
API管理接口
Mock服务——模拟真实接口，返回数据，便于前端测试
8. 前端开发工程化——冗余、不规范
概念： 在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化。
环境：vue-cli
Vue官方提供的一个脚手架，用于快速生成一个Vue项目模板
功能：
- 统一目录结构
- 本地调试
- 热部署：会自己保存刷新页面
- 单元测试
- 单元测试
- 集成打包上线
依赖环境：NodeJS
9. Element
概念： 饿了么团队基于Vue2.0的桌面端组件(组成网页的不见，超链接、图片、表格、表单等)库
命名规则： 驼峰命名
步骤：
- 安装ElementUI组件库（在当前工程目录下），命令行执行npm install element-ui@版本号
- 引入ElementUI组件库（官方文档中找）
- 访问官方文档，复制组件代码，调整
10. 路由
Vue Router：是Vue的官方路由，URL中的hash（#号）与组件之间的对应关系
组成：
VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
<router-link>：请求链接组件，浏览器会解析成<a>
<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
index.js中定义路由，main.js中在创建Vue对象的时候使用路由，HTML中使用<router-link>，引用组件的Vue中使用<router-view>