【Web开发手礼】探索Web开发的秘密(十五)-Vue2(2)AJAX、前后端分离、前端工程化
主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装!!!
目录
前言
AJAX
原生Ajax
Axios
Axios入门
案例
前后端分离开发
YApi
前端工程化
环境准备
总结
前言
主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装!!!
AJAX
概念:Asynchronous JavaScript And XML,异步的JavaScript和XML。
作用:
- 数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
- 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
原生Ajax
- 准备数据地址:http://yapi.smart-xwork.cn/mock/169327/emp/list
- 创建XMLHttpRequest对象:用于和服务器交换数据
- 向服务器发送请求
- 获取服务器响应数据
<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、前端工程化所需要的环境安装!!!
相关文章:

【Web开发手礼】探索Web开发的秘密(十五)-Vue2(2)AJAX、前后端分离、前端工程化
主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装!!! 目录 前言 AJAX 原生Ajax Axios Axios入门 案例 前后端分离开发 YApi 前端工程化 环境准备 总结 前言 主要介绍了AJAX、前后端分离所需的YApi、前端工…...

Phalco安装过程以及踩的一些坑(mac环境)
一 背景 公司用Phalcon框架好长时间了,中途发现了一些Phalcon使用的上的问题,于是想在本地搭建一套Phalcon的环境,方便排查问题使用。 二 Mac系统下的安装 看了很多说法,最终发现还是官网给力,安装Phalcon使用下列命令即可(前提条件是PHP已安装好,工具pecl也安装好了):…...
Ubuntu修改双系统默认启动顺序
1.打开grub的默认启动配置文件 sudo gedit /etc/default/grub# If you change this file, run update-grub afterwards to update # /boot/grub/grub.cfg. # For full documentation of the options in this file, see: # info -f grub -n Simple configurationGRUB_DEFAULT…...

高仲富:49岁搞AI,白天种菜卖菜,晚上学数学搞程序
这是《开发者说》的第13期,本期我们邀请的开发者是高仲富,曾是一位数学老师,自学成为一名程序员,在北京漂过,后逃回了成都,一边与病魔抗争,一边写代码,一写就是15年,制作…...

光线追踪(纹理映射)
最近在跟着ray trace in one week来学习光线追踪(很多概念茅塞顿开)做到一半想着记录一下(比较随心)上面是之前的效果。ray trace in one week Texture Coordinates for Spheres(球体纹理坐标) u, v 纹理…...

传统产品经理VS现在AI产品经理,你要学习的太多了,超详细收藏我这一篇就够了
传统产品经理想要转行成为AI产品经理,需要经历一系列的学习和实践过程。下面是一份详细的学习路线图,旨在帮助你顺利转型。 学习路线图 了解AI基础知识 AI概览:阅读《人工智能:一种现代的方法》这样的书籍,以获得对AI…...

C#使用Socket实现TCP服务器端
1、TCP服务器实现代码 using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading; using System.Threading.Tasks;namespace PtLib.TcpServer {public delegate void Tcp…...

MTK联发科MT8766/MT8166安卓核心板性能参数对
MT8766核心板 采用联发科四核2G主频芯片方案,国内4G全网通。12nm先进工艺,支持 Android9.0系统。 GPU 采用超强 IMG GE8300 ,主频600MHz。支持高速LPDDR4/X,主频高达1600MHz。支持EMMC5.1。标配 WIFI 802.11 ac/abgn,BT 5.0。 支持…...

ps绘制动图
ps绘制动图教程(简易版)-直播gif动态效果图 第一步 打开ps绘制几个简单的长方形 第二步 将图层转化为智能图层 第三部 在窗口找到时间轴创建时间轴 第五步 通过变换来鼠标控制图像的变化并打下结束点 第六部 通过图像中的图像大小控制gif的大小 第七部 …...
AI学习指南机器学习篇-强化学习和深度学习简介
AI学习指南机器学习篇-强化学习和深度学习简介 强化学习和深度学习基本概念回顾 强化学习是一种机器学习方法,其目标是让智能体通过与环境的交互来学习最优的行为策略。在强化学习中,智能体不需要标记的训练数据,而是通过试错来提升自己的表…...
yolov8 bytetrack onnx模型推理
原文:yolov8 bytetrack onnx模型推理 - 知乎 (zhihu.com) 一、pt模型转onnx from ultralytics import YOLO# Load a model model YOLO(weights/yolov8s.pt) # load an official model # model YOLO(path/to/best.pt) # load a custom trained# Export the mod…...

ImageNet数据集和CIFAR-10数据集
一、为什么需要大量数据集 人工智能其实就是大数据的时代,无论是目标检测、图像分类、还是现在植入我们生活的推荐系统,“喂入”神经网络的数据越多,则识别效果越好、分类越准确。因此开源大型数据集的研究团队为人工智能的发展做了大量贡献…...

Go语言编程大全,web微服务数据库十大专题精讲
本课程主要从数据结构、Go Module 依赖管理、IO编程、数据库编程、消息队列、加密技术与网络安全、爬虫与反爬虫、web开发、微服务通用技术、Kitex框架等方面讲解~ 链接:https://pan.quark.cn/s/d65337a0e60d...

【LabVIEW学习篇 - 13】:队列
文章目录 队列 队列 队列通常情况下是一种先入先出(FIFO:First in First out)的数据结构,常用作数据缓存,通过队列结构可以保证数据有序的传递,避免竞争和冲突。 案例:利用队列,模…...
大语言模型综述泛读之Large Language Models: A Survey
摘要 这篇文章主要回顾了一些最突出的LLMs(GPT, LLaMA, PaLM)并讨论了它们的特点、贡献和局限性,就如何构建增强LLMs做了一个技术概述,然后调研了为LLM训练、微调和评估而准备的N多种流行数据集,审查了使用的LLM评价指标,在一组有代表性的基准上比较了几个流行的LLMs;最…...
奇偶函数的性质及运算
目录 定义 注意 特征 运算 拓展 定义 设函数f(x)的定义域D; 如果对于函数定义域D内的任意一个x,都有f(-x)-f(x),那么函数f(x)就叫做奇函数。如果对于函数定义域D内的任意一个x…...

代码随想录 day 32 动态规划
第九章 动态规划part01 今天正式开始动态规划! 理论基础 无论大家之前对动态规划学到什么程度,一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目,看我讲的理论基础,会有感觉 是不是简单题想复杂了? …...
支持目标检测的框架有哪些
目标检测是计算机视觉领域的一个重要任务,许多深度学习框架都提供了对目标检测的支持。以下是一些广泛使用的支持目标检测的深度学习框架: 1. TensorFlow TensorFlow 是一个广泛使用的开源深度学习框架,由Google开发。它提供了TensorFlow O…...

原神自定义倒计时
<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>原神倒计时</title><style>* {margin: 0;padding: 0;box-sizing: border-box;user-select: none;body {background: #0b1b2c;}}header {…...

top命令实时监测Linux进程
top命令可以动态实时显示Linux进程信息,方便观察频繁换进换出的内存的进程变化。 top命令执行示例如下: 其中,第一行表示系统当前时间、系统的运行时间、登录的用户数目、系统的平均负载(最近1分钟,最近5分钟ÿ…...

网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...

超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...

vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...

(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...