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

第5篇 vue的通信框架axios和ui框架-element-ui以及node.js

news 2026/3/28 1:10:41

一 axios的使用

1.1 介绍以及作用

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端。

在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

1.2 案例使用axios实现前后端数据交互

1.后端代码

2.前端代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><table border="1"><tr><td>id</td><td>姓名</td></tr><tr v-for="item in memberList"><td>{{item.name}}</td><td>{{item.age}}</td></td></tr></table></div><script src="vue.min.js"></script><script src="axios.min.js"></script><script>var app = new Vue({el: '#app',data: {memberList: []//数组},created() {this.getList()},methods: {getList(id) {//vm = thisaxios.get('http://localhost:8080/axtest').then(response => {console.log(response)alert( response.data.data.item);this.memberList = response.data.data.item}).catch(error => {console.log(error)})}}
})</script>
</body></html>

3.运行效果

二 element-ui组件

1.1 ui组件库

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建。

官网： http://element-cn.eleme.io/#/zh-CN

1.2 案例

1.代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head><body><div id="app"><el-button @click="visible = true">Button</el-button><el-dialog :visible.sync="visible" title="Hello world"><p>Try Element</p></el-dialog></div><script src="vue.min.js"></script><!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: function() {//定义Vue中data的另一种方式return { visible: false }}})</script>
</body></html>

2.效果

三 node.js组件

3.1 node.js组件

nodejs是服务端的js框架。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

3.2 案例

1.新建文件index.js

console.log('Hello Node.js')

2.新建server.js文件

const http = require('http');
http.createServer(function (request, response) {// 发送 HTTP 头部 // HTTP 状态值: 200 : OK// 内容类型: text/plainresponse.writeHead(200, {'Content-Type': 'text/plain'});// 发送响应数据 "Hello World"response.end('Hello Server');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

3.效果

4.页面

四 NPM

4.1 NPM的作用

NPM全称Node Package Manager，类似后端管理工具maven，是前端管理js库的项目管理工具。

4.2 Npm与node关系

Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules

4.3 案例操作

1.初始化工程，输入命令：npm init -y ，初始化后，生成一个package.json文件

2.下载具体依赖

3.下载package.json中指明的依赖

第5篇 vue的通信框架axios和ui框架-element-ui以及node.js

一 axios的使用 1.1 介绍以及作用 axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端。在浏览器中可以帮助我们完成 ajax请求的发送在node.js中可以向远程接口发送请求 1.2 案例使用axios实现前后端数据交互 1.后端代码 2.前端代码 &…...

编程日记 2023/9/10 6:08:40

RabbitMQ 知识点解读

1、AMQP 协议 1.1、AMQP 生产者的流转过程当客户端与Broker 建立连接的时候，会调用factory .newConnection 方法，这个方法会进一步封装成Protocol Header 0-9-1 的报文头发送给Broker ，以此通知Broker 本次交互采用的是AMQPO-9-1 协议&…...

编程日记 2023/9/10 6:07:39

SimVODIS++: Neural Semantic Visual Odometry in Dynamic Environments 论文阅读

论文信息题目：SimVODIS: Neural Semantic Visual Odometry in Dynamic Environments 作者：Ue-Hwan Kim , Se-Ho Kim , and Jong-Hwan Kim , Fellow, IEEE 时间：2022 来源： IEEE ROBOTICS AND AUTOMATION LETTERS（RAL…...

编程日记 2023/9/10 6:06:37

7.Xaml Image控件

1.运行图片 2.运行源码 a.xaml源码 <Image x:Name...

编程日记 2023/9/10 6:05:37

Solidity 小白教程：11. 构造函数和修饰器

Solidity 小白教程：11. 构造函数和修饰器这一讲，我们将用合约权限控制（Ownable）的例子介绍solidity语言中构造函数（constructor）和独有的修饰器（modifier）。构造函数构造函数&…...

编程日记 2023/9/10 6:04:33

静态工厂模式 ublic class FruitFactory {public static Fruit getFruit(String name) {Fruit fnull;switch (name){case "APPLE":{fnew Apple();}case "BANANA":{fnew Banana();}default :{System.out.println("Unknown Fruit");}}return f;} …...

编程日记 2023/9/10 6:03:33

【动手学深度学习笔记】--门控循环单元GRU

文章目录门控循环单元GRU1.门控隐状态1.1重置门和更新门1.2候选隐状态1.3隐状态 2.从零开始实现2.1读取数据2.2初始化模型参数2.3定义模型2.4训练与预测 3.简洁实现门控循环单元GRU 学习视频：门控循环单元（GRU）【动手学深度学习v2】官方…...

编程日记 2023/9/10 6:02:32

浅析linux异步io框架 io_uring

前言 Linux内核5.1支持了新的异步IO框架iouring，由Block IO大神也即Fio作者Jens Axboe开发，意在提供一套公用的网络和磁盘异步IO，不过io_uring目前在磁盘方面要比网络方面更加成熟。目录背景简介 io_uring 系统API liburing 高级特性…...

编程日记 2023/9/10 6:01:31

访问者模式的一个使用案例——文档格式转换

访问者模式的一个使用案例——文档格式转换假设我们在开发一个文档编辑器，它支持多种不同的文档元素（如段落、图片、表格等），现在我们需要添加一个功能——将文档导出为 HTML 或 Markdown 格式。这就是一个典型的访问者模式的…...

编程日记 2023/9/10 6:00:30

【MySql】数据库的聚合查询

写在最前面的话哈喽，宝子们，今天给大家带来的是MySql数据库的聚合查询。在前面CRUD章节我们学习了表达式查询，表达式查询是针对列和列之间进行运算的，那么如果想在行和行之间进行运算，那么就需要用到聚合查询。聚合查…...

编程日记 2023/9/10 5:59:29

Linux初探 - 概念上的理解和常见指令的使用

目录 Linux背景 Linux发展史 GNU 应用场景发行版本从概念上认识Linux 操作系统的概念用户的概念路径与目录 Linux下的文件时间戳的概念常规权限特殊权限 Shell的概念常用指令 ls tree stat clear pwd echo cd touch mkdir rmdir rm cp mv …...

编程日记 2023/9/10 5:58:28

苹果上架Guideline 4.3 - Design

最近上架苹果商店，审核提示 Guideline 4.3 - DesignWe noticed your app shares a similar binary, metadata, and/or concept as apps previously submitted by a terminated Apple Developer Program account.Submitting similar or repackaged apps is a form o…...

编程日记 2023/9/10 5:57:27

【数据分析入门】【淘宝电商API接入与电商数据分析】初识Web API(一)

今天开始我们将学习如何使用Web应用变成借口(API)自动请求网站到特定信息而不是整个网站，再对这些信息进行可视化。由于这样编写到程序始终使用最新到数据来生成可视化，因此即便数据瞬息万变，它呈现到信息也都是最新的。比如，我们…...

编程日记 2023/9/10 5:56:26

蓝桥杯官网练习题（李白打酒）

题目描述本题为填空题，只需要算出结果后，在代码中使用输出语句将所填结果输出即可。话说大诗人李白，一生好饮。幸好他从不开车。一天，他提着酒壶，从家里出来，酒壶中有酒2斗。他边走边唱： …...

编程日记 2023/9/10 5:55:25

聚类分析 | MATLAB实现基于SOM自组织特征映射聚类可视化

聚类分析 | MATLAB实现基于SOM自组织特征映射聚类可视化目录聚类分析 | MATLAB实现基于SOM自组织特征映射聚类可视化效果一览基本介绍程序设计参考资料效果一览基本介绍基于自组织特征映射聚类算法(SOM)的数据聚类可视化可直接运行注释清晰 Matlab语言 1.多特征输入&…...

编程日记 2023/9/10 5:54:24

Spring AOP：面向切面编程在实际项目中的应用

🌷🍁 博主猫头虎（🐅🐾）带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…...

编程日记 2023/9/10 5:52:21

python爬虫的反扒技术有哪些如何应对

Python爬虫常见的反扒技术主要有以下几种: IP封禁：有些网站会限制爬虫的IP访问频率，如果访问流量过大，可能会被封禁IP。可以通过使用代理IP或者轮换IP的方式规避此类反扒技术。用户代理限制：有些网站会通过检测请求头中的用户代…...

编程日记 2023/9/10 5:51:20

网络原理，了解xml, json,protobuffer的特点

目录外卖服务器场景带入大佬们通用的规范格式一、👦 外卖服务器场景外面服务器沟通有很多模式——展示商家列表等等，只是其中一个，因此需要一个统一的规划了——不同应用程序，里面的自定义格式是不一样的，这样的…...

编程日记 2023/9/10 5:50:19

工具 | XShell的学习与使用

工具 | XShell的学习与使用时间：2023年9月8日09:03:29 文章目录工具 | XShell的学习与使用1.下载2.安装 1.下载 1.官网XSHELL - NetSarang Website 2.免费版下载：家庭/学校免费 - NetSarang Website (xshell.com) 3.https://cdn.netsarang.net/de06d10…...

编程日记 2023/9/10 5:49:17

基于微服务+Java+Spring Cloud +UniApp +MySql开发的智慧工地源码（物联网、人工智能、AI识别、危大工程）

智慧工地系统利用物联网、人工智能、云计算、大数据、移动互联网等新一代信息技术，通过工地中台、三维建模服务、视频AI分析服务等技术支撑，实现智慧工地高精度动态仿真，趋势分析、预测、模拟，建设智能化、标准化的智慧工地综合业…...

编程日记 2023/9/10 5:48:15

Easy-Scraper：Rust 构建的现代化网页数据采集解决方案

Easy-Scraper：Rust 构建的现代化网页数据采集解决方案【免费下载链接】easy-scraper Easy scraping library 项目地址: https://gitcode.com/gh_mirrors/ea/easy-scraper 在数据驱动决策的时代，网页数据采集已成为企业获取市场情报、研究人员收集…...

编程新知 2026/3/27 23:52:56

UniAppX项目数据可视化升级：用lime-echart + ECharts打造高性能图表（从Vue2/Vue3到uni-app-x全流程）

UniAppX高性能数据可视化实战：lime-echart与ECharts的深度整合指南当移动端数据可视化需求遭遇性能瓶颈时，UniAppX框架与lime-echart的组合正在成为技术决策者的新选择。本文将揭示如何在不同技术栈中实现图表渲染性能的突破性提升，从原理剖…...

编程新知 2026/3/27 23:10:36

浅析Python中正则表达式的性能优化

在Python开发中，正则表达式是处理文本的利器，但如果使用不当，很容易成为性能瓶颈。尤其是在处理大文本或高频调用场景下，正则的执行效率直接影响整个程序的运行速度。本文将从正则匹配的底层逻辑出发，总结实用的性能优…...

编程新知 2026/3/27 23:04:34

离网逆变器下垂控制实战：从公式推导到MATLAB仿真（附资源下载）

离网逆变器下垂控制实战：从公式推导到MATLAB仿真在新能源发电系统中，离网逆变器的稳定运行至关重要。传统电压电流双闭环控制虽然简单直接，但在面对复杂负载变化时，往往会出现电压跌落、频率失稳等问题。下垂控制技术通过模拟同…...

编程新知 2026/3/27 22:56:26

UniApp+Vue3避坑指南：为什么getAppWebview会失效？从原理到解决方案

UniAppVue3深度解析：getAppWebview失效的底层逻辑与工程化解决方案在UniApp与Vue3的技术栈组合中，不少开发者遭遇过getAppWebview神秘失效的困境。这个看似简单的API调用问题，背后却隐藏着Vue3响应式系统变革与UniApp多端渲染机制的深层交互…...

编程新知 2026/3/27 22:40:23

Qwen3.5-4B-Claude-Opus部署教程：模型路径软链失效时的容错加载机制

Qwen3.5-4B-Claude-Opus部署教程：模型路径软链失效时的容错加载机制 1. 模型概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B的推理蒸馏模型，特别强化了结构化分析、分步骤回答以及代码与逻辑类问题的处理能力。该版本以GG…...

编程新知 2026/3/27 21:25:49