JavaWeb——前端之AjaxVue

news2024/11/25 5:46:46

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1350193.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大数据时代快速获取数据方法,爬虫技术理论剖析与实战演练

一、教程描述 人工智能和机器学习&#xff0c;都离不开数据&#xff0c;若是没有数据&#xff0c;再好的算法&#xff0c;再好的模型&#xff0c;都没有用武之地。数据不仅是指现成的数据库&#xff0c;更加是指每天增加的海量互联网数据。本套教程将通过多个实战项目&#xf…

Spring Boot 3 集成 Jasypt详解

随着信息安全的日益受到重视&#xff0c;加密敏感数据在应用程序中变得越来越重要。Jasypt&#xff08;Java Simplified Encryption&#xff09;作为一个简化Java应用程序中数据加密的工具&#xff0c;为开发者提供了一种便捷而灵活的加密解决方案。本文将深入解析Jasypt的工作…

docker 部署教学版本

文章目录 一、docker使用场景及常用命令1&#xff09;docker使用场景2&#xff09;rocky8(centos8)安装 docker3&#xff09;docker 常用命令补充常用命令 二、 单独部署每个镜像&#xff0c;部署spring 应用镜像推荐&#xff08;2023-12-18&#xff09;1、 安装使用 mysql1.1 …

STM32的HAL环境搭建

下载 https://www.st.com/en/development-tools/stm32cubemx.html 根据不同平台下载&#xff0c;windows下载window是即可。 安装 解压 下载的是zip文件&#xff0c;进行解压&#xff0c;得到一个exe文件。 安装 得到的exe文件&#xff0c;必须放到一个没有空格&#xff0…

[每周一更]-(第43期):Golang版本的升级历程

从1.13接触go语言开始更新我们公司内第一个Go项目&#xff0c;直至现在go版本已经发展到1.20&#xff08;20230428&#xff09;&#xff0c;我们从go发版开始认识go语言&#xff0c;有利于我们更深入 了解这门语言&#xff0c;洞悉一些深层方式&#xff0c;加深我们学习的动力&…

nginx源码分析-4

这一章内容讲述nginx的模块化。 ngx_module_t&#xff1a;一个结构体&#xff0c;用于描述nginx中的各个模块&#xff0c;其中包括核心模块、HTTP模块、事件模块等。这个结构体包含了一些模块的关键信息和回调函数&#xff0c;以便nginx在运行时能够正确地加载和管理这些模块。…

3个值得推荐的WPF UI组件库

WPF介绍 WPF 是一个强大的桌面应用程序框架&#xff0c;用于构建具有丰富用户界面的 Windows 应用。它提供了灵活的布局、数据绑定、样式和模板、动画效果等功能&#xff0c;让开发者可以创建出吸引人且交互性强的应用程序。 HandyControl HandyControl是一套WPF控件库&…

c# 捕获全部线程的异常 试验

1.概要 捕获全部线程的异常 试验&#xff0c;最终结果task的异常没有找到捕获方法 2.代码 2.1.试验1 2.1.1 试验结果 2.2 代码 2.2.1主程序代码 using NLog; using System; using System.Threading; using System.Windows.Forms;namespace 异常监控 {static class Program…

es简单入门

星光下的赶路人star的个人主页 努力努力再努力 文章目录 1、简介2、使用场景3、基本知识4、中文文档和官网链接5、增删改查&#xff08;php代码&#xff09;6、基本查询7、HTTP操作7.1 索引操作7.1.1 创建索引 7.2 文档操作7.2.1 创建文档7.2.2 查看文档7.2.3 修改文档7.2.4 修…

机器学习(二) -- 数据预处理(1)

系列文章目录 机器学习&#xff08;一&#xff09; -- 概述 机器学习&#xff08;二&#xff09; -- 数据预处理&#xff08;1-3&#xff09; 未完待续…… 目录 系列文章目录 前言 一、概述 二、数据获取 三、数据分布与趋势探查 1、散点图 2、折线图 3、频率分布直…

Weblogic安全漫谈(一)

前言 frohoff在2015年初发现commons-collections的反序列化利用链并发布了ysoserial工具[1]。9个月后&#xff0c;breenmachine对众多知名Java中间件的利用文章[2]使Java反序列化漏洞变得广为人知&#xff0c;Weblogic中首当其冲的就是大家多少都有点耳熟的T3协议反序列化。本…

算法训练营Day34(贪心算法)

1005.K次取反后最大化的数组和 1005. K 次取反后最大化的数组和 - 力扣&#xff08;LeetCode&#xff09; 秒了 class Solution {public int largestSumAfterKNegations(int[] nums, int k) {Arrays.sort(nums);// -4 -3 -2 -1 5//-2 -2 0 2 5int last -1;for(int i 0;i<…

VS Code 远程连接云机器训练配置

VS Code 远程连接云机器 Visual Studio Code&#xff08;以下简称 VS Code&#xff09;是一个由微软开发的代码编辑器。VS Code 支持代码补全、代码片段、代码重构、Git 版本控制等功能。 安装 VSCode步骤简单且网上有很多教程&#xff0c;这里不过多重复了。 VS Code 现已支…

如何使用批量重命名技巧:将文件名称中文翻译成英文

在日常生活和工作中&#xff0c;经常要处理大量的文件&#xff0c;其中很多文件的名称是中文的。有时&#xff0c;要更好地与国际接轨或是满足特定的需求&#xff0c;要将这些中文文件名称翻译成英文。一个一个手动翻译不仅效率低下&#xff0c;而且容易出错。此时&#xff0c;…

深度学习|10.2 边缘检测示例 10.3 更多边缘检测

文章目录 如何在编程中实现卷积运算使用卷积实现边缘检测结果矩阵的元素正负性质的意义水平分类器如何构造卷积运算使用的矩阵 原矩阵通过一个过滤器&#xff08;filter&#xff09;/核心&#xff08;kernel&#xff09;来生成一个新的矩阵。 如何在编程中实现卷积运算 使用卷积…

如何基于 ESP32-S3 和 ESP32-H2 产品构建 WiFi +Thread 边界路由器?

参考文档&#xff1a; Building the images for ESP Thread Border Router and CLI device and forming a Thread network with the devices 硬件准备&#xff1a; ESP32-S3-DevKitC-1ESP32-H2-DevKitM-1 软件准备&#xff1a; esp-idf/ examples/ openthread/ ot_rcp&#x…

AD教程 (二十二) Class、设计参数、规则的创建

AD教程 (二十二) Class、设计参数、规则的创建 CLASS 对于我们的板子需要去区分电源和信号按N&#xff0c;点击隐藏连接&#xff0c;全部&#xff0c;显示飞线&#xff0c;哪一些线是电源走线&#xff0c;哪一些线是信号传输走线&#xff0c;需要我们进行区分&#xff0c;这就…

MAC电脑安装java开发工具

一、安装brew 1.1、官网地址 链接 1.2、更新地址 二、安装 java brew install openjdk11 三、安装gradle Gradle安装与配置教程 - 知乎 四、GIT 4.1、GIT安装 brew install git 4.2、rsa ssh-keygen -t rsa -C "jhestarbucks.com" 五、自动搭建一个springBoot…

idea中java maven程序打JAR包的方式

JAR包是一种文件格式&#xff0c;用于将Java类、资源和元数据打包到一个文件中。它通常用于将Java库、应用程序或模块分发给其他开发人员或部署到不同的环境中。JAR包可以包含许多不同类型的文件&#xff0c;包括.class文件&#xff08;编译后的Java类&#xff09;、.java文件&…

【计算机毕业设计】SSM电器商城系统

项目介绍 本项目分为前后台&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,销售统计,商品类目管理,用户管理,商品管理,订单管理,公告管理,留言管理等功能。 用户角色包含以下功能&#xff1a; 浏…