前端开发Web

Ajax

概念:Asynchronous JavaScriptAnd XML,异步的JavaScript和XML

作用:
        数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
        异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等

同步与异步

同步需“等待”,异步不需要

原生Ajax(较繁琐,一般不用)

1.准备数据地址:http://yapi.smart-xwork.cn/mock/169327/emp/list
2.创建XMLHttpRequest对象:用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据

Axios

简化了Ajax的书写

Axios入门

说明:

两个属性:method和url,method代表请求方式,url代表请求路径,如果要获取服务端响应回来的数据,后面就加上.then,之后传递一个函数(成功回调),该函数是Axios请求成功之后自动调用的函数,在该成功回调函数中可以接受一个JS对象result,然后通过result.data拿到result对象中的data属性,该data属性就是服务器响应回来的数据

请求方式别名:
axios.get(url [, config])
axios.delete(url [, config])
axios.post(url [, data[, config]])

axios.put(url [, datal, config]])
发送GET请求
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{fconsole.log(result.data);

});
发送POST请求
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld","id=1").then((result) =>{console.log(result.data);

});

说明:http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld为请求路径,逗号后面为请求参数

简化:

前后端分离开发

YAPi

介绍:YApI是高效、易用、功能强大的ap1管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务
地址:http://yapi.smart-xwork.cn/

1.添加项目

2.添加分类3.添加接口

调用接口时需要传递请求参数请求方式:GET;后面为请求路径

执行完毕后会返回数据

基本信息:

完善之后会自动生成一个Mock地址,前端人员在测试时可直接访问这个地址,会自动生成Mock测试数据,如下:

该数据是我们刚才在定义接口时所指定的字段,就是根据该字段规则返回的,如下:

如果要期望值,可以点击“高级Mock”,添加期望:

前端工程化

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

环境准备

Vue项目简介

命令行:vue create vue-project01
图形化界面:vue ui

目录结构

启动

方式一:

方式二:

开发流程

Vue组件库Element

什么是Element

Element:是饿了么团队研发的,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

组件:组成网页的部件,例如 超链接、按钮、图片、表格、表单、分页条等等

官网:https://element.eleme.cn/#/zh-CNListener

快速入门

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

debian中apt的配置与解析

引言 在系统使用过程中,我们可能会遭遇 apt update 操作出现问题,或者 apt upgrade 速度迟缓的情况。这往往是由于所使用软件源本身存在诸如服务器性能不佳、维护不及时等质量问题,同时,软件源服务器与我们所处地理位置的距离较远…

Docker 实现MySQL 主从复制

一、拉取镜像 docker pull mysql:5.7相关命令: 查看镜像:docker images 二、启动镜像 启动mysql01、02容器: docker run -d -p 3310:3306 -v /root/mysql/node-1/config:/etc/mysql/ -v /root/mysql/node-1/data:/var/lib/mysql -e MYS…

day03_开发前准备和匹配类标签

文章目录 day03_开发前准备和匹配类标签一、标签体系(了解)二、数据导入(操作)1、背景介绍(重要)2、创建Hive表2.1 dwm_sold_goods_sold_dtl_i2.2 dwm_sell_o2o_order_i**2.3 dwd_mem_member_union_i**2.4 dwm_mem_member_behavior_day_i**2.5 dwm_mem_first_buy_i**3、数…

Video-RAG:一种将视频RAG新框架

1. 摘要及主要贡献点 摘要: 检索增强生成(RAG)是一种强大的策略,通过检索与查询相关的外部知识并将其整合到生成过程中,以解决基础模型生成事实性错误输出的问题。然而,现有的RAG方法主要集中于文本信息&…

VSCode的配置与使用(C/C++)

从0开始教你在vscode调试一个C文件 一.首先是配置你的编译环境,添加到环境变量(默认你是全新的电脑,没有安装vs2019之类的) 原因:因为相比于vs2019,vscode只是个代码编辑器,相当于一个彩色的、…

MongoDB基本操作

一、实验目的 1. 熟悉MongoDB的基本操作,包括CRUD(增加、读取、更新、删除)。 2. 理解MongoDB的文档型数据库特性和Shell的使用。 3. 培养学生通过命令行操作数据库的能力。 4. 强化数据库操作的实际应用能力。 二、实验环境准备 1.…

python如何导出数据到excel文件

python导出数据到excel文件的方法: 1、调用Workbook()对象中的add_sheet()方法 wb xlwt.Workbook() ws wb.add_sheet(A Test Sheet) 2、通过add_sheet()方法中的write()函数将数据写入到excel中,然后使用save()函数保存excel文件 ws.write(0, 0, 1234…

STL--list(双向链表)

目录 一、list 对象创建 1、默认构造函数 2、初始化列表 3、迭代器 4、全0初始化 5、全值初始化 6、拷贝构造函数 二、list 赋值操作 1、赋值 2、assign(迭代器1,迭代器2) 3、assign(初始化列表) 4、assig…

eBPF 概述 | 学习

注:本文为 “ eBPF” 相关文章合辑。 未整理去重。 如有内容异常,请看原文。 【译】eBPF 概述:第 1 部分:介绍 2022-04-26257 1. 前言 深入研究 eBPF 的底层细节,从其虚拟机机制和工具,到在远程资源受限…

STM32学习之通用定时器

1.1通用定时器介绍 通用定时器具有基本定时器的所有特征,基本定时器只能递增计数,而通用定时器可以递减计数,可以中心对齐计数;也可以触发ADC和DAC,同时在更新事件,触发事件,输入捕获&#xff…

【Spring】定义的Bean缺少隐式依赖

问题描述 初学 Spring 时,我们往往不能快速转化思维。例如,在程序开发过程中,有时候,一方面我们把一个类定义成 Bean,同时又觉得这个 Bean 的定义除了加了一些 Spring 注解外,并没有什么不同。所以在后续使…

服务器日志自动上传到阿里云OSS备份

背景 公司服务器磁盘空间有限,只能存近15天日志,但是有时需要查看几个月前的日志,需要将服务器日志定时备份到某个地方,需要查询的时候有地方可查。 针对这个问题,想到3个解决方法: 1、买一个配置比较低…

使用 vllm 部署 MiniCPM-o 2.6

使用 vllm 部署MiniCPM-o 2.6 1. 创建虚拟环境2. 克隆代码3. 从代码安装 vllm4. 安装 flash-attn5. 启动 MiniCPM-o 2.66. 使用 chatbox 客户端访问并测试一下 1. 创建虚拟环境 conda create -n vllm_openbmb python3.11 -y conda activate vllm_openbmb 2. 克隆代码 git clo…

JavaScript笔记基础篇04——对象

黑马程序员视频地址:黑马程序员前端JavaScript入门到精通全套视频教程https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodes 目录 对象 对象的基本使用 1.对象声明语法 2.对象…

Autosar CP RTE规范解读之不同 BSW 接口的通知与软件组件激活机制:标准化接口与 AUTOSAR 接口的实现方式

在汽车电子系统开发中,特别是在遵循 AUTOSAR 架构的系统中,基本软件(BSW)模块之间的通信和信息通知机制至关重要,它直接影响着系统的性能、可靠性以及各个软件组件之间的协同工作能力。本文根据不同类型的 BSW 接口&am…

利用大语言模型进行长文本抽取式摘要的突破

论文地址:https://arxiv.org/pdf/2408.15801v1 引言:信息过载时代的文本摘要需求 在信息爆炸的时代,如何从海量文本中快速提取关键信息成为了一项至关重要的技能。自动文本摘要技术应运而生,主要分为抽取式和生成式两种方法。生成…

Quick get started with vcpkg, windows visual studio | CPP

本文属于 C 系列文章,本篇文章,是在 Quickstart C with cmake, visualstudio | CPP 基础上,继续的。 目录 vcpkg总结安装安装 mingw64安装 vcpkg 创建项目查询已有的包在 Visual Studio 中调试发布依赖Trouble ShootingCMake Error: CMake wa…

《Linux服务与安全管理》| 邮件服务器安装和配置

《Linux服务与安全管理》| 邮件服务器安装和配置 目录 《Linux服务与安全管理》| 邮件服务器安装和配置 1.在Server01上安装dns、postfix、dovecot和telnet,并启动 2.在Server01上配置DNS服务器,设置MX资源记录 3.在server1上…

BGP分解实验·9——路由聚合与条件性通告(1)

路由聚合是有效控制缩减BGP路由表的方法之一,路由聚合的前提和IGP一样,需要有路由目标存在BGP表中,与IGP不同的是,BGP路由聚合可以定义按需抑制路由的能力。 实验拓扑如下所示: 现在开始把从R1的R5的基础配置先准备好…

Spring Boot 配置(官网文档解读)

目录 摘要 Spring Boot 配置加载顺序 配置文件加载顺序 Spring Boot 配置加载方式 Value Value 注解简单示例 ConfigurationProperties 启动 ConfigurationProperties ConfigurationProperties 验证 ConfigurationProperties 与 Value 对比 Autowired Autowired 自…