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

JavaWeb——前端之AjaxVue

6. 前后端交互

6.1 Ajax(原生的)

概念: Asynchronous JavaScript And XML(异步的JavaScript和XML)

作用:

  • 数据交互:通过Ajax可以给服务器发送请求,并获取服务器响应的数据
  • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术

步骤:

  • 准备数据地址
  • 创建XMLHttpRequest对象:用于和服务器交换数据
  • 向服务器发送请求
  • 获取服务器响应的数据

6.2 Axios

概念: 对原生的Ajax进行了封装,简化书写,快速开发

步骤:

1)引入Axios的js文件

  • <script src = “js/axios-0.18.0.js”></script>

2)使用Axios发送请求,并获取响应结果

在这里插入图片描述

3)请求方式别名对上述代码进行改造

  • axios.get(url[, config])
  • axios.post(url[, config])
  • axios.delete(url[, config])
  • axios.put(url[, config])
  • 例:
    在这里插入图片描述

7. 前后端分离开发

前后端分离: 各司其职,前端发送请求给后端,后端发送响应给前端,那么他们中间就需要一个规范——接口文档,基于接口文档进行开发

接口文档维护: 在线和离线

接口文档来源: 产品经理的页面原型和需求文档分析

接口文档的管理平台:YAPI

API管理接口

Mock服务——模拟真实接口,返回数据,便于前端测试

8. 前端开发工程化——冗余、不规范

概念: 在企业级的前端项目开发中,把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化。

环境:vue-cli

Vue官方提供的一个脚手架,用于快速生成一个Vue项目模板

功能:

  • 统一目录结构
  • 本地调试
  • 热部署:会自己保存刷新页面
  • 单元测试
  • 单元测试
  • 集成打包上线

依赖环境:NodeJS

9. Element

概念: 饿了么团队基于Vue2.0的桌面端组件(组成网页的不见,超链接、图片、表格、表单等)库

命名规则: 驼峰命名

步骤:

  • 安装ElementUI组件库(在当前工程目录下),命令行执行npm install element-ui@版本号
  • 引入ElementUI组件库(官方文档中找)
  • 访问官方文档,复制组件代码,调整

10. 路由

Vue Router:是Vue的官方路由,URL中的hash(#号)与组件之间的对应关系

组成:

VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件

<router-link>:请求链接组件,浏览器会解析成<a>

<router-view>:动态视图组件,用来渲染展示与路由路径对应的组件

index.js中定义路由,main.js中在创建Vue对象的时候使用路由,HTML中使用<router-link>,引用组件的Vue中使用<router-view>

相关文章:

JavaWeb——前端之AjaxVue

6. 前后端交互 6.1 Ajax&#xff08;原生的&#xff09; 概念&#xff1a; Asynchronous JavaScript And XML&#xff08;异步的JavaScript和XML&#xff09; 作用&#xff1a; 数据交互&#xff1a;通过Ajax可以给服务器发送请求&#xff0c;并获取服务器响应的数据异步交…...

在 Android 手机上从SD 卡恢复数据的 6 个有效应用程序

如果您有 Android 设备&#xff0c;您可能会将个人和专业的重要文件保存在设备的 SD 卡上。这些文件包括照片、视频、文档和各种其他类型的文件。您绝对不想丢失这些文件&#xff0c;但当您的 SD 卡损坏时&#xff0c;数据丢失是不可避免的。 幸运的是&#xff0c;您不需要这样…...

uni-app/vue封装etc车牌照输入,获取键盘按键键值

先看下效果如下&#xff1a; 动态图如下 uniapp的keyup获取不到keyCode和compositionstart&#xff0c;compositionend&#xff0c;所以需要监听input节点的keyup事件&#xff0c; 思路以及代码如下&#xff1a; 1.将每一个字符用文本框输入&#xff0c;代码如下 <view …...

iostat获取IO延迟单位从ms调整us的方案

iostat命令统计的磁盘I/O延迟通常是以毫秒&#xff08;ms&#xff09;为单位&#xff0c;例如在输出中的await字段表示的是平均服务时间&#xff0c;包括等待时间和处理时间&#xff0c;这个值就是以毫秒为单位。 然而&#xff0c;要获取更精确到微秒级别&#xff08;us&#x…...

K8s 源码剖析及debug实战之 Kube-Scheduler(四):预选算法详解

文章目录 0. 引言1. 回顾2. podFitsOnNode 为什么执行两次预选3. 预选算法有哪些4. 参考 0. 引言 欢迎关注本专栏&#xff0c;本专栏主要从 K8s 源码出发&#xff0c;深入理解 K8s 一些组件底层的代码逻辑&#xff0c;同时借助 debug Minikube 来进一步了解 K8s 底层的代码运行…...

ES6之解构赋值详解

✨ 专栏介绍 在现代Web开发中&#xff0c;JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性&#xff0c;还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言&#xff0c;JavaScript具有广泛的应用场景&#x…...

UntiyShader(五)属性、内置文件和变量

目录 一、如何使用属性 例子 ShaderLab中的属性的类型和Cg中的变量的类型之间的匹配关系 二、Unity提供的内置文件和变量 内置的包含文件 内置的变量 一、如何使用属性 在一开始我们提到过&#xff0c;材质和UnityShader之间有着密切的练习&#xff0c;我们可以通过材质面…...

Pytorch简介

1.1 Pytorch的历史 PyTorch是一个由Facebook的人工智能研究团队开发的开源深度学习框架。在2016年发布后&#xff0c;PyTorch很快就因其易用性、灵活性和强大的功能而在科研社区中广受欢迎。下面我们将详细介绍PyTorch的发展历程。 在2016年&#xff0c;Facebook的AI研究团队…...

亚马逊云科技Amazon Q,一款基于生成式人工智能的新型助手

近日&#xff0c;亚马逊云科技宣布推出Amazon Q&#xff0c;这是一款基于生成式人工智能&#xff08;AI&#xff09;的新型助手&#xff0c;专为辅助工作而设计&#xff0c;可以根据您的业务量身定制。通过连接到公司的信息存储库、代码、数据和企业系统&#xff0c;可以使用Am…...

骑砍战团MOD开发(29)-module_scenes.py游戏场景

骑砍1战团mod开发-场景制作方法_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Cw411N7G4/ 一.骑砍游戏场景 骑砍战团中进入城堡,乡村,战斗地图都被定义为场景,由module_scenes.py进行管理。 scene(游戏场景) 天空盒(Skyboxes.py) 地形(terrain code) 场景物(scene_…...

ROS学习记录:ROS系统中的激光雷达消息包的数据格式

一、在工作空间中输入source ./devel/setup.bash 二、输入roslaunch wpr_simulation wpb_simple.launch打开机器人仿真环境 三、机器人仿真环境打开成功 四、给机器人围上一圈障碍物 五、再打开一个工作空间终端 六、输入roslaunch wpr_simulation wpb_rviz.launch打开RViz 七、…...

Vue.js和Node.js的关系--类比Java系列

首先我们看一张图 这里我们类比了Java的jvm和JavaScript的node.js。 可以看到&#xff0c;node.js是基础&#xff0c;提供了基础的编译执行的能力。vue,js是实际上定义了一种他自己的代码格式&#xff0c;以加速开发。...

我的笔记本电脑死机问题折腾记录

两年前&#xff0c;买了一台笔记本电脑。直到今年4月份&#xff0c;不到两年的时间&#xff0c;便出现了花屏的情况&#xff0c;然后就到官方售后去维修&#xff0c;换屏。然后在6月份&#xff0c;屏幕问题再次出现&#xff0c;又去售后维修。 经过两次维修&#xff0c;笔记本…...

uniApp中uView组件库的丰富布局方法

目录 基本使用 #分栏间隔 #混合布局 #分栏偏移 #对齐方式 API #Row Props #Col Props #Row Events #Col Events UniApp的uView组件库是一个丰富的UI组件库&#xff0c;提供了各种常用的UI组件和布局方法&#xff0c;帮助开发者快速构建美观、灵活的界面。下面给你写一…...

TDD-LTE 寻呼流程

目录 1. 寻呼成功流程 1.1 空闲态寻呼 1.2 连接态寻呼 2. 寻呼失败流程 2.1 Paging消息不可达 2.2 RRC建立失败 2.3 eNodeB未上发Initial UE message或达到超时 1. 寻呼成功流程 1.1 空闲态寻呼 寻呼成功&#xff1a;MME发起寻呼&#xff08;S1 接口发送Paing 消息&…...

TCP中的三次握手和四次挥手

TCP中的连接和断开可以说是在面试中经常被问到的问题之一&#xff0c;正好有空就总结一下&#xff0c;首先回顾一下TCP的相关知识点 1. TCP的基础知识 1.1 TCP的基本概念 我们知道TCP是运输层的面向连接的可靠的传输协议。面向连接的&#xff0c;指的就是在两个进程发送数据…...

NAO.99b海潮模型的详解教程

NAO.99b模型是由日本国家天文台开发的全球潮汐模式&#xff0c;基于二维非线性浅水方程。该模型具有较高的分辨率&#xff0c;网格间距为0.50.5&#xff0c;网格数为720360&#xff0c;覆盖的经度范围为0.25&#xff5e;359.75E&#xff0c;纬度范围为89.75S&#xff5e;89.75N…...

Plantuml之JSON数据语法介绍(二十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

迅为龙芯2K1000开发板虚拟机 ubuntu 更换下载源

Ubuntu 系统软件的下载安装我们通常使用命令“apt-get” &#xff0c; 该命令可以实现软件自动下载&#xff0c; 安装&#xff0c; 配置。 该命令采用客户端/服务器的模式&#xff0c; 我们的 Ubuntu 系统作为客户端&#xff0c; 当需要下载软件的时候就向服务器发起请求&#…...

你好!Apache Seata

北京时间 2023 年 10 月 29 日&#xff0c;分布式事务开源项目 Seata 正式通过 Apache 基金会的投票决议&#xff0c;以全票通过的优秀表现正式成为 Apache 孵化器项目&#xff01; 根据 Apache 基金会邮件列表显示&#xff0c;在包含 13 个约束性投票 (binding votes) 和 6 个…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

uniapp+<script setup lang=“ts“>解决有数据与暂无数据切换显示,有数据加载时暂无数据闪现(先加载空数据)问题

声明showEmpty 为false&#xff0c;在接口返回处判断有数据时设置showEmpty 为false&#xff0c;接口返回数据为空则判断showEmpty 为true &#xff08;这样就解决有数据的时候会闪现暂无数据的问题啦&#xff09; <!--* Date: 2024-02-26 03:38:52* LastEditTime: 2025-06…...

Elasticsearch中的监控(Monitoring)功能介绍

Elasticsearch 的 监控&#xff08;Monitoring&#xff09; 功能用于实时跟踪集群的运行状态、性能指标和资源使用情况&#xff0c;帮助管理员及时发现潜在问题、优化配置并确保集群稳定高效运行。它通过内置工具和集成方案&#xff0c;提供从节点到集群、从硬件到服务层的全方…...

php apache构建 Web 服务器

虚拟机配置流程winsever2016配置Apache、Mysql、php_windows server 2016配置web服务器-CSDN博客 PHP 和 Apache 通过 ​​模块化协作​​ 共同构建 Web 服务器&#xff0c;以下是它们的交互机制和工作流程&#xff1a; ​​一、核心组件分工​​ 组件角色​​Apache​​Web …...

AI赋能的浏览器自动化:Playwright MCP安装配置与实操案例

以下是对Playwright MCP的简单介绍&#xff1a; Playwright MCP 是一个基于 Playwright 的 MCP 工具&#xff0c;提供浏览器自动化功能不要求视觉模型支持&#xff0c;普通的文本大语言模型就可以通过结构化数据与网页交互支持多种浏览器操作&#xff0c;包括截图、点击、拖动…...

数据库、数据仓库、数据中台、数据湖相关概念

文章目录 序言1数据库&#xff0c;数据仓库&#xff0c;数据中台&#xff0c;数据湖-概念对比释义1.1概念产生的时间顺序1.2在使用功能方面对比1.3在使用工具方面对比 2数据仓库2.1数据仓库的发展阶段2.2 数据仓库的设计2.3数据仓库常用工具&#xff0c;方法2.3.1分析型数据库和…...

70年使用权的IntelliJ IDEA Ultimate安装教程

安装Java环境 下载Java Development Kit (JDK) 从Oracle官网或OpenJDK。推荐选择JDK 11或更高版本。 运行下载的安装程序&#xff0c;按照提示完成安装。注意记录JDK的安装路径&#xff08;如C:\Program Files\Java\jdk-11.0.15&#xff09;。 配置环境变量&#xff1a; 右键…...