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地址的基本概念、作用以及更改时需要注意的事项，帮助用户更好地…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
UE5 学习系列（三）创建和移动物体
这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。 一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问（基础概念问题） 1. 请解释Spring框架的核心容器是什么？它在Spring中起到什么作用？ Spring框架的核心容器是IoC容器&#…...
嵌入式学习笔记DAY33（网络编程——TCP）
一、网络架构 C/S （client/server 客户端/服务器）：由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序，负责提供用户界面和交互逻辑 ，接收用户输入，向服务器发送请求，并展示服务…...