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

web开发之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue（学习版2）

news 2026/2/11 1:55:22

一、前言

接下来就是来解决这些问题

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

编程日记 2024/9/17 6:05:48

【课程学习】信号检测与估计II

b站文章目录 1-概述 1-概述线性、正交、平稳、高斯研究线性模型，采用正交化方法，假设信号平稳，考虑信号的统计特性是高斯的。本学期考虑，非线性、非正交、非平稳、非高斯。阵列处理 1980-1990 MUSIC 稀疏性 2006-2012 LASS 时…...

编程日记 2024/9/17 6:00:42

【深度学习|PyTorch】基于 PyTorch 搭建 U-Net 深度学习语义分割模型——附代码及其解释！

【深度学习|PyTorch】基于 PyTorch 搭建 U-Net 深度学习语义分割模型——附代码及其解释！ 【深度学习|PyTorch】基于 PyTorch 搭建 U-Net 深度学习语义分割模型——附代码及其解释！ 论文地址： https://arxiv.org/abs/1505.04597 代码地址&a…...

编程日记 2024/9/17 5:57:38

DPDK基础入门（十）：虚拟化

I/O虚拟化全虚拟化：宿主机截获客户机对I/O设备的访问请求，然后通过软件模拟真实的硬件。这种方式对客户机而言非常透明，无需考虑底层硬件的情况，不需要修改操作系统。半虚拟化：通过前端驱动/后端驱动模拟实现I/O虚拟…...

编程日记 2024/9/17 5:55:36

OpenCV_图像旋转超详细讲解

图像转置 transpose(src, dst); transpose()可以实现像素下标的x和y轴坐标进行对调：dst(i,j)src(j,i)，接口形式 transpose(InputArray src, // 输入图像OutputArray dst, // 输出 ) 图像翻转 flip(src, dst, 1); flip()函数可以实现对图像的水平翻转…...

编程日记 2024/9/17 5:54:35

关于 OceanBase 4.x 中被truncate的 table 不再支持进回收站的原因

近期，OceanBase的问答社区中收到了不少用户的询问，关于OceanBase 3.x版本支持被truncate的table进入回收站的功能，为何在升级到4.x版本后不再支持了？为了解答大家的疑惑，我们将通过这篇文章来浅析 OceanBase在4.x版本中…...

编程日记 2024/9/17 5:53:34

Numpy索引详解（数值索引，列表索引，布尔索引）

数值索引数值索引类似列表索引操作使用[]，参数为下标，[0,len-1),高维数组的索引使用多个[]连用分别代表一维索引，二维索引... import numpy as np import torchnp.random.seed(1) data1 np.arange(5) data2 np.arange(15).reshape(3,5) …...

编程日记 2024/9/17 5:51:29

大数据新视界 --大数据大厂之MongoDB与大数据：灵活文档数据库的应用场景

💖💖💖亲爱的朋友们，热烈欢迎你们来到青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而我的…...

编程日记 2024/9/17 5:50:28

三年 Sparker 都不一定知道的算子内幕

一、如何在 mapPartitions 中释放资源 mapPartitions是一种对每个分区进行操作的转换操作，于常用的map操作类似，但它处理的是整个分区而不是单个元素。mapPartitions的应用场景适合处理需要在每个分区内批量处理数据的场景，通常用于优化性能…...

编程日记 2024/9/17 5:49:27

PG表空间

目录标题 PG表空间PostgreSQL表空间的最佳实践是什么？如何在PostgreSQL中创建和管理自定义表空间？PostgreSQL表空间对数据库性能的具体影响有哪些？在PostgreSQL中，如何迁移数据到不同的表空间以优化存储布局？PostgreSQ…...

编程日记 2024/9/17 5:48:26

谷粒商城のElasticsearch

文章目录前言一、前置知识1、Elasticsearch 的结构2、倒排索引 (Inverted Index)2.1、索引阶段2.2、查询阶段二、环境准备1、安装Es2、安装Kibana3、安装 ik 分词器三、项目整合1、引入依赖2、整合业务2.1、创建索引、文档、构建查询语句2.2、整合业务代码后记前言本篇介…...

编程日记 2024/9/17 5:47:25

排队免单模式小程序开发

开发一个排队免单模式的小程序涉及多个方面，包括需求分析、界面设计、后端开发、数据库设计以及测试上线等。下面我将详细介绍每个步骤的概要： 1.需求分析明确目标：首先确定小程序的核心功能，即排队免单模式的具体实现方式。例如…...

编程日记 2024/9/17 5:45:23

从OracleCloudWorld和财报看Oracle的转变

2024年9月9-12日Oracle Cloud World在美国拉斯维加斯盛大开幕押注AI和云 Oracle 创始人Larry Ellison做了对Oracle战略和未来愿景的主旨演讲，在演讲中Larry将AI技术和云战略推到了前所未有的高度，从新的Oracle 23c改名到Oracle23ai，到Oracl…...

编程日记 2024/9/17 5:43:21

搭建 PHP

快速搭建 PHP 环境指南 PHP 是一种广泛用于 Web 开发的后端脚本语言，因其灵活性和易用性而受到开发者的青睐。无论是开发个人项目还是企业级应用，PHP 环境的搭建都是一个不可忽视的基础步骤。本指南将带您快速学习如何在不同平台上搭建 PHP 环境&#x…...

编程日记 2024/9/17 5:42:20

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

编程日记 2024/9/17 5:41:19

Gateway学习笔记

目录介绍： 核心概念依赖路由断言基本的断言工厂自定义断言过滤器路由过滤器过滤器工厂自定义路由过滤器全局过滤器其他过滤器执行顺序前置后置（？） 跨域问题 yaml 解决配置类解决介绍&#x…...

编程日记 2024/9/17 5:38:17

创造增强叙事的互动：Allison Crank的沉浸式体验设计理念

在沉浸式技术日新月异的今天，如何通过用户交互增强叙事，而非分散注意力，成为了设计师们共同面临的挑战。作为用户体验设计师和研究员，Allison Crank以其独特的视角和丰富的经验，为我们揭示了这一领域的核心原则与实践方法。叙事与互动的和谐共生 Allison Crank强调，互…...

编程日记 2024/9/17 5:37:16

Requests-HTML模块怎样安装和使用？

要安装和使用Requests-HTML模块，您可以按照以下步骤进行操作： 打开命令行界面（如Windows的命令提示符或Mac的终端）。使用pip命令安装Requests-HTML模块。在命令行中输入以下命令并按回车键执行： pip install request…...

编程日记 2024/9/17 5:36:14

[网络]从零开始的计算机网络基础知识讲解

一、本次教程的目的本次教程我只会带大叫了解网络的基础知识，了解网络请求的基本原理，为后面文章中可能会用到网络知识做铺垫。本次我们只会接触到网络相关的应用层，并不涉及协议的具体实现和数据转发的规则。也就是说，这篇教程是…...

编程日记 2024/9/17 5:34:12

wifiip地址可以随便改吗？wifi的ip地址怎么改变

对于普通用户来说，WiFi IP地址的管理和修改往往显得神秘而复杂。本文旨在深入探讨WiFi IP地址是否可以随意更改，以及如何正确地改变WiFi的IP地址。虎观代理小二将详细解释WiFi IP地址的基本概念、作用以及更改时需要注意的事项，帮助用户更好地…...

编程日记 2024/9/17 5:31:10

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目章节操作，重…...

编程新知 2026/2/10 11:02:44

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/8 20:42:55

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

Objective-C常用命名规范总结

【OC】常用命名规范总结文章目录【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用，通过断言可以提早发现和排查出错误。稳定性: 5 - 锁定这个模块可用于应用的单元测试，通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31