Ajax，前端工程化，vue学习

Ajax知识点：

1.作用：数据交换（给服务i其发送请求并获取服务器响应的数据），异步交互（可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术）

2.同步与异步的区别：异步在等待服务器处理时客户端还可以执行其他操作

3.原生Ajax（三步）：创建XMLHttpRequest对象用于服务器交换数据、向服务器发送请求、获取服务器响应数据。（繁琐）

4.Axios（对原生的Ajax进行了封装）使用:引入Axios的js文件、使用Axios发送请求并获取响应结果

成功！

基于Vue及Axios完成数据的动态加载展示：

Vue组件库Element知识点：

1.vue文件由三个部分组成：template编写HTML代码，script编写数据模型和方法，style主要编写css代码。

2.默认情况下展示根组件的内容App.vue，就与要在根组件当中引用

3.常见组件：Table表格，Pagination分页，Dialog对话框，Form表单

4.案例：根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载。

步骤：1.创建页面，完成页面的整体布局规划（页头，菜单栏，主展示区域）。

布局在Element里有Container布局容器，找到需要的复制就行。

2.布局中各个部分的组件实现，也是复制粘贴小改动。

3.列表数据的异步加载，并渲染展示。

首先安装axios,在集成终端中打开，npm install axios;

再在当前页面发起异步请求加载数据，import导入axios;

在vue当中的钩子函数中发送请求，只要vue对象一创建挂在完成，就自动发送请求加载数据。（mounted方法和methods同级！怪不得刚开始表格总是空的）

5.vue路由

前端路由：URL中的hash（#号之后）与组件之间的对应关系。

路由链接组件（router-link）->路由器->路由展示组件(router-view)

首先，定义路由：在router文件夹下的index.js中进行配置信息（path,name等）

其次，给组件添加标签：router-link to="/name"

最后，在App.vue中添加<router-view>标签

6.打包部署

打包：vue-cli-srevic build生成dist文件夹

部署：Nginx 将打包好的dist目录下的文件，复制到nginx安装目录的html目录下

启动：双击启动nginx.exe文件即可（如果端口号被占用可以在nginx.conf中修改端口号）

访问：在浏览器输入localhost:端口号。