当前位置： 首页 > news >正文

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

news 2025/12/30 22:25:17

主要介绍了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、前端工程化所需要的环境安装！！！

相关文章：

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

主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装&#xff01;&#xff01;&#xff01; 目录 前言 AJAX ​原生Ajax Axios Axios入门 案例 前后端分离开发 YApi ​前端工程化 环境准备 总结 前言 主要介绍了AJAX、前后端分离所需的YApi、前端工…...

编程日记 2024/8/6 9:27:25

Phalco安装过程以及踩的一些坑(mac环境)

一 背景 公司用Phalcon框架好长时间了，中途发现了一些Phalcon使用的上的问题，于是想在本地搭建一套Phalcon的环境，方便排查问题使用。 二 Mac系统下的安装 看了很多说法，最终发现还是官网给力，安装Phalcon使用下列命令即可(前提条件是PHP已安装好，工具pecl也安装好了)：…...

编程日记 2024/8/6 9:25:23

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…...

编程日记 2024/8/6 9:22:20

高仲富：49岁搞AI，白天种菜卖菜，晚上学数学搞程序

这是《开发者说》的第13期&#xff0c;本期我们邀请的开发者是高仲富&#xff0c;曾是一位数学老师&#xff0c;自学成为一名程序员&#xff0c;在北京漂过&#xff0c;后逃回了成都&#xff0c;一边与病魔抗争&#xff0c;一边写代码&#xff0c;一写就是15年&#xff0c;制作…...

编程日记 2024/8/6 9:21:18

光线追踪（纹理映射）

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

编程日记 2024/8/6 9:17:13

传统产品经理VS现在AI产品经理，你要学习的太多了，超详细收藏我这一篇就够了

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

编程日记 2024/8/6 9:16:12

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…...

编程日记 2024/8/6 9:15:10

MTK联发科MT8766/MT8166安卓核心板性能参数对

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

编程日记 2024/8/6 9:14:09

ps绘制动图

ps绘制动图教程&#xff08;简易版&#xff09;-直播gif动态效果图 第一步 打开ps绘制几个简单的长方形 第二步 将图层转化为智能图层 第三部 在窗口找到时间轴创建时间轴 第五步 通过变换来鼠标控制图像的变化并打下结束点 第六部 通过图像中的图像大小控制gif的大小 第七部 …...

编程日记 2024/8/6 9:12:07

AI学习指南机器学习篇-强化学习和深度学习简介

AI学习指南机器学习篇-强化学习和深度学习简介 强化学习和深度学习基本概念回顾 强化学习是一种机器学习方法&#xff0c;其目标是让智能体通过与环境的交互来学习最优的行为策略。在强化学习中&#xff0c;智能体不需要标记的训练数据&#xff0c;而是通过试错来提升自己的表…...

编程日记 2024/8/6 9:10:04

yolov8 bytetrack onnx模型推理

原文&#xff1a;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…...

编程日记 2024/8/6 9:09:03

ImageNet数据集和CIFAR-10数据集

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

编程日记 2024/8/6 9:07:01

Go语言编程大全，web微服务数据库十大专题精讲

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

编程日记 2024/8/6 9:05:59

【LabVIEW学习篇 - 13】：队列

文章目录 队列 队列 队列通常情况下是一种先入先出&#xff08;FIFO&#xff1a;First in First out&#xff09;的数据结构&#xff0c;常用作数据缓存&#xff0c;通过队列结构可以保证数据有序的传递&#xff0c;避免竞争和冲突。 案例&#xff1a;利用队列&#xff0c;模…...

编程日记 2024/8/6 9:04:57

大语言模型综述泛读之Large Language Models: A Survey

摘要 这篇文章主要回顾了一些最突出的LLMs（GPT, LLaMA, PaLM）并讨论了它们的特点、贡献和局限性，就如何构建增强LLMs做了一个技术概述，然后调研了为LLM训练、微调和评估而准备的N多种流行数据集，审查了使用的LLM评价指标，在一组有代表性的基准上比较了几个流行的LLMs；最…...

编程日记 2024/8/6 9:01:54

奇偶函数的性质及运算

目录 定义 注意 特征 运算 拓展 定义 设函数f(x)的定义域D&#xff1b; 如果对于函数定义域D内的任意一个x&#xff0c;都有f(-x)&#xff0d;f&#xff08;x&#xff09;&#xff0c;那么函数f&#xff08;x&#xff09;就叫做奇函数。如果对于函数定义域D内的任意一个x…...

编程日记 2024/8/6 8:59:51

代码随想录 day 32 动态规划

第九章 动态规划part01 今天正式开始动态规划&#xff01; 理论基础 无论大家之前对动态规划学到什么程度&#xff0c;一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目&#xff0c;看我讲的理论基础&#xff0c;会有感觉 是不是简单题想复杂了&#xff1f; …...

编程日记 2024/8/6 8:58:50

支持目标检测的框架有哪些

目标检测是计算机视觉领域的一个重要任务&#xff0c;许多深度学习框架都提供了对目标检测的支持。以下是一些广泛使用的支持目标检测的深度学习框架&#xff1a; 1. TensorFlow TensorFlow 是一个广泛使用的开源深度学习框架&#xff0c;由Google开发。它提供了TensorFlow O…...

编程日记 2024/8/6 8:57:49

原神自定义倒计时

<!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 {…...

编程日记 2024/8/6 8:53:44

top命令实时监测Linux进程

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

编程日记 2024/8/6 8:52:44

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/12/22 21:48:33

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/12/21 9:09:26

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/10/1 2:59:48

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/12/15 22:07:34

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/12/10 16:19:48

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/12/30 10:40:32

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2025/12/19 23:17:48

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

编程新知 2025/11/21 0:25:40

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/11/26 20:46:42

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11