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

Ajax及前端工程化

news 2026/1/23 7:54:02

Ajax：异步的js与xml。

作用：

1、通过ajax给服务器发送数据，并获得其响应的数据。

2、可以在不更新整个网页的情况下，与服务器交换数据并更新部分网页的技术。

一、同步与异步

二、原生Ajax

1、准备数据地址

2、创建XMLHttpRequest对象，用于和服务器交换数据

3、向服务器发送请求

4、获取服务器响应的数据

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" name="" id="" value="获取数据" onclick="getData()"><div id="div1"></div></body><script>function getData() {//1、创建XMLHttpRequsetvar xmlHttpRequest = new XMLHttpRequest();//2、发送异步请求xmlHttpRequest.open("GET", "/test_/ajax/ajax_info.txt");xmlHttpRequest.send();//3、获取服务器响应数据xmlHttpRequest.onreadystatechange = function() {if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {alert("123");document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;}}}</script>
</html>

1、Axios

对原生ajax进行封装，方便开发

1、引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

2、

function get() {//axios发送异步请求axios({method:"get",url:"https://www.baidu.com"}).then(result => {console.log(result.data)})}

3、案例通过vue的钩子函数实现动态加载页面数据

ajax_info.txt 格式json

{"users": [{"name": "Tom","age": 20,"gender": 1,"scorce": 78},{"name": "Rose","age": 18,"gender": 2,"scorce": 86},{"name": "Jerry","age": 26,"gender": 1,"scorce": 90},{"name": "Tony","age": 30,"gender": 1,"scorce": 52}						]
}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.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></tr><tr align="center" v-for="(user,index) in users"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender==1">男</span><span v-if="user.gender==2">女</span></td><td>{{user.scorce}}</td><td><span v-if="user.scorce>=85">优秀</span><span v-else-if="user.scorce>=60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data:{users:[]},//钩子函数 当页面加载完成后 自动发送数据 并将vue的users赋值mounted() {axios.get("/test_/ajax/ajax_info.txt").then(result => {								this.users = result.data.users;})}})				</script>
</html>

三、前后端分离开发

接口文档规范了前端、后端工程师的开发

开发流程：

1、YAPI

YAPI是管理接口文档的工具。详见视频

2、前端工程化

1、环境准备

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

功能：统一的目录结构、本地调式、热部署、单元测试、集成打包上线

依赖环境：Nodejs

搭建环境：

下载nodejs 安装完成后会自动配置环境变量

1、设置npm

2、检查npm的prefix值是否设置成功

3、更改下载镜像

4、安装vue-cli

5、检查vue-cli是否安装成功

2、Vue项目简介

1、创建vue项目

创建文件夹，并在文件夹导航栏输入cmd，进入cmd，输入vue ui进入图像界面，配置项目属性并下载，如图所示

如图显示，此时项目创建完成

2、vue项目目录介绍

运行项目

热部署：修改文件后，无需重启浏览器、服务器即可在线显示修改后的文件。

3、前端工程化开发流程

以vue为结尾的文件均称为组件文件。

每个组件由三部分组成<template>、<script>、<style>

template生成html代码 script为js代码控制数据来源和行为 style为css样式控制

实例：

<template><div><!-- 通过插值表达式来显示vue数据模型中的值 --><h1>{{message}}</h1></div>
</template><script>
//export导出模块
export default {//创建数据模型data () {return {message:"Hello Vue"}},methods: {}
}
</script><style></style>

Ajax及前端工程化

Ajax：异步的js与xml。作用： 1、通过ajax给服务器发送数据，并获得其响应的数据。 2、可以在不更新整个网页的情况下，与服务器交换数据并更新部分网页的技术。一、同步与异步二、原生Ajax 1、准备数据地址 2、创建XMLHttpReq…...

编程日记 2023/8/17 14:26:48

electron的使用和操作

文章目录先创建一个基本的electron应用electron生命周期事件先创建一个基本的electron应用先安装 npm install --save-dev electron然后在package.json里面创建如下内容 {"name": "my-electron-app","version": "1.0.0","d…...

编程日记 2023/8/17 14:25:47

Python最重要的数据结构是列表（list）的使用方法

列表是一种有序的集合，可以包含任意类型的元素，包括数字、字符串、布尔值、元组等。列表使用方括号[]来表示，元素之间用逗号,分隔。以下是一些使用列表的例子： 1. 创建一个空列表： my_list []2. 创建一个包含元素的…...

编程日记 2023/8/17 14:24:46

二开ChatGPT微信小程序源码 AI聊天微信小程序源码适配H5和WEB端支持AI聊天次数限制

ChatGPT-MP是一款基于的微信小程序，同时适配H5和WEB端。它提供了前后台二开的能力，支持打字效果的流式输出，以及限制AI聊天次数和分享增加次数等功能。该开源版本仅供学习交流使用，禁止商业用途和倒卖。感谢大家的关注与支持！技术栈方面，我们使用了JDK8、SpringBoot、Vue…...

编程日记 2023/8/17 14:23:45

VGG简单学习

VGG简单学习简单介绍在AlexNet网络的基础上，为了设计深层神经网络，牛津大学设计了VGG网络,采用块的设计理念，将AlexNet中多个重复的卷积层和池化层组成一个块论文中，使用3x3卷积核，padding1的卷积层和带有2x2的汇…...

编程日记 2023/8/17 14:22:44

Stable Diffusion - 人物坐姿 (Sitting) 的提示词组合与 LoRA 和 Embeddings 配置

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/132201960 拍摄人物坐姿时，需要注意： 选择一个舒适和自然的坐姿，符合个性和心情。可以坐在椅子、沙发、长凳、…...

编程日记 2023/8/17 14:21:42

[oneAPI] 手写数字识别-GAN 手写数字识别参数与包加载数据模型训练过程结果 oneAPI 比赛：https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517 Intel DevCloud for oneAPI：https://devcloud.intel.com/oneapi/get_started/aiAnalyticsToolki…...

编程日记 2023/8/17 14:20:40

爬虫逆向实战（十五）--阿某某营登录

一、数据接口分析主页地址：阿某某营 1、抓包通过抓包可以发现登录接口是Users/Login 2、判断是否有加密参数请求参数是否加密？ 通过查看“载荷”模块可以发现有一个s加密参数请求头是否加密？ 无响应是否加密？ 无cookie是…...

编程日记 2023/8/17 14:19:38

【计组】校验码（奇偶校验码、海明校验码、CRC）

前言 1、小提示：本篇博文是参考王道，在复习 ASCII 码的基础上，总结校验码的相关学习知识点，并在最后搭配习题（含408真题）进行巩固练习。（对重点内容进行划线、标色） 2、适用人群&…...

编程日记 2023/8/17 14:18:37

File Inclusion

File Inclusion 服务器执行PHP文件时，可以通过文件包含函数加载另一个文件中的PHP代码，并且当PHP来执行，这会为开发者节省大量的时间。这意味着您可以创建供所有网页引用的标准页眉或菜单文件。当页眉需要更新时，您只更新一个包含…...

编程日记 2023/8/17 14:17:36

函数性能探测：更简单高效的 Serverless 规格选型方案

作者：拂衣、丛霄 2019 年 Berkeley 预测 Serverless 将取代 Serverful 计算成为云计算新范式。Serverless 为应用开发提供了一种全新系统架构。借助 2023 年由 OpenAI 所带来的 AIGC 风潮，以阿里云函数计算 FC、AWS Lambda 为代表的 Serverless 以其更高…...

编程日记 2023/8/17 14:16:33

嵌入式Linux Qt5 (C++)开发栏目概述

本栏目开始介绍Linux系统下的Qt C程序开发，资源是以嵌入式为切入点（现在Linux系统下的Qt C程序开发好像就是应用于嵌入式），那就跟着一起学习Linux系统下的Qt C程序开发知识，再扩展一下嵌入式的知识吧。我这里默认已经熟…...

编程日记 2023/8/17 14:15:32

C语言“牵手”微店商品详情数据方法，微店商品详情API接口申请指南

微店平台的商品详情通常包括以下信息： 商品名称：展示商品的名称，用于描述商品的特性和分类。商品图片：展示商品的图片，可以有多张图片以展示不同角度和细节。商品价格：显示商品的销售价格，可…...

编程日记 2023/8/17 14:14:30

C++ volatile

volatile 一、volatile 使用场景 volatile 是 C 和 C 中的一个关键字，用于告诉编译器不要对标记为 volatile 的变量进行优化，以确保每次访问都从内存中读取变量的最新值。主要用于以下情况： 硬件寄存器和内存映射设备：在访问硬…...

编程日记 2023/8/17 14:13:30

空洞卷积学习笔记

文章目录 1. 扩张卷积的提出2. 理解的难点本片博客的主题思路来自于这篇文章——如何理解Dilated Convolutions(空洞卷积)，但是作者似乎是很久之前写的，文字的排版很混乱，自己来写一个新的。 1. 扩张卷积的提出 Multi-Scale Context Aggre…...

编程日记 2023/8/17 14:12:28

WPF中的UseLayoutRounding和SnapsToDevicePixels

WPF中的UseLayoutRounding和SnapsToDevicePixels 最近在调试项目中的UI时发现几个诡异问题： Grid容器里的GridSplitter设置粗细一样， 但截屏放大后发现线条不一样粗并且明暗不一致，导致打印出来有问题。自定义控件的边缘在某些窗体中显示模…...

编程日记 2023/8/17 14:11:26

Windows权限维持—自启动映像劫持粘滞键辅助屏保后门WinLogon

Windows权限维持—自启动&映像劫持&粘滞键&辅助屏保后门&WinLogon 1. 前置2. 自启动2.1. 路径加载2.1.1. 放置文件2.1.2. 重启主机 2.2. 服务加载2.2.1. 创建服务2.2.2. 查看服务2.2.3. 重启主机 2.3. 注册表加载2.3.1. 添加启动项2.3.2. 查看注册表2.3.3. 重启…...

编程日记 2023/8/17 14:10:25

Mysql之explain详解

1. explain作用使用explain可以展示出sql语句的执行计划，再根据sql的执行计划去判断这条sql有哪些点可以进行优化，从而让sql的效率达到最大化。 2. 执行计划各列含义 （1）id：id列是select的序列号，这个…...

编程日记 2023/8/17 14:09:24

每天一道leetcode：1926. 迷宫中离入口最近的出口（图论中等广度优先遍历）

今日份题目： 给你一个 m x n 的迷宫矩阵 maze （下标从 0 开始），矩阵中有空格子（用 . 表示）和墙（用表示）。同时给你迷宫的入口 entrance ，用 entrance [entrancerow, …...

编程日记 2023/8/17 14:08:23

Mysql_5.7下载安装与配置基础操作教程

目录一、Mysql57下载与安装二、尝试登录Mysql 三、配置Mysql环境变量一、Mysql57下载与安装首先，进入Mysql下载官网：MySQL Community Downloads 随后，选择版本5.7.43，系统选择Windows，随后下方会出现两个下载选…...

编程日记 2023/8/17 14:07:22

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2026/1/21 19:58:37

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群一、主从架构的不足与Dledger的定位主从架构缺陷数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...

编程新知 2025/9/17 2:39:21

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因常见解决方法更好的解决方法设计精妙之处登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载四、智能指针…...

编程新知 2026/1/15 9:32:34

算法250609 高精度

加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...

编程新知 2025/9/17 10:04:40

【笔记】AI Agent 项目 SUNA 部署之 Docker 构建记录

#工作记录构建过程记录 Microsoft Windows [Version 10.0.27871.1000] (c) Microsoft Corporation. All rights reserved.(suna-py3.12) F:\PythonProjects\suna>python setup.py --admin███████╗██╗ ██╗███╗ ██╗ █████╗ ██╔════╝…...

编程新知 2026/1/21 20:15:12

Electron简介（附电子书学习资料）

一、什么是Electron？ Electron 是一个由 GitHub 开发的开源框架，允许开发者使用 Web技术（HTML、CSS、JavaScript） 构建跨平台的桌面应用程序（Windows、macOS、Linux）。它将 Chromium浏览器内核和 Node.j…...

编程新知 2025/9/28 1:39:34

JS 事件流机制详解：冒泡、捕获与完整事件流

JS 事件流机制详解：冒泡、捕获与完整事件流文章目录 JS 事件流机制详解：冒泡、捕获与完整事件流一、DOM 事件流基本概念二、事件捕获 (Event Capturing)特点代码示例三、事件冒泡 (Event Bubbling)特点代码示例四、完整事件流示例HTML 结构JavaScript…...

编程新知 2026/1/20 9:58:50

【Unity】R3 CSharp 响应式编程 - 使用篇（集合）（三）

1、ObservableList 基础 List 类型测试 using System;using System.Collections.Specialized;using ObservableCollections;using UnityEngine;namespace Aladdin.Standard.Observable.Collections.List{public class ObservableListTest : MonoBehaviour{protected readonly O…...

编程新知 2025/10/1 1:21:08