告别页面刷新：用Ajax实现前后端数据交互（附Element表格组件实战）

一.Ajax1.什么是Ajax概念Asynchronous JavaScript And XML,异步的JavaScript和XML作用数据交换通过Ajax可以在前端html页面中动态的给服务器发送Ajax请求并获取服务器响应的数据html获取到服务器端响应回来的数据之后就可以基于Vue当中的指令来进行数据的渲染展示。异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。注目前前后端交互的主流的数据格式是jason2.同步与异步3.Axios重点含义Axios对原生的Ajax进行封装简化书写快速开发。官网https://www.axios-http.cn/有以下方法可以简化代码推荐二 .前后端分离开发1.介绍2.YApi介绍YApi是高效、易用、且功能强大的api管理平台皆在为开发、产品、测试人员提供更优雅的接口管理服务地址https://yapi.smart-xwork.cn/注现在好像已经打不开了不知道为啥三.前端工程化1.目前的前端开发现状2.Vue脚手架的基本环境介绍Vue-cil是Vue官方提供的一个脚手架用于快速生成一个Vue的项目模板。Vue-cli提供了如下功能统一的目录结构本地部署热部署应用程序的代码变动之后无需再次运行就可以加载最新的程序单元测试集成打包上线依赖环境NodeJS环境下载地址NOde.js中文网之后再进行环境配置并安装脚手架具体配置可看这篇文章2024最新版Node.js下载安装及环境配置教程【保姆级】3.Vue项目简介4.Vue项目开发流程四.Vue组件库Element1.什么是ElementElement是由饿了么团队研发一套为开发者、设计师、产品经理准备的基于Vue2.0的桌面端组件库。组件组成网页的部件例如超链接、按钮、图片、表格、表单、分页条等等。官网Element官网2.Element 入门3.常见组件常见组件表格用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作分页当数据量过多时使用分页分解数据对话框在保留当前页面状态的情况下告知用户并承载相关操作表单由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据注基本上就是需要什么组件就去官网找到组件的源代码然后进行复制粘贴操作最后根据自己的需求进行修改即可4.案例案例根据页面原型完成员工管理页面开发并通过Axios完成数据异步加载服务端数据获取地址http://yapi.smart-xwork.cn/mock/169327//emp/list五.Vue路由六.打包部署注意Nginx默认占用80端口号如果80端口号被占用可以在nginx.conf中修改端口号netstat-ano|findStr 80