第2章 前端Web基础（js、vue+Ajax）

一、JavaScript课程介绍JavaScript简称Js是一门跨平台、面向对象的脚本语言是用来控制网页行为实现页面的交互效果。Javascript和Java是完全不同的语言不论是概念还是设计。但是基础语法类似。组成:ECMAScript规定了JS基础语法核心知识包括变量、数据类型、流程控制、函数、对象等。BOM浏览器对象模型用于操作浏览器本身如页面弹窗、地址栏操作、关闭窗口等。DOM文档对象模型用于操作HTML文档如改变标签内的内容、改变标签内字体样式等。ECMA:ECMA国际(前身为欧洲计算机制造商协会)制定了标准化的 脚本程序设计语言 ECMAScript这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的(ES2024是最新版本)二、核心语法1、引入方式1内部脚本将JS代码定义在HTML页面中JavaScript代码必须位于script/script标签之间在HTML文档中可以在任意地方放置任意数量的script一般会把脚本置于body元素的底部可改善显示速度body !-- 页面内容 -- script alter(Hello World); /script /body2外部脚本将JS代码定义在外部JS文件中然后引入到HTML页面中alter(Hello World); script src js/demo.js/script2、变量和常量JS中用let关键字来声明变量弱类型语言变量可以存放不同类型的值。变量名需要遵循如下规则只能用字母、数字、下划线_、美元符号$组成且数字不能开头变量名严格区分大小写如Name和NAME是不同的变量不能使用关键字如let、var、if、for等JS中用CONST关键字来声明常量。一旦声明常量的值就不能改变不可以重新赋值。script //常量 const PI3.14; PI3.5; console.log(PI); /script3、输出语句script //变量 let A20; aHello; alert(a);//弹出框 const.log(a);//输出到控制台 document.write(a);//输出到body /scriptwindow.alert():弹出警告框【使用频次较高】console.log():写入浏览器控制台【使用频次较高】document.write():向HTML的body内输出内容4、数据类型javascript的数据类型分为基本数据类型和引用数据类型对象。(1)基本数据类型number数字整数、小数、NaN(Not a Number))boolean:布尔。truefalsenull对象为空。javascript是大小写敏感的因此null、Null、NULL是完全不同的undefined:当声明的变量未初始化时该变量的默认值是undefinedstring字符串单引号、双引号、反引号皆可推荐使用单引号使用typeof运算符可以获取数据类型script let a 20; alert(typeof a);//获取数据类型 /script(2模板字符串语法反引号英文输入模式下按键盘的TAB键上方波浪线~那个键内容拼接变量时使用${}包住变量script let name Tom; let age 18; console.log(大家好我是新入职的name今年age岁了请多多关照; console.log(大家好我是新入职的${name}今年${age}岁了请多多关照; /script5、函数介绍函数function是被设计用来执行特定任务的代码块方便程序的封装复用。1具名函数定义JavaScript中的函数通过function关键字进行定义语法为function functionName(参数1参数2···){ //要执行的代码 } function add(a,b){ return a b; } let result add(10,20); alert(result);注意 由于JS是弱类型语言形参、返回值都不需要指定类型。在调用函数时实参个数与形参个数可以不一致但是建议一致。2匿名函数匿名函数是指一种没有名称的函数可以通过两种方式定义函数表达式和箭头函数。//函数表达式 let add function(a,b){ return a b; } //箭头函数 let add (a,b) { return a b; }匿名函数定义后可以通过变量名直接调用。let result add(10,20); alert(result);5、自定义对象let 对象名 { 属性名1: 属性值1, 属性名2: 属性值2, 属性名3: 属性值3, 方法名: function (形参列表) {} } let user { name: Tom, age: 20, gender: 男, sing: function () { alert(悠悠的唱着最炫的民族风) } } let user { name: Tom, age: 20, gender: 男, sing() { alert(悠悠的唱着最炫的民族风) } }对象名.属性名; 对象名.方法名(); console.log(user.name); user.sing();定义对象时尽量不要使用箭头函数this指向父级Windows6、JSON概念JavaScript Object NotationJavaScript对象标记法 (JS对象标记法书写的文本 ) 。由于其语法简单层次结构鲜明现多用于作为数据载体在网络中进行数据传输。两个方法script //3. JSON - JS对象标记法 let person { name: itcast, age: 18, gender: 男 } alert(JSON.stringify(person)); //js对象 -- json字符串 let personJson {name: heima, age: 18}; alert(JSON.parse(personJson).name); /script1JSON格式特点?json格式的文本所有的key必须使用双引号引起来2JSON对象的两个方法?JSON.parse: 将json字符串转为js对象JSON.stringify: 将js对象转为json字符串7、DOMDOM操作核心思想将网页中所有的元素当做对象来处理。标签的所有属性在该对象上都可以找到操作步骤获取要操作的DOM元素对象操作DOM对象的属性或方法查文档或AI)获取DOM对象根据CSS选择器来获取DOM元素获取匹配到的第一个元素document.querySelector(选择器)根据CSS选择器来获取DOM元素获取匹配到的所有元素document.querySelectorAll(选择器)注意得到的是一个NodeList节点集合是一个伪数组有长度、有索引的数组案例body h1 idtitle111111/h1 h122222/h1 h133333/h1 script //1. 修改第一个h1标签中的文本内容 //1.1 获取DOM对象 // let h1 document.querySelector(#title1); //let h1 document.querySelector(h1); // 获取第一个h1标签 let hs document.querySelectorAll(h1); //1.2 调用DOM对象中属性或方法 //修改h1的第0号元素的内容 hs[0].innerHTML 修改后的文本内容; /script /body三、事件监听什么是事件什么是事件监听事件HTML事件是发生在HTML元素上的事情。比如 按钮被点击、鼠标移动到元素上、按下键盘按键事件监听JavaScript可以在事件触发时就立即调用一个函数做出响应也称为事件绑定或注册事件。1、语法语法事件源.addEventListener(事件类型事件触发执行的函数);事件监听三要素事件源哪个dom元素触发了事件要获取dom元素事件类型用什么方式触发比如鼠标单击click事件触发执行的函数要做什么事body input typebutton idbtn1 value点我一下试试1 input typebutton idbtn2 value点我一下试试2 script //事件监听 - addEventListener (可以多次绑定同一事件) document.querySelector(#btn1).addEventListener(click, () { console.log(试试就试试~~); }); document.querySelector(#btn1).addEventListener(click, () { console.log(试试就试试22~~); }); //事件绑定-早期写法 - onclick (如果多次绑定同一事件, 覆盖) - 了解 document.querySelector(#btn2).onclick () { console.log(试试就试试~~); } document.querySelector(#btn2).onclick () { console.log(试试就试试22~~); } /script /body区别on方式会被覆盖addEventListener方式可以绑定多次拥有更多特性推荐使用2、常见事件script //通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法) // 1. 获取所有的tr标签 let trs document.querySelectorAll(tr); // 2. 为每一个tr标签添加事件监听 for(let i 0; i trs.length; i){ trs[i].addEventListener(mouseenter, function(){ // mouseenter 鼠标进入 trs[i].style.backgroundColor #f2e2e2; }); trs[i].addEventListener(mouseleave, function(){ // mouseleave 鼠标离开 trs[i].style.backgroundColor #fff; }) } /scriptclick鼠标点击mouseenter: 鼠标移入mouseleave: 鼠标移出keydown键盘按下触发keyup: 键盘抬起触发focus获得焦点触发blur: 失去焦点触发input用户输入时触发submit: 表单提交时触发!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleJS-事件-常见事件/title /head body form action styletext-align: center; input typetext nameusername idusername input typetext nameage idage input idb1 typesubmit value提交 input idb2 typebutton value单击事件 /form brbrbr table width800px border1 cellspacing0 aligncenter tr th学号/th th姓名/th th分数/th th评语/th /tr tr aligncenter td001/td td张三/td td90/td td很优秀/td /tr tr aligncenter idlast td002/td td李四/td td92/td td优秀/td /tr /table script //click: 鼠标点击事件 document.querySelector(#b2).addEventListener(click, () { console.log(我被点击了...); }) //mouseenter: 鼠标移入 document.querySelector(#last).addEventListener(mouseenter, () { console.log(鼠标移入了...); }) //mouseleave: 鼠标移出 document.querySelector(#last).addEventListener(mouseleave, () { console.log(鼠标移出了...); }) //keydown: 某个键盘的键被按下 document.querySelector(#username).addEventListener(keydown, () { console.log(键盘被按下了...); }) //keyup: 某个键盘的键被抬起 document.querySelector(#username).addEventListener(keyup, () { console.log(键盘被抬起了...); }) //blur: 失去焦点事件 document.querySelector(#age).addEventListener(blur, () { console.log(失去焦点...); }) //focus: 元素获得焦点 document.querySelector(#age).addEventListener(focus, () { console.log(获得焦点...); }) //input: 用户输入时触发 document.querySelector(#age).addEventListener(input, () { console.log(用户输入时触发...); }) //submit: 提交表单事件 document.querySelector(form).addEventListener(submit, () { alert(表单被提交了...); }) /script /body /html3、常见事件优化-JS模块化新建utils.js包工具包export function printLog(msg){//暴露出去 console.log(msg); }新建eventDemo.js包抽取到js文件中import { printLog } from ./utils.js; //click: 鼠标点击事件 document.querySelector(#b2).addEventListener(click, () { printLog(我被点击了...); }) //mouseenter: 鼠标移入 document.querySelector(#last).addEventListener(mouseenter, () { printLog(鼠标移入了...); }) //mouseleave: 鼠标移出 document.querySelector(#last).addEventListener(mouseleave, () { printLog(鼠标移出了...); }) //keydown: 某个键盘的键被按下 document.querySelector(#username).addEventListener(keydown, () { printLog(键盘被按下了...); }) //keyup: 某个键盘的键被抬起 document.querySelector(#username).addEventListener(keyup, () { printLog(键盘被抬起了...); }) //blur: 失去焦点事件 document.querySelector(#age).addEventListener(blur, () { printLog(失去焦点...); }) //focus: 元素获得焦点 document.querySelector(#age).addEventListener(focus, () { printLog(获得焦点...); }) //input: 用户输入时触发 document.querySelector(#age).addEventListener(input, () { printLog(用户输入时触发...); }) //submit: 提交表单事件 document.querySelector(form).addEventListener(submit, () { alert(表单被提交了...); })原html中!-- typemodule 模块化JS -- script src./js/eventDemo.js typemodule/script四、Vue介绍Vue是一款用于构建用户界面的渐进式的JavaScript框架。官方Vue.js - 渐进式 JavaScript 框架 | Vue.js框架就是一套完整的项目解决方案用于快速构建项目。优点大大提升前端项目的开发效率。缺点需要理解记忆框架的使用规则。参照官网五、Vue快速入门准备引入Vue模块官方提供创建Vue程序的应用实例控制视图的元素准备元素(div)被Vue控制数据驱动视图准备数据通过插值表达式渲染页面body div idapp !-- 通过插值表达式渲染页面 -- h1{{message}}/h1 h1{{count}}/h1 /div script typemodule//说明是引入的是模块化的js import { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;//引入Vue模块官方提供 createApp({//创建Vue程序的应用实例控制视图的元素 data() {//准备数据 return { message: Hello Vue, count: 100 } } }).mount(#app);//准备元素(div)被Vue控制 /script /body六、Vue常用指令指令HTML标签上带有v-前缀的特殊属性不同的指令具有不同的含义可以实现不同的功能。展示1、-v-for作用列表渲染遍历容器的元素或者对象的属性语法tr v-for(item,index) in items:keyitem.id {item}}/tr参数说明items为遍历的数组item为遍历出来的元素index为索引/下标从0开始可以省略省略index语法v-foritem in itemskey:作用给元素添加的唯一标识便于vue进行列表项的正确排序复用提升渲染性能推荐使用id作为key唯一不推荐使用index作为key会变化不对应注意 遍历的数组必须在data中定义要想让哪个标签循环展示多次就在哪个标签上使用v-for指令。在script标签里面引入Vue并创建datascript typemodule import { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js createApp({ data() { return { searchForm: { //封装用户输入的查询条件 name: , gender: , job: }, empList: [ { id: 1, name: 谢逊, image: https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg, gender: 1, job: 1, entrydate: 2023-06-09, updatetime: 2024-09-30T14:59:38 }, { id: 2, name: 韦一笑, image: https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg, gender: 1, job: 1, entrydate: 2020-05-09, updatetime: 2024-09-01T00:00:00 }, { id: 3, name: 黛绮丝, image: https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg, gender: 2, job: 2, entrydate: 2021-06-01, updatetime: 2024-09-01T00:00:00 } ] } },在tbody的tr标签里面写入v-for指令并循环遍历渲染展示表格内容!-- 表格主体内容 -- tbody tr v-for(e, index) in empList :keye.id td{{index 1}}/td td{{e.name}}/td td{{e.gender 1?男 : 女}}/td !-- 插值表达式{{}}是不能出现在标签内部 -- tdimg classavatar v-bind:srce.image :alte.name/td !-- v-if: 控制元素的显示与隐藏 -- td span v-ife.job 1班主任/span span v-else-ife.job 2讲师/span span v-else-ife.job 3学工主管/span span v-else-ife.job 4教研主管/span span v-else-ife.job 5咨询师/span span v-else其他/span /td !-- v-show: 控制元素的显示与隐藏 -- !-- td span v-showe.job 1班主任/span span v-showe.job 2讲师/span span v-showe.job 3学工主管/span span v-showe.job 4教研主管/span span v-showe.job 5咨询师/span /td -- td{{e.entrydate}}/td td{{e.updatetime}}/td td classaction-buttons button typebutton编辑/button button typebutton删除/button /td /tr /tbody2、-v-bind作用动态为HTML标签绑定属性值如设置hrefsrcstyle样式等。语法v-bind:属性名属性值img v-bind:srcitem.imagewidth30px简化:属性名属性值img :srcitem.imagewidth30px注意 动态的为标签的属性绑定值不能使用插值表达式得使用v-bind指令。且绑定的数据必须在data中定义。将img标签的插值表达式改为v-bind形式tdimg class{{avatar}} src{{e.image}} alt{{e.name}}/td !--改为-- tdimg classavatar v-bind:srce.image :alte.name/td3、-v-if与-v-show作用这两类指令都是用来控制元素的显示与隐藏的v-if语法v-if表达式表达式值为true显示false隐藏原理基于条件判断来控制创建或移除元素节点条件渲染场景要么显示要么不显示不频繁切换的场景其它可以配合v-else-if/v-else进行链式调用条件判断v-show语法v-show表达式表达式值为true显示false隐藏原理基于CSS样式display来控制显示与隐藏场景频繁切换显示隐藏的场景注意v-else-if必须出现在v-if之后可以出现多个v-else必须出现在v-if/v-else-if之后。!-- v-if: 控制元素的显示与隐藏 -- !-- 当元素不频繁展示和隐藏时使用v-if -- td span v-ife.job 1班主任/span span v-else-ife.job 2讲师/span span v-else-ife.job 3学工主管/span span v-else-ife.job 4教研主管/span span v-else-ife.job 5咨询师/span span v-else其他/span /td !-- v-show: 控制元素的显示与隐藏 -- !-- 当元素频繁展示和隐藏时使用v-show -- !-- td span v-showe.job 1班主任/span span v-showe.job 2讲师/span span v-showe.job 3学工主管/span span v-showe.job 4教研主管/span span v-showe.job 5咨询师/span /td --实际上v-if只会渲染使用到的元素v-show会渲染所有元素使用display展示或隐藏我们在控制台可以看到这样的4、-v-model与-v-on作用在表单元素上使用双向数据绑定。可以方便的获取或设置表单项数据双向数据绑定数据模型和视图的数据发生变化会互相影响语法v-model变量名注意v-model中绑定的变量必须在data中定义。封装用户输入的查询条件在data的返回值处emplist的平级处searchForm: { //封装用户输入的查询条件 name: , gender: , job: },渲染搜索表单form classsearch-form label forname姓名/label input typetext idname namename v-modelsearchForm.name placeholder请输入姓名 label forgender性别/label select idgender namegender v-modelsearchForm.gender option value/option option value1男/option option value2女/option /select label forposition职位/label select idposition nameposition v-modelsearchForm.job option value/option option value1班主任/option option value2讲师/option option value3学工主管/option option value4教研主管/option option value5咨询师/option /select button typebutton v-on:clicksearch查询/button button typebutton clickclear清空/button /form查询的操作button typebutton v-on:clicksearch查询/button button typebutton clickclear清空/button查询的方法在data平级处methods: { search(){ //将搜索条件, 输出到控制台 //this代表当前Vue应用实例获取其searchForm属性 console.log(this.searchForm); }, clear(){ //清空表单项数据 this.searchForm {name:, gender:, job:} } },七、Ajax入门1、Ajax介绍Asynchronous JavaScript And XML异步JavaScript和XML。作用数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。XML:英语Extensible Markup Language可扩展标记语言本质是一种数据格式可以用来存储复杂的数据结构。同步和异步2、Axios介绍Axios对原生的Ajax进行了封装简化书写快速开发。官网Axios中文文档 | Axios中文网1普通请求方式步骤引入Axios的js文件参照官网使用Axios发送请求并获取响应结果method请求方式GET/POSTurl请求路径data请求数据(POST)params:发送请求时携带的url参数如...?keyvalaxios发送GET请求和POST请求body input typebutton value获取数据GET idbtnGet input typebutton value操作数据POST idbtnPost script srcjs/axios.js/script script //发送GET请求 document.querySelector(#btnGet).addEventListener(click, () { //axios发起异步请求 axios({ url: https://mock.apifox.cn/m1/3083103-0-default/emps/list, method: GET }).then((result) { //成功回调函数 console.log(result.data); }).catch((err) { //失败回调函数 console.log(err); }) }) //发送POST请求 document.querySelector(#btnPost).addEventListener(click, () { //axios发起异步请求 axios({ url: https://mock.apifox.cn/m1/3083103-0-default/emps/update, method: POST, data: id1 //POST请求方式 , 请求体 }).then((result) { //成功回调函数 console.log(result.data); }).catch((err) { //失败回调函数 console.log(err); }) }) /script /body2请求方式别名推荐格式axios.请求方式( url [ ,data [ ,config]])body input typebutton value获取数据GET idbtnGet input typebutton value操作数据POST idbtnPost script srcjs/axios.js/script script //发送GET请求 document.querySelector(#btnGet).addEventListener(click, () { // get方法.thenc快捷生成回调函数 axios.get(https://mock.apifox.cn/m1/3083103-0-default/emps/list).then((result) { console.log(result.data); }); // 先输出再输出结果 console.log(); }) //发送POST请求 document.querySelector(#btnPost).addEventListener(click, () { axios.post(https://mock.apifox.cn/m1/3083103-0-default/emps/update, id1).then((result) { console.log(result.data); }); }) /script /body只是换了一个写法方式具体区别如下//axios发起异步请求 axios({ url: https://mock.apifox.cn/m1/3083103-0-default/emps/list, method: GET }).then((result) { //成功回调函数 console.log(result.data); }).catch((err) { //失败回调函数 console.log(err); }) // get方法.thenc快捷生成回调函数 axios.get(https://mock.apifox.cn/m1/3083103-0-default/emps/list).then((result) { console.log(result.data); });//axios发起异步请求 axios({ url: https://mock.apifox.cn/m1/3083103-0-default/emps/update, method: POST, data: id1 //POST请求方式 , 请求体 }).then((result) { //成功回调函数 console.log(result.data); }).catch((err) { //失败回调函数 console.log(err); }) axios.post(https://mock.apifox.cn/m1/3083103-0-default/emps/update, id1).then((result) { console.log(result.data); });八、Ajax案例-动态加载数据重点关注方法methods使用async/await将异步函数转为同步函数。这样可读性强便于维护注意await关键字只在async函数内有效await关键字取代then函数等待获取到请求成功的结果值。script srcjs/axios.js/script script typemodule import { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js createApp({ data() { return { searchForm: { //封装用户输入的查询条件 name: , gender: , job: }, empList: [] } }, //方法 methods: { async search(){ // 发送ajax请求获取数据 // axios.get(https://web-server.itheima.net/emps/list?name${this.searchForm.name}gender${this.searchForm.gender}job${this.searchForm.job}).then((result) { // this.empList result.data.data; // }) // console.log(); // 使用async/await将异步函数转为同步函数 let result await axios.get(https://web-server.itheima.net/emps/list?name${this.searchForm.name}gender${this.searchForm.gender}job${this.searchForm.job}); this.empList result.data.data; }, clear(){ //清空表单项数据 this.searchForm {name:, gender:, job:} this.search() } }, //钩子函数 mounted(){ //页面加载完成之后发送ajax请求获取数据。使页面加载完毕后就有数据看 this.search() } }).mount(#container) /script九、Ajax案例-页面加载前查询Vue生命周期Vue生命周期生命周期指一个对象从创建到销毁的整个过程。生命周期的八个阶段每触发一个生命周期事件会自动执行一个生命周期方法(钩子)。生命周期的每个阶段当页面加载完成之后发送ajax请求获取数据。使页面加载完毕后就有数据看在data、methods平级的位置创建钩子函数只需记住这一个生命周期函数即可mounted() { //页面加载完成之后发送ajax请求获取数据。使页面加载完毕后就有数据看 this.search(); },