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

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

news 2025/12/16 0:18:31

一 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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2025/12/15 19:28:52

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...

编程新知 2025/11/28 2:51:33

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现题目链接：3576. Transform Array to All Equal Elements 1. 解题思路这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...

编程新知 2025/12/12 3:35:27

【Linux】C语言执行shell指令

在C语言中执行Shell指令在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08