Ajax学习笔记

1、Ajax

概念：

Asynchronous JavaScript And XML，异步的JavaScript和XML

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

异步交互: 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等等。

同步与异步

原生Ajax

1.准备数据地址

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

Axios

logo：

介绍：

Axios对原生的Ajax进行了封装，简化书写，快速开发

官网：

https://www.axios-htto.cn/

入门：

1.引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>

2.使用Axios发送请求，并获取响应结果

axios({
    method:"get",
    url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result)=>{
    console.log(result.data);
});

请求别名:

axios.get(url[,config])

axios.delete(url[,config])

axios.post(url[,data[,config]])

axios.put(url[,data[,config]])

发送GET请求

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
    console.log(result.data);
});

2、前后端分离开发

前后端混合开发

缺点：

1.沟通成本高

2.分工不明确

3.不便于管理

4.不便于维护扩展

前后端分离开发

当前最为主流的开发模式

YAPI

介绍：

YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务

地址：

http://uapi.smart-xwork.cn

3、前端工程化

前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

环境准备

vue-cli

介绍：

Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板

Vue-cli提供了如下功能：

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

依赖环境：

NodeJS

Vue项目介绍

Vue项目介绍-创建

命令行

vue create vue-project01

图形化界面

vue ui

Vue项目-目录结构

基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

Vue项目开发流程

Vue的组件文件以.vue结尾，每个组件由三个部分组成：

<template> 模板部分，由它生成HTML代码

<script> 控制模板的数据来源和行为

<style> ccs样式部分

4、Vue组件库Element

什么是Element

Element:

是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

组件:

组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。

官网:

https://element.eleme.cn/#/zh-CNListener

快速入门

安装ElementUI组件库（当前工程的目录下），在命令行执行指令

npm install element-ui@2.15.3

引入ElementUI组件库

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

访问官网，复制组件代码，调整

常见组件

5、Vue路由

前端路由：

URL中的hash(#号）与组件之间的对应关系

介绍：

Vue Router是Vue的官方路由

组成：

VueRouter：路由器类，根据路由请求在视图中动态渲染选中的组件

<router-link>：请求链接组件，浏览器会解析成<a>

<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

使用步骤：

1.安装

2.定义路由

6、打包部署

打包

部署

Nginx

介绍:

Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
 

官网:

https://nginx.org/

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

启动：双击nginx.exe文件即可，Nginx服务器默认占用80端口号

注意：Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号

查看端口被谁占用了：（netstat -ano | findStr 80)