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

Ajax及前端工程化

news 2026/2/10 20:57:33

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&#xff1a;异步的js与xml。 作用&#xff1a; 1、通过ajax给服务器发送数据&#xff0c;并获得其响应的数据。 2、可以在不更新整个网页的情况下&#xff0c;与服务器交换数据并更新部分网页的技术。 一、同步与异步 二、原生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）的使用方法

列表是一种有序的集合&#xff0c;可以包含任意类型的元素&#xff0c;包括数字、字符串、布尔值、元组等。列表使用方括号[]来表示&#xff0c;元素之间用逗号,分隔。 以下是一些使用列表的例子&#xff1a; 1. 创建一个空列表&#xff1a; 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网络的基础上&#xff0c;为了设计深层神经网络&#xff0c;牛津大学设计了VGG网络,采用块的设计理念&#xff0c;将AlexNet中多个重复的卷积层和池化层组成一个块 论文中&#xff0c;使用3x3卷积核&#xff0c;padding1的卷积层 和带有2x2的汇…...

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

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

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

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

[oneAPI] 手写数字识别-GAN

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

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

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

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

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

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

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

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

File Inclusion

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

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

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

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

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

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

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

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

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

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

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

C++ volatile

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

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

空洞卷积学习笔记

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

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

WPF中的UseLayoutRounding和SnapsToDevicePixels

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

编程日记 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语句的执行计划&#xff0c;再根据sql的执行计划去判断这条sql有哪些点可以进行优化&#xff0c;从而让sql的效率达到最大化。 2. 执行计划各列含义 &#xff08;1&#xff09;id&#xff1a;id列是select的序列号&#xff0c;这个…...

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

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

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

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

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

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

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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/8 4:37:19

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/10 7:12:07

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/2/10 13:23:50

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2026/2/4 20:47:44

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/7 4:21:44

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2026/1/24 14:43:35