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

5.Vue_Element

文章目录

  • 1 Ajax
    • 1.1 Ajax介绍
      • 1.1.1 Ajax概述
      • 1.1.2 Ajax作用
      • 1.1.3 同步异步
    • 1.2 Axios
      • 1.2.1 Axios的基本使用
      • 1.2.2 Axios请求方法的别名
  • 2 前端工程化
    • 2.1 前端工程化特点
    • 2.2 Vue项目开发流程
  • 3 Vue组件库Element
    • 3.1 Element介绍

1 Ajax

1.1 Ajax介绍

1.1.1 Ajax概述

Ajax: 全称Asynchronous JavaScript And XML,异步的JavaScript和XML。其作用有如下2点:

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

1.1.2 Ajax作用

  • 与服务器进行数据交互
  • 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术

1.1.3 同步异步

  • 同步请求:浏览器页面在发送请求给服务器,在服务器处理请求的过程中,浏览器页面不能做其他的操作。只能等到服务器响应结束后才能,浏览器页面才能继续做其他的操作。
  • 异步请求:
  • 浏览器页面发送请求给服务器,在服务器处理请求的过程中,浏览器页面还可以做其他的操作。

1.2 Axios

  • Axios是对原生的AJAX进行封装,简化书写。
  • Axios官网是:https://www.axios-http.cn

1.2.1 Axios的基本使用

Axios的使用比较简单,主要分为2步:

  • 引入Axios文件

    <script src="js/axios-0.18.0.js"></script>
    
  • 使用Axios发送请求,并获取响应结果,官方提供的api很多,此处给出2种,如下

    • 发送 get 请求

      axios({method:"get",url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
      }).then(function (resp){alert(resp.data);
      })
      
    • 发送 post 请求

      axios({method:"post",url:"http://localhost:8080/ajax-demo1/aJAXDemo1",data:"username=zhangsan"
      }).then(function (resp){alert(resp.data);
      });
      

    axios()是用来发送异步请求的,小括号中使用 jsJSON对象传递请求相关的参数:

    • method属性:用来设置请求方式的。取值为get或者 post
    • url属性:用来书写请求的资源路径。如果是 get 请求,需要将请求参数拼接到路径的后面,格式为: url?参数名=参数值&参数名2=参数值2
    • data属性:作为请求体被发送的数据。也就是说如果是 post 请求的话,数据需要作为data属性的值。

    then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象,通过resp.data可以获取到响应的数据。

1.2.2 Axios请求方法的别名

Axios还针对不同的请求,提供了别名方式的api,具体如下:

方法描述
axios.get(url [, config])发送get请求
axios.delete(url [, config])发送delete请求
axios.post(url [, data[, config]])发送post请求
axios.put(url [, data[, config]])发送put请求

2 前端工程化

2.1 前端工程化特点

前端工程化:在企业级的前端项目开发中,把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率,降低开发难度等等。它具有以下四个特点:

  • 模块化:将js和css等,做成一个个可复用模块
  • 组件化:我们将UI组件,css样式,js行为封装成一个个的组件,便于管理
  • 规范化:我们提供一套标准的规范的目录接口和编码规范,所有开发人员遵循这套规范
  • 自动化:项目的构建,测试,部署全部都是自动完成

2.2 Vue项目开发流程

对于vue项目,index.html文件默认是引入了入口函数main.js文件,找到src/main.js文件,其代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

上述代码中,包括如下几个关键点:

  • import: 导入指定文件,并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
  • new Vue(): 创建vue对象
  • $mount(‘#app’);将vue对象创建的dom对象挂在到id=app的这个标签区域中,作用和之前学习的vue对象的le属性一致。
  • router: 路由,详细在后面的小节讲解
  • render: 主要使用视图的渲染的。

接下来说一下App.vue文件,他的代码大致是这样的

<template><div id="app">{{message}}</div>
</template><script>
export default {data(){return {"message":"hello world"}}
}
</script>
<style></style>

需要注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分:

  • template: 模板部分,主要是HTML代码,用来展示页面主体结构的
  • script: js代码区域,主要是通过js代码来控制模板的数据来源和行为的
  • style: css样式部分,主要通过css样式控制模板的页面效果得

3 Vue组件库Element

3.1 Element介绍

  • ElementUI就是一款侧重于V开发的前端框架,主要用于开发美观的页面的。

  • Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。

  • Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等。

  • ElementUI的学习方式和我们之前的学习方式不太一样,对于ElementUI,我们作为一个后台开发者,只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中,并且做一些修改即可

  • 官网地址:https://element.eleme.cn/#/zh-CN

相关文章:

5.Vue_Element

文章目录 1 Ajax1.1 Ajax介绍1.1.1 Ajax概述1.1.2 Ajax作用1.1.3 同步异步 1.2 Axios1.2.1 Axios的基本使用1.2.2 Axios请求方法的别名 2 前端工程化2.1 前端工程化特点2.2 Vue项目开发流程 3 Vue组件库Element3.1 Element介绍 1 Ajax 1.1 Ajax介绍 1.1.1 Ajax概述 Ajax: 全…...

链路追踪jaeger

这里的链路指的是客户端向服务发起一个请求&#xff0c;该请求所经过的路线&#xff0c;也可以说是该请求经过的流量 例如&#xff1a; 客户端发起一个下订单的请求其流量过程&#xff1a; request—>service—>order-web—>order_srv—>mysql—>order_srv—&…...

神经网络基础-神经网络补充概念-42-梯度检验

概念 梯度检验&#xff08;Gradient Checking&#xff09;是一种验证数值计算梯度与解析计算梯度之间是否一致的技术&#xff0c;通常用于确保实现的反向传播算法正确性。在深度学习中&#xff0c;通过梯度检验可以帮助验证你的神经网络模型是否正确地计算了梯度&#xff0c;从…...

<kernel>kernel 6.4 USB-之-hub_port_connect()分析

&#xff1c;kernel&#xff1e;kernel 6.4 USB-之-hub_port_connect()分析 kernel 6.4 USB系列文章如下&#xff1a; &#xff1c;kernel&#xff1e;kernel 6.4 USB-之-hub_event()分析 &#xff1c;kernel&#xff1e;kernel 6.4 USB-之-port_event()分析 &#xff1c;kern…...

linux驱动学习3-外部中断

在做中断试验时&#xff0c;发现中断驱动总是insmod失败&#xff0c;之后定位到 gpio_request 失败&#xff0c;之后是想到使用的野火做好的系统&#xff0c;在uEnv.txt中会加载大量设备树插件&#xff0c;将key相关的设备树插件屏蔽即可。 linux中断API函数 中断号 每个中断…...

vue中的canvas插件

vue中canvas插件有vue-konva、vue-fabricjs、vue-canvas-effect、vue-chartjs和vue-threejs等。详细介绍&#xff1a;1、vue-konva是一个用于在Vue.js中使用Konva.js的插件&#xff0c;Konva.js是一个功能强大的HTML5 2D 渲染引擎&#xff0c;可以用于创建交互式的Canvas应用程…...

分享图片 | 快速浏览网页资源,批量保存、一键分享图片

前言 小伙伴学习吉他&#xff0c;有时需要在互联网搜索曲谱资源&#xff0c;而多数曲谱均为图片&#xff0c;并且为多页&#xff0c;在电脑上显示练习很不方便&#xff0c;需要停下来点击鼠标进行翻页&#xff0c;影响练习的连贯性。 为了解决上述问题&#xff0c;通常把图片…...

Programming abstractions in C阅读笔记:p123-p126

《Programming Abstractions In C》学习第50天&#xff0c;p123-p126&#xff0c;总结如下&#xff1a; 一、技术总结 1.notaion 这也是一个在计算机相关书籍中出现的词&#xff0c;但有时却不是那么好理解&#xff0c;因为它可以指代很多对象&#xff0c;这里做一个记录。示…...

自然语言处理从入门到应用——LangChain:链(Chains)-[通用功能:LLMChain、RouterChain和SequentialChain]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 LLMChain LLMChain是查询LLM对象最流行的方式之一。它使用提供的输入键值&#xff08;如果有的话&#xff0c;还包括内存键值&#xff09;格式化提示模板&#xff0c;将格式化的字符串传递给LLM&#xff0c;并返回LLM…...

ElasticSearch-安装部署全过程

本文已收录于专栏 《中间件合集》 目录 概念说明什么是ElasticSearch什么是Kibana什么是RESTful API 提供服务安装过程安装ElasticSearch1.下载ElasticSearch 安装包2.解压安装包3.进入解压之后的文件夹4.创建一个data文件夹用来存储数据5.进入config文件夹编辑elasticsearch.y…...

mathematica报错:Tag Plus is \ Protected

在使用化简函数Simplify的时候使用了规则的语法&#xff0c;但是规则可能没有使用等号。 例如 Simplify[(1 - c^2)/d^2, c^2 d^2 1]等号被认为是赋值符号&#xff0c;要修改为两个等号&#xff1a; Simplify[(1 - c^2)/d^2, c^2 d^2 1]这样就不会报错了。...

Python Django 模型概述与应用

今天来为大家介绍 Django 框架的模型部分&#xff0c;模型是真实数据的简单明确的描述&#xff0c;它包含了储存的数据所必要的字段和行为&#xff0c;Django 遵循 DRY Principle 。它的目标是你只需要定义数据模型&#xff0c;然后其它的杂七杂八代码你都不用关心&#xff0c;…...

Golang Gorm 更新字段 save update updates

更新和删除操作的前提条件都是要在找到数据的情况下&#xff0c;先要查询到数据才可以做操作。 更新的前提的先查询到记录&#xff0c;Save保存所有字段&#xff0c;用于单个记录的全字段更新它会保控所有字段&#xff0c;即使零值也会保存。 在更新和删除之前&#xff0c;要利…...

springBoot 配置文件引入 redis 的相关参数说明

在Spring Boot应用中使用Redis作为缓存或数据存储时&#xff0c;可以在应用的配置文件中配置相关参数。下面是常用的Redis配置参数及其说明&#xff1a; spring.redis.host: Redis服务器主机地址&#xff0c;默认为localhost。spring.redis.port: Redis服务器端口&#xff0c;…...

Docker的使用心得:简化开发与部署的利器

开发与测试的无缝衔接&#xff1a; Docker让开发与测试之间的切换变得前所未有的顺畅。我可以在本地开发环境中创建一个与生产环境一致的Docker容器&#xff0c;这样不仅可以确保开发过程中不会出现意外问题&#xff0c;还可以在测试阶段避免不必要的繁琐配置。 跨平台的可移植…...

vue3 基于element plus对el-pagination进行二次封装

vue3 基于element plus对el-pagination进行二次封装 1、前言2、在components文件夹中新建pagination.vue文件3、在组件内使用分页 1、前言 在vue3项目中&#xff0c;如果每个列表页都敲一遍分页方法&#xff0c;显然是不合理的&#xff0c;那么&#xff0c;下面我将基于elemen…...

RuntimeError: result type Float can‘t be cast to the desired output type __int64报错解决方法

小白刚开始学习YOLOv5&#xff0c;跟随老哥的步骤走了一遍目标检测--手把手教你搭建自己的YOLOv5目标检测平台 最后训练最后一步出现RuntimeError: result type Float can‘t be cast to the desired output type __int64报错 解决方法&#xff1a;找到5.0版报错的loss.py中最…...

解析Python爬虫常见异常及处理方法

作为专业爬虫程序猿长期混迹于爬虫ip解决方案中&#xff0c;我们经常会遇到各种各样的异常情况。在爬虫开发过程中&#xff0c;处理这些异常是不可或缺的一部分。本文将为大家总结常见的Python爬虫异常&#xff0c;并分享相应的处理方法&#xff0c;帮助你避免绊倒在爬虫之路上…...

详解Spring的循环依赖问题、三级缓存解决方案源码分析

0、基础&#xff1a;Bean的生命周期 在Spring中&#xff0c;由于IOC的控制反转&#xff0c;创建对象不再是简单的new出来&#xff0c;而是交给Spring去创建&#xff0c;会经历一系列Bean的生命周期才创建出相应的对象。而循环依赖问题也是由Bean的生命周期过程导致的问题&#…...

oracle分析函数学习

0、建表及插入测试数据 --CREATE TEST TABLE AND INSERT TEST DATA. create table students (id number(15,0), area varchar2(10), stu_type varchar2(2), score number(20,2));insert into students values(1, 111, g, 80 ); insert into students values(1, 111, j, 80 ); …...

从零开始:如何为你的深度学习项目选择最合适的开源数据集

从零开始&#xff1a;如何为你的深度学习项目选择最合适的开源数据集 当你站在深度学习项目的起点&#xff0c;面对琳琅满目的开源数据集时&#xff0c;如何做出明智的选择往往决定了项目的成败。数据集不仅是模型训练的"原材料"&#xff0c;更是影响最终性能的关键变…...

目标检测新手必看:如何用Python手写IOU计算函数(附完整代码)

目标检测实战&#xff1a;从零编写Python版IOU计算函数 刚接触目标检测时&#xff0c;最让人困惑的莫过于那些神秘的评估指标。其中IOU&#xff08;交并比&#xff09;就像一把尺子&#xff0c;能量化算法预测框与真实框的贴合程度。但纸上得来终觉浅&#xff0c;今天我们就用P…...

OpenClaw资源监控方案:Qwen3-32B镜像驱动服务器健康巡检

OpenClaw资源监控方案&#xff1a;Qwen3-32B镜像驱动服务器健康巡检 1. 为什么需要AI驱动的资源监控&#xff1f; 去年我的个人开发服务器连续宕机三次&#xff0c;每次都是因为磁盘写满导致服务崩溃。传统监控工具虽然能发出警报&#xff0c;但往往在问题发生后才会触发&…...

深度学习项目训练环境多场景落地:中小企业AI研发团队低成本GPU训练环境方案

深度学习项目训练环境多场景落地&#xff1a;中小企业AI研发团队低成本GPU训练环境方案 1. 环境准备与快速上手 对于中小企业的AI研发团队来说&#xff0c;搭建一个稳定可靠的深度学习训练环境往往是个头疼的问题。硬件成本高、环境配置复杂、依赖库冲突等问题经常让团队望而…...

35:L构建数据泄露检测:蓝队的数据保护

作者&#xff1a; HOS(安全风信子) 日期&#xff1a; 2026-03-11 主要来源平台&#xff1a; GitHub 摘要&#xff1a; 当基拉开始针对数据进行攻击时&#xff0c;数据泄露成为蓝队防御的关键挑战。L构建了数据泄露检测系统&#xff0c;通过AI算法分析数据流动、访问模式和异常行…...

G-Helper:释放华硕笔记本性能潜能的轻量级控制工具

G-Helper&#xff1a;释放华硕笔记本性能潜能的轻量级控制工具 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目地址: …...

别再让时钟信号‘跑偏’了!手把手教你理解ADC中DCC电路的设计要点

高速ADC设计中的时钟占空比校正实战指南 时钟信号就像ADC系统的心跳&#xff0c;每一次跳动都决定着数据采样的精准度。当这个"心跳"变得不规律时&#xff0c;整个系统的性能就会大打折扣。在高速ADC设计中&#xff0c;时钟占空比失真是一个常见却又容易被忽视的问题…...

GitHub下载加速终极指南:告别龟速,3分钟让下载速度飙升300%

GitHub下载加速终极指南&#xff1a;告别龟速&#xff0c;3分钟让下载速度飙升300% 【免费下载链接】Fast-GitHub 国内Github下载很慢&#xff0c;用上了这个插件后&#xff0c;下载速度嗖嗖嗖的~&#xff01; 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub …...

零基础WordPress建站:可视化编辑器推荐(2026版-含下载)

&#x1f645;‍♀️ 零基础学WP建站&#xff0c;怕代码&#xff1f;怕复杂&#xff1f;怕翻车&#xff1f; 2026最新可视化编辑器实测合集来啦✨ 纯干货无链接&#xff0c;全程拖拽操作、所见即所得&#xff0c;小白也能轻松搭出专业网站&#xff0c;告别技术焦虑&#xff0c;…...

42-西门子1200伺服控制5轴程序 程序采用1200系列PLC,项目实现以下功能: (1)

42-西门子1200伺服控制5轴程序 程序采用1200系列PLC&#xff0c;项目实现以下功能&#xff1a; &#xff08;1&#xff09;.三轴机械手联动取放料PTO脉冲定位控制台达B2伺服 &#xff08;2&#xff09;.台达伺服速度模式应用扭矩模式应用实现收放卷 &#xff08;3&#xff09;.…...