1.HTML和CSS

• HTML(HyperText Markup Language)：超文本标记语言

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
  • 标记语言：由标签构成的语言
    • HTML标签都是预定义好的。例如：使用

      标签展示标题，使用展示超链接，使用展示图片，展示视频。

    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

    • CSS(Cascading Style Sheet)：层叠样式表，用于控制页面的样式（表现）。

    • HTML基础结构：

      • HTML标签特点：

        • HTML标签不区分大小写
        • HTML标签的属性值，采用单引号、双引号都可以
        • HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

          1.1 HTML基础标签

          1. 图片标签

             • 图片标签：
             • 常见属性：
               • src: 指定图像的url (可以指定 绝对https://blog.csdn.net/chuanzi_zhou/article/details/路径 , 也可以指定 相对https://blog.csdn.net/chuanzi_zhou/article/details/路径)
               • width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
               • height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)
                 • width 和 height 可以只指定一个，另一个等比缩放
                 • 使用方式：
                   • https://blog.csdn.net/chuanzi_zhou/article/details/路径：
                     • 绝对磁盘https://blog.csdn.net/chuanzi_zhou/article/details/路径：C:\Users\Administrator\Desktop\HTML\img\news_logo.png
                     • 绝对网络https://blog.csdn.net/chuanzi_zhou/article/details/路径：ht/tps://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
                     • 相对https://blog.csdn.net/chuanzi_zhou/article/details/路径：
                       • ./ : 当前目录 , ./ 可以省略的
                       • …/: 上一级目录

                       • 标题标签

                         • 标题标签：

                           -

                         • 效果：h1为一级标题，字体最大；h6为六级标题，字体最小

                         • 使用方式：

                           111111111111
                           111111111111
                           111111111111
                           111111111111
                           111111111111
                           111111111111

                         • 水平分页线标签

                           ---

                           • 标签：

                             ---

                           • 效果：水平分页线

                           • 超链接

                             • 标签: 央视网
                             • 属性:
                               • href: 指定资源访问的url
                               • target: 指定在何处打开资源链接
                                 • _self: 默认值，在当前页面打开
                                 • _blank: 在空白页面打开
                                 • 使用方式：AAA

                                 • 视频音频标签

                                   • 标签：
                                     • 属性:
                                       • src: 规定视频的url
                                       • controls: 显示播放控件
                                       • width: 播放器的宽度
                                       • height: 播放器的高度
                                       • 用法：
                                       • 音频标签:
                                         • 属性:
                                           • src: 规定音频的url
                                           • controls: 显示播放控件
                                           • 用法：

                                           • 段落标签

                                             • 段落：
                                               • 用法：

                                                 一个段落

                                               • 文本格式标签

                                                 效果	标签	标签(强调)
                                                 加粗	b	strong
                                                 倾斜	i	em
                                                 下划线	u	ins
                                                 删除线	s	del

                                               • 表格标签

                                                 • 标签：

                                                   • : 用于定义整个表格, 可以包裹多个
                                                     : 表格的行，可以包裹多个

                                                     	: 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为	属性： border：规定表格边框的宽度 width：规定表格的宽度 cellspacing: 规定单元之间的空间 用法： 序号 品牌Logo 品牌名称 企业名称 1 华为 华为技术有限公司 2 阿里 阿里巴巴集团控股有限公司 1.2 CSS CSS引入方法 三种引入方法： 行内样式：在标签内使用style属性，属性值是css属性键值对 用法： 中国新闻网 内嵌样式：定义标签，在标签内部定义css样式，一般写在内 用法： h1 {...} 外联样式：定义标签，通过href属性引入外部css文件，企业常用 用法： 颜色标识 三种表示方式： 关键字：预定义的颜色名 取值：red、green、blue… rgb表示：红绿蓝三原色，每项取值范围：0-255 取值：rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0) 十六进制表示：#开头，将数字转换成十六进制表示 取值：#000000、#ff0000、#cccccc，简写：#000、#ccc 元素选择器 选择器的名字必须是标签的名字 作用：选择器中的样式会作用于所有同名的标签上 用法： 元素名称 { css样式名:css样式值；}-----------p{ color: red; }------- Red... 类选择器 选择器的名字前面需要加上 . 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个 用法： .class属性值 { css样式名:css样式值；}------------.cls{ color: green; }------ Green... id选择器 选择器的名字前面需要加上# 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的） 用法： #id属性值 { css样式名:css样式值；}-------------#p1 { color: blue;}------------- Blue... CSS其他常用属性 text-indent: 设置段落的首行缩进 line-height: 设置行高 text-align: 设置对齐方式, 可取值为 left / center / right font-size: 用来设置字体的大小，单位px不可省略 HTML占位符 在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符（ ；）来生成空格，如果需要多个空格，就使用多次占位符。 那在HTML中，除了空格占位符以外，还有一些其他的占位符，如下： 显示结果 描述 占位符 空格   大于号 > & 和号 & " 引号 " ’ 撇号 ' 1.3 页面布局 盒子模型： 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin） 布局标签： 布局标签：实际开发网页中，会大量频繁的使用 p 和 span 这两个没有语义的布局标签。 标签： 特点： p标签： 一行只显示一个（独占一行） 宽度默认是父元素的宽度，高度默认由内容撑开 可以设置宽高（width、height） 用法：... span标签： 一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高（width、height） 用法：... 布局实现： 需要将body中的新闻标题部分、正文部分使用一个 p 布局标签将其包裹起来，方便通过css设置内容占用的宽度，比如：65%。 通过css为该p设置外边距，auto可以自动计算 1.4 表单标签 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。 表单标签: 表单属性: action: 规定表单提交时，向何处发送表单数据，表单提交的URL。 method: 规定用于发送表单数据的方式，常见为： GET、POST。 GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。 POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。更安全 表单项标签: 不同类型的input元素、下拉列表、文本域等。 input: 定义表单项，通过type属性控制输入形式 type取值 text：默认值，定义单行的输入字段 password：密码字段 radio：单选按钮 checkbox：复选框 file：文件上床按钮 date/time/datetime-local：日期/时间/日期时间 number：数字输入框 emall：邮件输入框 hidden：隐藏域 submit/reset/button：提交/重置/可点击按钮 select: 定义下拉列表，定义列表项 textarea: 定义文本域 用法： 姓名: 密码: 性别: 男 女 爱好: java game sing 图像: 生日: 时间: 日期时间: 邮箱: 年龄: 学历: ----------- 请选择 ----------- 大专 本科 硕士 博士 描述: 2.JavaScript 1.引入方式 内部脚本：将 JS 代码定义在 HTML 页面中 JavaScript代码必须位于标签之间 在HTML文档中，可以在任意地方，放置任意数量的 一般会把脚本置于元素的底部，可改善显示速度 alert("Hello");//可不加分号，但是建议加，好看 外部脚本：JS代码定义在外部 JS 文件中，然后引入 HTML 页面中 外部JS文件中，只包含JS代码，不包含 标签 引入外部js的标签，必须是双标签 BB.js文件-------------alert("Hello");--------------AA.html(同目录下)---------------- 2.基础语法 语法规则： 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的 每行结尾的分号可有可无 大括号表示代码块 注释： 单行注释：// 注释内容 多行注释：/* 注释内容 */ 变量声明： var :声明变量，可以是任意类型 let :只在代码块内生效 const :声明常量，不可修改 声明规则： JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。 变量名需要遵循如下规则： 组成字符可以是任何字母、数字、下划线（_）或美元符号（$） 数字不能开头 建议使用驼峰命名 三种输出语句实例： window.alert() :警告框 document.write() :在HTML输出内容 console.log() :写入浏览器控制台 JS-基本语法 /* window.alert()可缩写为alert("JS"); */、 //var全局变量，作用域大 var a = 10;//let局部变量，局部生效 { //let不能重复定义 let a = "张张"; //let a = "lili"; alert(a);//张张 } //const常量，改变有错但不报错，运行会终止 const pi = 3.14; //pi = 3.15; alert(pi);//3.14 alert(a);//10 //方式一: 弹出警告框 // window.alert(a); // //方式二: 写入html页面中 // document.write(a); //方式三: 控制台输出 console.log(a); 3.数据类型运算符 分为原始类型和引用类型，typeof可以返回变量的数据类型： 数据类型 描述 number 数字（整数、小数、NaN(Not a Number)） string 字符串，单双引皆可 boolean 布尔。true，false null 对象为空 undefined 当声明的变量未初始化时，该变量的默认值是 undefined 0，null，undefined，“”，NaN都理解为false NaN : 表示非数字，不能运算比较 运算符（形如Java）： 注意 = :赋值运算符 == :判断值相等，但会进行类型转化 === :判断值和类型相等，不会进行类型转换 类型转换： parseInt()将其他类型转换为数值类型 流程控制语句if，switch，for等和java保持一致 运算规则 运算符 算术运算符 + , - , * , / , % , ++ , – 赋值运算符 = , += , -= , *= , /= , %= 比较运算符 > , = , 要执行的代码} //要执行的代码} console.log(arr[i]); //1，2，3，4，undefined，50 } arr.forEach(function(e){ console.log(e);//1，2，3，4，50 })//可简写为以下形式 arr.forEach((e)={ console.log(e); }) arr.push(7,8,9); console.log(arr);//1,2,3,4,50,7,8,9，length = 14 splice(2,2); console.log(arr);//1，2，50，7，8，9，length = 12 5.2 String对象 语法格式： 创建方式1： var 变量名 = new String(“…”) ; 创建方式2： var 变量名 = “…” ; 属性方法： 属性： length:字符串长度 方法： charAt()：返回指定位置字符 indexOf()：检索字符串 trim()：去除字符串两边空格 substring()：提取字符串中两个指定的索引号之间的字符 //创建字符串对象 //var str = new String("Hello String"); var str = " Hello String "; console.log(str); //length console.log(str.length);//18 //charAt console.log(str.charAt(4));//l //indexOf console.log(str.indexOf("lo"));//5 //trim var s = str.trim(); console.log(s.length);//12 //substring(start,end) --- 开始索引, 结束索引 (含头不含尾) console.log(s.substring(0,5));//Hello 5.3 JSON对象 自定义对象语法规格： 其语法格式如下： var 对象名 = { 属性名1: 属性值1, 属性名2: 属性值2, 属性名3: 属性值3, 函数名称: function(形参列表){}}; 我们可以通过如下语法调用属性： 对象名.属性名 通过如下语法调用函数： 对象名.函数名() json对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。 语法格式： 其格式如下： { "key":value, "key":value, "key":value} 其中，key必须使用引号并且是双引号，value可以是任意数据类型。 json数据常用于作为前后台交互的数据载体 var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}'; alert(jsonstr.name);//undefined var obj = JSON.parse(jsonstr);//将jsonstr字符串转换为json对象alert(obj.name); alert(JSON.stringify(obj)); 5.4 BOM对象 BOM对象：Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。 提供的对象描述： Window：浏览器窗口对象 Nacigator：浏览器对象 Screen：屏幕对象 History：历史记录对象 Location：地址栏对象 Window对象 属性： history :用于获取history对象 location :用于获取location对象 Navigator :用于获取Navigator对象 Screen :用于获取Screen对象 函数： alert() ：显示带有一段消息和一个确认按钮的警告框。 comfirm() ：显示带有一段消息以及确认按钮和取消按钮的对话框。 setInterval(fn,毫秒值) ：按照指定的周期（以毫秒计）来调用函数或计算表达式。 setTimeout(fn,毫秒值) ：在指定的毫秒数后调用函数或计算表达式。 Location对象：浏览器地址栏对象，常用href属性 属性： href ：获取或设置浏览器的地址信息 5.5 DOM对象 DOM对象：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。 封装的对象分为 Document：整个文档对象 Element：元素对象 Attribute：属性对象 Text：文本对象 Comment：注释对象 获取DOM对象(Element对象，标签) 函数 描述 document.getElementById() 根据id属性值获取，返回单个Element对象 document.getElementsByTagName() 根据标签名称获取，返回Element对象数组 document.getElementsByName() 根据name属性值获取，返回Element对象数组 document.getElementsByClassName() 根据class属性值获取，返回Element对象数组 操作对象： innerHTML : 修改标签内容传入HTML 传智教育 黑马程序员 电影 旅游 游戏 //1. 获取Element元素 //1.1 获取元素-根据ID获取 // var img = document.getElementById('h1'); // alert(img); //1.2 获取元素-根据标签获取 - p // var ps = document.getElementsByTagName('p'); // for (let i = 0; i 5.6 事件 事件绑定： 方式1：通过html标签中的事件属性进行绑定 例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数。 方式2：通过DOM中Element元素的事件属性进行绑定 html中的标签被加载成element对象，可以通过element对象的属性来操作标签的属性。 function on(){ alert("按钮1被点击了..."); } document.getElementById('btn2').onclick = function(){ alert("按钮2被点击了..."); } 常见事件: 事件属性名 说明 onclick 鼠标单击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onload 某个页面或图像被完成加载 onsubmit 当表单提交时触发该事件 onmouseover 鼠标被移到某元素之上 onmouseout 鼠标从某元素移开 3.Vue 1.概述 Vue：构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 MVVM:是Model-View-ViewModel的缩写，有3个单词，具体释义如下： Model: 数据模型，特指前端中通过请求从后台获取的数据 View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据 ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上 使用方式： 1.在区域使用标签引入vue.js文件 2.js代码区定义vue对象 3.在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的 {{message}} //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ message: "Hello Vue" } }) vue常用属性： el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值 data: 用来定义数据模型 methods: 用来定义函数。 2.Vue指令 常用指令： 指令 作用 v-bind 为HTML标签绑定属性值，如设置 href , css样式等 v-model 在表单元素上创建双向数据绑定 v-on 为HTML标签绑定事件 v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染 v-else v-else-if v-show 根据条件展示某元素，区别在于切换的是display属性的值 v-for 列表渲染，遍历容器的元素或者对象的属性 v-bind 和 v-model {索引变量 + 1}} {{变量名}} > 链接1 链接2 年龄经判定,为: 年轻人(35及以下) 中年人(35-60) 老年人(60及以上) 年龄经判定,为: 年轻人(35及以下) 中年人(35-60) 老年人(60及以上) {{addr}} {{index + 1}} : {{addr}} //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ url: "https://www.baidu.com" age: 20 addrs:["北京", "上海", "西安", "成都", "深圳"] }， method:{ handle: function(){ alert("你点我了一下..."); } } }) 3.生命周期 vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示： 状态 阶段周期 beforeCreate 创建前 created 创建后 beforeMount 挂载前 mounted 挂载完成 beforeUpdate 更新前 updated 更新后 beforeDestroy 销毁前 destroyed 销毁后 mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。一般用于页面初始化自动的ajax请求后台数据 mounted声明周期的钩子函数，与methods同级,例： //定义Vue对象 new Vue({ el: "#app", //vue接管区域 data:{ }, methods: { }, mounted () { alert("vue挂载完成,发送请求到服务端") } }) 4.Vue项目开发 对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下： import Vue from 'vue'import App from './App.vue'import router from './router'Vue.config.productionTip = falsenew Vue({ router, render: h => h(App)}).$mount('#app') 上述代码中，包括如下几个关键点： import: 导入指定文件，并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App new Vue(): 创建vue对象 $mount(‘#app’);将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。 router: 路由，详细在后面的小节讲解 render: 主要使用视图的渲染的。 打开App.vue, .vue结尾的都是vue组件。而vue的组件文件包含3个部分： template: 模板部分，主要是HTML代码，用来展示页面主体结构的 script: js代码区域，主要是通过js代码来控制模板的数据来源和行为的 style: css样式部分，主要通过css样式控制模板的页面效果得 {{message}} export default { data(){ return { "message":"hello world" } }} 5.组件库Element 5.1 引入 Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。 链接：https://element.eleme.cn/#/zh-CN 使用方式： 安装ElementUI组件库 在main.js这个入口js文件中引入ElementUI的组件库 import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI); 创建一个vue组件文件，组件名称后缀是.vue，并且在组件文件中编写之前介绍过的基本组件语法， export default {} 5.2 组件 Table表格 组件属性： data: 主要定义table组件的数据模型 prop: 定义列的数据应该绑定data中定义的具体的数据模型 label: 定义列的标题 width: 定义列的宽度 Pagination分页 属性： background: 添加北京颜色，也就是上图蓝色背景色效果。 layout: 分页工具条的布局，其具体值包含sizes, prev, pager, next, jumper, ->, total, slot 这些值 total: 数据的总数量 事件： size-change ： pageSize 改变时会触发 current-change ：currentPage 改变时会触发 Dialog对话框 属性： visible.sync ：是否显示 Dialog visible属性绑定的dialogTableVisble属性一开始默认是false，所以对话框隐藏；然后我们点击按钮，触发事件，修改属性值为true，然后对话框visible属性值为true，所以对话框呈现出来。 Form表单 默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 打开嵌套表格的 Dialog 打开嵌套Form的 Dialog - 立即创建 取消 export default { methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); }, //表单案例的提交事件 onSubmit() { console.log(this.form); //输出表单内容到控制台 this.dialogFormVisible=false; //关闭表案例的对话框 } }, data() { return { //表单案例的数据双向绑定 form: { name: '', region: '', date1: '', date2:'' }, gridData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], dialogTableVisible: false, dialogFormVisible: false, //控制form表单案例的对话框 tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }} 5.异步加载 通过import命令导入axios，代码如下： import axios 'axios'; 页面加载完成，自动加载，使用之前的mounted钩子函数，并且我们需要将得到的员工数据要展示到表格，所以数据需要赋值给数据模型tableData，所以我们编写如下代码： mounted(){ axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list") .then(resp=>{ this.tableData=resp.data.data; //响应数据赋值给数据模型 }); } : 用于自定义列的内容 slot-scope: 通过属性的row获取当前行的数据 tlias 智能学习辅助系统 系统信息管理 部门管理 员工管理 查询 {{scope.row.gender==1?"男":"女"}} 编辑 删除 import axios 'axios'export default { data() { return { tableData: [ ], searchForm:{ name:'', gender:'', entrydate:[] } } }, methods:{ onSubmit:function(){ console.log(this.searchForm); }, handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } }, mounted(){ axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list") .then(resp=>{ this.tableData=resp.data.data; }); }} 6.路由 前端路由：URL中的hash(#号之后的内容）与组件之间的对应关系， vue官方提供了路由插件Vue Router,其主要组成如下： VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件 ：请求链接组件，浏览器会解析成 ：动态视图组件，用来渲染展示与路由https://blog.csdn.net/chuanzi_zhou/article/details/路径对应的组件 原理： VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表; 然后我们页面提供一个组件,用户点击，发出路由请求; 接着我们的VueRouter根据路由请求，在路由表中找到对应的vue组件； 最后VueRouter会切换中的组件，从而进行视图的更新 使用步骤： 在src/router/index.js文件中定义路由表，根据其提供的模板代码进行修改 在main.js中，引入了router功能 路由基本信息配置好了，路由表已经被加载，修改页面按钮为router-link 在内容展示区域即App.vue中定义route-view，作为组件的切换 4.Ajax 1.Ajax Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点： 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。 数据交互作用： 前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上。 异步交互： 在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。 同步： 浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。 异步： 浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。 客户端Ajax请求代码的步骤： 第一步：创建.html的文件，提供如下代码，主要是按钮绑定单击事件，我们希望点击按钮，来发送ajax请求 function getData(){ } 第二步：创建XMLHttpRequest对象，用于和服务器交换数据，也是原生Ajax请求的核心对象，提供了各种方法。代码如下： //1. 创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest(); 第三步：调用对象的open()方法设置请求的参数信息，例如请求地址，请求方式。然后调用send()方法向服务器发送请求，代码如下： //2. 发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();//发送请求 第四步：我们通过绑定事件的方式，来获取服务器响应的数据。 //3. 获取服务响应数据xmlHttpRequest.onreadystatechange = function(){ //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误 if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){ document.getElementById('p1').innerHTML = xmlHttpRequest.responseText; }} 2.Axios Axios是对原生的AJAX进行封装，简化书写。 基本使用： 引入Axios文件 使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下 发送 get 请求 axios({ method:"get", url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"}).then(function (resp){ alert(resp.data);}) 发送 post 请求 axios({ method:"post", url:"http://localhost:8080/ajax-demo1/aJAXDemo1", data:"username=zhangsan"}).then(function (resp){ alert(resp.data);}); axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数： method属性：用来设置请求方式的。取值为 get 或者 post。 url属性：用来书写请求的资源https://blog.csdn.net/chuanzi_zhou/article/details/路径。如果是 get 请求，需要将请求参数拼接到https://blog.csdn.net/chuanzi_zhou/article/details/路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。 data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。 then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。 请求方法别名： Axios还针对不同的请求，提供了别名方式的api,具体如下： 方法 描述 axios.get(url [, config]) 发送get请求 axios.delete(url [, config]) 发送delete请求 axios.post(url [, data[, config]]) 发送post请求 axios.put(url [, data[, config]]) 发送put请求 可以将get请求代码改写成如下： axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => { console.log(result.data);}) post请求改写成如下： axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => { console.log(result.data);})