【Web开发手礼】探索Web开发的秘密(十五)-Vue2(2)AJAX、前后端分离、前端工程化

主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装!!!

目录

前言

AJAX

​原生Ajax

 Axios

Axios入门 

 案例

前后端分离开发

YApi 

​前端工程化

环境准备

总结


前言

主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装!!!


AJAX

概念:Asynchronous JavaScript And XML,异步的JavaScript和XML。

作用:

  • 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
  • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。

 原生Ajax

  1. 准备数据地址:http://yapi.smart-xwork.cn/mock/169327/emp/list
  2. 创建XMLHttpRequest对象:用于和服务器交换数据
  3. 向服务器发送请求
  4. 获取服务器响应数据
<body><input type="button" value="获取数据" onclick="getData()"><div id="div1"></div></body><script>function getData(){//1. 创建XMLHttpRequest var xmlHttpRequest  = new XMLHttpRequest();//2. 发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();//发送请求//3. 获取服务响应数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}}}
</script>

 a'xio过于繁琐!!!

 Axios

  • 介绍:Axios 对原生的Ajax进行了封装,简化书写,快速开发。
  • 官网: https://www.axios-http.cn/

Axios入门 

官网下载后引入Axios的js文件 

百度网盘下载

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

或者在线引用:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用Axios发送请求,并获取响应结果

axios({method: "get",url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result) => {console.log(result.data);
});
  • method: "get":指定请求的方法为GET,这表示向服务器获取(或者说检索)位于指定URL上的资源,即获取员工列表的操作。
  • url: "http://yapi.smart-xwork.cn/mock/169327/emp/list":指定请求的URL,即目标服务器上用于获取员工列表的API接口。
  • then()方法:Axios返回一个Promise对象,该方法用于处理异步操作的结果。当服务器响应成功时,会执行传入的回调函数。
  • result.data:表示从服务器返回的响应数据。在这段代码中,使用console.log()将返回的员工列表数据输出到控制台。
axios({method: "post",url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data: "id=1"
}).then((result) => {console.log(result.data);
});
  • method: "post":指定请求的方法为POST,这表示将向服务器发送一条指定URL的POST请求。
  • url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById":指定请求的URL,即目标服务器上用于删除员工信息的API接口。
  • data: "id=1":指定发送到服务器的数据。在这里,数据是以字符串形式指定的,表示要删除的员工ID是1。Axios会自动将此数据转换为适当的格式(通常是JSON)并发送给服务器。
  • then()方法:Axios返回一个Promise对象,该方法用于处理异步操作的结果。当服务器响应成功时,会执行传入的回调函数。
  • result.data:表示从服务器返回的响应数据。在这段代码中,使用console.log()将返回的数据输出到控制台。

 请求方式别名

  • 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);
});

发送post请求

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {console.log(result.data);
});

 案例

基于Vue及Axios完成数据的动态加载展示

数据准备的url: http://yapi.smart-xwork.cn/mock/169327/emp/list 在页面加载完成后,自动发送异步请求,加载数据,渲染展示页面(性别:1 代表男,2 代表女)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/axios-0.18.0.js"></script><script src="./js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>职位</th><th>入职日期</th><th>最后操作时间</th></tr><tr align="center" v-for="(emp,index) in emps"><td>{{index+1}}</td><td>{{emp.name}}</td><td><img v-bind:src="emp.img" alt="" width="70px" height="50px"></td><td><span v-if="emp.gender == 1">男</span><span v-if="emp.gender == 2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div>
</body>
<script>new Vue({el: '#app',data:{emps: [],},mounted(){//发送异步请求,加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{this.emps = result.data.data;})},})
</script>
</html>

  • mounted()生命周期钩子:在Vue实例挂载后立即执行。
  • axios.get(...).then(...):使用Axios发送GET请求获取员工列表数据。
  • result.data.data:从请求结果中获取实际的员工数据数组,并赋值给emps数组,实现页面的动态渲染。

前后端分离开发

当前最为主流的开发模式:前后端分离

YApi 

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

 前端工程化

环境准备

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

Vue-cli提供了如下功能:

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

依赖环境:NodeJS 

安装NodeJS

 安装 vue-cli

npm install -g @vue/cli


总结

主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/392802.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024华数杯c题题解(一)

目录 原题背景 背景分析 问题一 思路 代码 问题二 思路 代码 原题背景 最近&#xff0c;“city 不 city”这一网络流行语在外国网红的推动下备受关注。随着我国过境免签政策的落实&#xff0c;越来越多外国游客来到中国&#xff0c;通过网络平台展示他们在华旅行的见闻…

出现 No mapping for DELETE/GET等

出现 No mapping for DELETE/GET等 错误一&#xff1a;请求url不对 修改前 如下图可知后端请求url为http://localhost:8080/user/addressBook 运行后控制台出现 发现后端请求url比前端请求url少了/ 改正&#xff1a; 在DeleteMapping后面加上 / DeleteMapping("/&quo…

mysql操作(进阶)

1.数据库约束 数据库自动对数据的合法性进行校验检查的一系列机制&#xff0c;目的是为了保证数据库中能够避免被插入或者修改一些非法数据。 &#xff08;1&#xff09;mysql中提供了以下的约束&#xff1a; a.NOT NULL&#xff1a;指定某列不能为null b.UNIQUE&#xff1…

搭建pxe网络安装环境实现服务器自动部署

目录 配置 kickstart自动安装脚本 搭建dhcp服务 搭建pxe网络安装环境实现服务器自动部署 测试 配置 kickstart自动安装脚本 yum install system-config-kickstart #在rhel7做&#xff0c;rhel9要收费 system-config-kickstart #启动图形制作工具 vim …

工具收集 - tinytask(相当于迷你的按键精灵)

工具收集 - tinytask&#xff08;相当于迷你的按键精灵&#xff09; 简介首页 简介 TinyTask 是一款极简主义的 PC 自动化应用程序&#xff0c;您可以用它来记录和重复操作。顾名思义&#xff0c;它小得令人难以置信&#xff08;仅 36KB&#xff01;&#xff09;&#xff0c;极…

C++第三十一弹---C++继承机制深度剖析(下)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 1.菱形继承及菱形虚拟继承 1.1 单继承 单继承&#xff1a;一个子类只有一个直接父类时称这个继承关系为单继承。 Student的直接父类是Person&#xff…

openai command not found (mac)

题意&#xff1a;mac 系统上无法识别 openai 的命令 问题背景&#xff1a; Im trying to follow the fine tuning guide for Openai here. 我正在尝试遵循 OpenAI 的微调指南 I ran: 我运行以下命令 pip install --upgrade openaiWhich install without any errors.…

干货!如何选择Ai大模型(LLMs)?

过去一年里&#xff0c;大型语言模型&#xff08;LLMs&#xff09;在人工智能界风起云涌&#xff0c;纷纷以突破性的进步拓展生成式人工智能的可能性。新模型层出不穷&#xff0c;令人目不暇接。 这些模型依靠日益增长的参数数量和庞大的数据集进行训练&#xff0c;显著提升了…

redis的key莫名失踪?

背景 在线上环境下&#xff0c;发现redis中key被莫名奇妙的删除了&#xff0c;起初怀疑是key过期但是查询了TTL并没有&#xff0c;在日志上加了删除key操作的打印 但是并没有看到产出这个key的日志记录&#xff0c;而且每次都是这个key被莫名奇妙删除掉&#xff0c;感觉很诡异。…

blender里的辉光

cycle的辉光&#xff0c; 点开支持后期效果 eevee的辉光&#xff0c;直接点bloom就行。 eevee的透明

sqli-labs-master初学者题目练习

Less-1 从源码可以看出id为注入点&#xff0c;且为单引号过滤 使用 闭合 --为注释 原本应该用--‘space’&#xff0c;但-与‘连在一起无法起到注释作用 order by为联合查询——同时查询两张表&#xff0c;但两张表列数必须相同 所有从以上两张图可以看出此表格有三列数据 爆…

防火墙工具iptables应用详解

文章目录 前言一、Netfilter内核二、Netfilter与iptables的关系三、iptables的表与链四、iptables的常用命令与参数五、 iptables使用案例 前言 iptables是Linux系统中一款强大的防火墙工具&#xff0c;它基于Netfilter内核模块&#xff0c;允许管理员定义数据包的转发、过滤和…

了解MVCC

概念 MVCC&#xff0c;全称Multi-Version Concurrency Control&#xff0c;即多版本并发控制&#xff0c;是一种并发控制的方法&#xff0c;维护一个数据的多个版本&#xff0c;使得读写操作没有冲突&#xff0c;快照读为MySQL实现MVCC提供了一个非阻塞读功能。MVCC的具体实现…

超级会员卡积分商城小程序多功能源码系统 带完整的安装代码包以及部署教程

源码系统概述 超级会员卡积分商城小程序多功能源码系统是一款集合了多种功能于一体的会员积分商城小程序源码系统。该系统采用先进的技术架构&#xff0c;支持多门店统一管理&#xff0c;提供丰富的会员信息和商品管理服务&#xff0c;支持多种支付方式和营销活动&#xff0c;同…

认真学习JVM中类加载过程

本文我们总结JVM中类加载器子系统关于类加载过程&#xff0c;这里默认是Oracle的Hotspot。 【1】类加载器子系统作用 类加载器子系统负责从文件系统或者网络中加载Class文件&#xff0c;class文件在文件开头有特定的文件标识。 ClassLoader只负责class文件的加载&#xff0…

一款一站式、开源、高质量的数据提取工具,支持:PDF 文档、网页和电子书提取

大家好&#xff0c;今天给大家分享的是一款一站式、开源、高质量的数据提取工具MinerU&#xff0c;主要包含以下功能: Magic-PDF PDF 文档提取 Magic-Doc 网页与电子书提取 项目介绍 Magic-PDF 简介 Magic-PDF 是一款将 PDF 转化为 markdown 格式的工具。支持转换本地文档…

ABAP+json格式数据转换时参数为空没传值

CALL METHOD /UI2/CL_JSON>SERIALIZE 我们在ABAP传输json格式数据到外围系统时&#xff0c;会用到这个类方法 /UI2/CL_JSON>SERIALIZE CALL METHOD /UI2/CL_JSON>SERIALIZEEXPORTINGDATA LO_DATACOMPRESS XPRETTY_NAME /UI2/CL_JSON>PRETTY_M…

【Linux】网络基础_3

文章目录 十、网络基础5. socket编程socket 常见APIsockaddr结构简单的UDP网络程序 未完待续 十、网络基础 5. socket编程 socket 常见API // 创建 socket 文件描述符 (TCP/UDP, 客户端 服务器) int socket(int domain, int type, int protocol);// 绑定端口号 (TCP/UDP, 服…

tcpdump使用指南

tcpdump 是一款强大的网络抓包工具&#xff0c;它使用 libpcap 库来抓取网络数据包&#xff0c;这个库在几乎在所有的 Linux/Unix 中都有。 # 1. 基于IP地址过滤 # 根据源ip进行过滤 $ tcpdump -i eth2 src 192.168.10.100# 根据目标ip进行过滤 $ tcpdump -i eth2 dst 192.16…

江协科技51单片机学习- p33 PWM呼吸灯和直流驱动电机调速

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…