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

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

news 2026/5/13 15:39:03

一 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

基于本地大模型与Playwright的隐私优先求职自动化助手RedClaw实践

1. 项目概述：一个真正为你掌控的本地化求职AI助手在求职季，我们常常面临一个两难困境：一方面，海投简历耗时耗力，重复填写那些大同小异的在线申请表让人筋疲力尽；另一方面，市面上一些所谓的“自动…...

编程新知 2026/5/13 14:30:39

别再手动写Prompt了！Lovable原生AI编排引擎深度解析（附12个已验证行业工作流）

更多请点击： https://intelliparadigm.com 第一章：Lovable无代码AI应用构建指南 Lovable 是一款面向业务人员与开发者的低门槛 AI 应用构建平台，它通过可视化编排、预置模型组件和自然语言驱动逻辑，实现无需编写代码即可部署可运…...

编程新知 2026/5/13 14:15:09

使用Taotoken后API调用延迟稳定在可接受范围且账单清晰可见

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度使用Taotoken后API调用延迟稳定在可接受范围且账单清晰可见 1. 引言对于需要集成大模型能力的开发者而言，除了模型效…...

编程新知 2026/5/13 13:09:20

Adobe-GenP 3.0：三步解锁Adobe全家桶的终极指南

Adobe-GenP 3.0：三步解锁Adobe全家桶的终极指南【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP 还在为昂贵的Adobe Creative Cloud订阅费而烦恼吗&#…...

编程新知 2026/5/13 11:59:49