web开发 之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版2）
一、前言
接下来就是来解决这些问题
二、 Ajax
1.ajax
javscript是网页三剑客之一，空用来控制网页的行为的
xml是一种标记语言，是用来存储数据的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ajax-原生方式</title>
</head>
<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>
</html>‘
2.axios
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ajax-axios</title>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()">
</body>
<script>function get(){axios({method:'get',url:'http://yapi.smart-xwork.cn/mock/169327/emp/list',}).then(result =>{console.log(result.data);})} function post(){axios({method:'post',url:'http://yapi.smart-xwork.cn/mock/169327/emp/deleteById',data:'id=1', }).then(result =>{console.log(result.data);})}
</script>
</html>
3.axio案例
这三个代码都是没有用浏览器看到的（因为那个网址打不开）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ajax-axios案例</title>
</head>
<body><div id="app"><table width="800px" cellspacing="0" border="1"><tr><th>编号</th><th>姓名</th><th>图片</th><th>性别</th><th>职位</th><th>入职时间</th><th>更新时间</th></tr><tr v-for="(emp, index) in emps" align="center"><td>{{index+1}}</td><td>{{emps.name}}</td><!-- <td>{{emps.image}}</td> --><td><img v-bind : src="emps.image" alt="" height="50px" width="70px"></td><td><span v-if="gender == 1">男</span><span v-if="gender == 2">女</span></td><td>{{emps.job}}</td><td>{{emps.entrydate}}</td><td>{{emps.updatatime}}</td></tr></table></div></body>
<script>new Vue({el:'a#pp',data:{emps:[]},mounted() {axios.get('').then(result => {this.emps = result.data.data;//当前vue实例中的data中的emps属性赋值})},})
</script>
</html>三、前后端分离开发
1.介绍
2.YAPI -接口文档管理平台
这里我插播一条：使用apipost
四、前端工程化
1.环境准备
如果需要可以找我要
2. vue项目介绍
3.vue项目开发流程
五、Vue组件库Element
六、Vue路由
七、打包部署
相关文章：
web开发 之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版2）
一、前言 接下来就是来解决这些问题 二、 Ajax 1.ajax javscript是网页三剑客之一，空用来控制网页的行为的 xml是一种标记语言，是用来存储数据的 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-…...
【课程学习】信号检测与估计II
b站 文章目录 1-概述 1-概述 线性、正交、平稳、高斯 研究线性模型，采用正交化方法，假设信号平稳，考虑信号的统计特性是高斯的。 本学期考虑，非线性、非正交、非平稳、非高斯。 阵列处理 1980-1990 MUSIC 稀疏性 2006-2012 LASS 时…...
【深度学习|PyTorch】基于 PyTorch 搭建 U-Net 深度学习语义分割模型——附代码及其解释！
【深度学习|PyTorch】基于 PyTorch 搭建 U-Net 深度学习语义分割模型——附代码及其解释！ 【深度学习|PyTorch】基于 PyTorch 搭建 U-Net 深度学习语义分割模型——附代码及其解释！ 论文地址： https://arxiv.org/abs/1505.04597 代码地址&a…...
DPDK基础入门（十）：虚拟化
I/O虚拟化 全虚拟化：宿主机截获客户机对I/O设备的访问请求，然后通过软件模拟真实的硬件。这种方式对客户机而言非常透明，无需考虑底层硬件的情况，不需要修改操作系统。 半虚拟化：通过前端驱动/后端驱动模拟实现I/O虚拟…...
OpenCV_图像旋转超详细讲解
图像转置 transpose(src, dst); transpose()可以实现像素下标的x和y轴坐标进行对调：dst(i,j)src(j,i)，接口形式 transpose(InputArray src, // 输入图像OutputArray dst, // 输出 ) 图像翻转 flip(src, dst, 1); flip()函数可以实现对图像的水平翻转…...
关于 OceanBase 4.x 中被truncate的 table 不再支持进回收站的原因
近期，OceanBase的问答社区中收到了不少用户的询问，关于OceanBase 3.x版本支持被truncate的table进入回收站的功能，为何在升级到4.x版本后不再支持了？为了解答大家的疑惑，我们将通过这篇文章来浅析 OceanBase在4.x版本中…...
Numpy索引详解（数值索引，列表索引，布尔索引）
数值索引 数值索引类似列表索引操作使用[]，参数为下标，[0,len-1),高维数组的索引使用多个[]连用分别代表一维索引，二维索引... import numpy as np import torchnp.random.seed(1) data1 np.arange(5) data2 np.arange(15).reshape(3,5) …...
大数据新视界 --大数据大厂之MongoDB与大数据：灵活文档数据库的应用场景
💖💖💖亲爱的朋友们，热烈欢迎你们来到 青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...
三年 Sparker 都不一定知道的算子内幕
一、如何在 mapPartitions 中释放资源 mapPartitions是一种对每个分区进行操作的转换操作，于常用的map操作类似，但它处理的是整个分区而不是单个元素。mapPartitions的应用场景适合处理需要在每个分区内批量处理数据的场景，通常用于优化性能…...
PG表空间
目录标题 PG表空间PostgreSQL表空间的最佳实践是什么？如何在PostgreSQL中创建和管理自定义表空间？PostgreSQL表空间对数据库性能的具体影响有哪些？在PostgreSQL中，如何迁移数据到不同的表空间以优化存储布局？PostgreSQ…...
谷粒商城のElasticsearch
文章目录 前言一、前置知识1、Elasticsearch 的结构2、倒排索引 (Inverted Index)2.1、 索引阶段2.2、查询阶段 二、环境准备1、安装Es2、安装Kibana3、安装 ik 分词器 三、项目整合1、引入依赖2、整合业务2.1、创建索引、文档、构建查询语句2.2、整合业务代码 后记 前言 本篇介…...
排队免单模式小程序开发
开发一个排队免单模式的小程序涉及多个方面，包括需求分析、界面设计、后端开发、数据库设计以及测试上线等。下面我将详细介绍每个步骤的概要： 1.需求分析 明确目标：首先确定小程序的核心功能，即排队免单模式的具体实现方式。例如…...
从OracleCloudWorld和财报看Oracle的转变
2024年9月9-12日Oracle Cloud World在美国拉斯维加斯盛大开幕 押注AI和云 Oracle 创始人Larry Ellison做了对Oracle战略和未来愿景的主旨演讲，在演讲中Larry将AI技术和云战略推到了前所未有的高度，从新的Oracle 23c改名到Oracle23ai，到Oracl…...
搭建 PHP
快速搭建 PHP 环境指南 PHP 是一种广泛用于 Web 开发的后端脚本语言，因其灵活性和易用性而受到开发者的青睐。无论是开发个人项目还是企业级应用，PHP 环境的搭建都是一个不可忽视的基础步骤。本指南将带您快速学习如何在不同平台上搭建 PHP 环境&#x…...
kubernetes技术详解，带你深入了解k8s
目录 一、Kubernetes简介 1.1 容器编排应用 1.2 Kubernetes简介 1.3 k8s的设计架构 1.3.1 k8s各个组件的用途 1.3.2 k8s各组件之间的调用关系 1.3.3 k8s的常用名词概念 1.3.4 k8s的分层结构 二、k8s集群环境搭建 2.1 k8s中容器的管理方式 2.2 k8s环境部署 2.2.1 禁用…...
Gateway学习笔记
目录 介绍： 核心概念 依赖 路由 断言 基本的断言工厂 自定义断言 过滤器 路由过滤器 过滤器工厂 自定义路由过滤器 全局过滤器 其他 过滤器执行顺序 前置后置（？） 跨域问题 yaml 解决 配置类解决 介绍&#x…...
创造增强叙事的互动：Allison Crank的沉浸式体验设计理念
在沉浸式技术日新月异的今天，如何通过用户交互增强叙事，而非分散注意力，成为了设计师们共同面临的挑战。作为用户体验设计师和研究员，Allison Crank以其独特的视角和丰富的经验，为我们揭示了这一领域的核心原则与实践方法。 叙事与互动的和谐共生 Allison Crank强调，互…...
Requests-HTML模块怎样安装和使用？
要安装和使用Requests-HTML模块，您可以按照以下步骤进行操作： 打开命令行界面（如Windows的命令提示符或Mac的终端）。 使用pip命令安装Requests-HTML模块。在命令行中输入以下命令并按回车键执行： pip install request…...
[网络]从零开始的计算机网络基础知识讲解
一、本次教程的目的 本次教程我只会带大叫了解网络的基础知识，了解网络请求的基本原理，为后面文章中可能会用到网络知识做铺垫。本次我们只会接触到网络相关的应用层，并不涉及协议的具体实现和数据转发的规则。也就是说，这篇教程是…...
wifiip地址可以随便改吗？wifi的ip地址怎么改变
对于普通用户来说，WiFi IP地址的管理和修改往往显得神秘而复杂。本文旨在深入探讨WiFi IP地址是否可以随意更改，以及如何正确地改变WiFi的IP地址。虎观代理小二将详细解释WiFi IP地址的基本概念、作用以及更改时需要注意的事项，帮助用户更好地…...
Echarts异步数据加载场景下，如何设计优雅的Loading动画以优化用户感知
1. 为什么需要优雅的Loading动画 当我们在网页中使用Echarts展示数据图表时，经常会遇到数据需要从服务器异步加载的情况。想象一下这样的场景：用户打开页面后，看到一个空白的坐标轴在那里"发呆"，既没有数据也没有任何提…...
搞电机控制的兄弟应该都懂，无感算法里磁链观测器+PLL锁相环的组合有多香。今天直接上干货，聊聊非线性磁链观测器的实现套路和实操中那些让你少掉几根头发的技巧
永磁同步电机非线性磁链无感算法、Flux观测器锁相环PLL仿真模型 flux：计算电机磁链，目的为了使得估计的磁链收敛于实际磁链； pll：通过估计磁链计算经过pi调节后使得估计角度跟踪实际角度 模型描述及资料： （…...
ADC过采样技术提升嵌入式系统测量精度
1. ADC过采样技术概述在嵌入式系统开发中，ADC（模数转换器）的性能往往直接决定了整个系统的测量精度。标准的10位ADC在很多场合已经足够使用，但当我们需要更高精度的测量时，过采样技术就成为了一个经济有效的解决方案。…...
OpenAI收购科技脱口秀TBPN，力图塑造AI叙事话语权
OpenAI正通过收购备受硅谷内部人士关注的科技脱口秀TBPN进军媒体行业，该节目主持人周三宣布了这一消息。联合主持人约翰库根和乔迪海斯每个工作日从洛杉矶直播TBPN节目三小时，邀请的嘉宾包括创业者、风险投资家和科技界重要人物。此次交易的财务条款未予…...
软考培训机构防套路手册：从师资甄别到合同陷阱的7个关键检查点
软考培训机构防套路手册：从师资甄别到合同陷阱的7个关键检查点 第一次报考软考的考生往往会被培训机构"包过""名师押题"的广告吸引，却不知道这个行业存在多少精心设计的消费陷阱。去年某考生花费6800元报名"保过班"&…...
▲基于DQPSK调制解调+LDPC编译码+扩频解扩通信链路matlab误码率仿真
目录 1.本系统整体构架 2.各个模块基本原理 2.1 DQPSK原理简介 2.2 DQPSK解调原理 2.3 LDPC编译码 2.4 扩频技术原理 3.仿真结果 4.完整程序下载 1.本系统整体构架 整个程序，我们采用如下的流程图实现： 2.各个模块基本原理 2.1 DQPSK原理简介 …...
魔方财务批量拉取产品信息教程
使用魔方财务，有时候经常上级【变化了ip】或者批量【补时间】什么的，我们这里因为我们的财务换过域名，导致上级无法给我们推送需要我们手动拉取信息，一个两个还好，几百个怎么办？ 本教程就是【欧云服务器】…...
ObsPy完整指南：如何用Python快速处理地震数据
ObsPy完整指南：如何用Python快速处理地震数据 【免费下载链接】obspy ObsPy: A Python Toolbox for seismology/seismological observatories. 项目地址: https://gitcode.com/gh_mirrors/ob/obspy ObsPy是一个专为地震学和地震观测站设计的Python工具库&…...
委托的全面知识总结（C#）
一.定义与本质委托是干什么的？委托就是用来存 方法 的容器你可以把一个方法当成 数据 一样传递1.什么是委托委托是C#中类型安全的函数指针，它是一种“类型”，可以存储，调用，传递一个或多个方法的引用2.核心本质委…...
2025届学术党必备的降重复率助手实际效果
Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 对于AI生成文本展现出的高频特性，我们可运用如下一系列指令来实现去机械化的目标…...