JavaWeb零基础学习Day3——Ajax & Element

一.Ajax

1.什么是Ajax

概念：Asynchronous JavaScript And XML,异步的JavaScript和XML

作用：

• 数据交换：通过Ajax可以在前端html页面中动态的给服务器发送Ajax请求，并获取服务器响应的数据，html获取到服务器端响应回来的数据之后，就可以基于Vue当中的指令来进行数据的渲染展示。
• 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

注：目前前后端交互的主流的数据格式是jason

2.同步与异步

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组件库Element

1.什么是Element

Element：是由饿了么团队研发，一套为开发者、设计师、产品经理准备的基于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）