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

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

news 文章来源：https://blog.csdn.net/u011066470/article/details/132772987 2024/11/30 18:45:06

一 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的一个项目&#xff0c;基于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 建立连接的时候&#xff0c;会调用factory .newConnection 方法&#xff0c;这个方法会进一步封装成Protocol Header 0-9-1 的报文头发送给Broker &#xff0c;以此通知Broker 本次交互采用的是AMQPO-9-1 协议&…...

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

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

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

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

7.Xaml Image控件

1.运行图片 2.运行源码 a.xaml源码 <!--Source="/th.gif" 图像源--><!--Stretch="Fill" 填充模式--><Image x:Name...

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

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

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

编程日记 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 学习视频&#xff1a;门控循环单元&#xff08;GRU&#xff09;【动手学深度学习v2】 官方…...

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

浅析linux异步io框架 io_uring

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

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

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

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

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

【MySql】数据库的聚合查询

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

编程日记 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

最近上架苹果商店&#xff0c;审核提示 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)自动请求网站到特定信息而不是整个网站&#xff0c;再对这些信息进行可视化。由于这样编写到程序始终使用最新到数据来生成可视化&#xff0c;因此即便数据瞬息万变&#xff0c;它呈现到信息也都是最新的。比如&#xff0c;我们…...

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

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

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

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

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

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

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

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

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

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

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

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

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

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

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

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

工具 | XShell的学习与使用

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

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

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

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

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

Kafka安装与使用

Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;因为其高吞吐量、分布式可扩展性等等强大功能使得在目前互联网系统中广泛使用。该篇博客入门了解一下Kafka的安装及使用。 Kafka概念 Kafk是分布式消息队列。Kafka对消息保存时根据Topic进行归类&#xff0c;发送消息…...

编程日记 2023/9/10 5:47:14

php出现SSL certificate problem: unable to get local issuer certificate的解决办法

当在本地使用curl或者一些其它封装好的http类库或组件&#xff08;如php界 知名的 http客户端 Guzzle&#xff09;需要访问https时&#xff0c;如果本地没有配置证书&#xff0c;会出现SSL certificate problem: unable to get local issuer certificate的报错信息。 解决办法一…...

编程日记 2023/9/10 5:46:13

Flask狼书笔记 | 07_留言板

文章目录 7 留言板7.1 使用包组织代码7.2 Web开发流程7.3 使用Bootstrap-Flask7.4 Flask-Moment本地化日期和时间7.5 使用Faker生成虚拟数据7.6 Flask_DebugToolbar调试程序7.7 Flask配置的两种组织形式小结 7 留言板 这是一个简单的程序&#xff0c;涉及到的大部分是之前所学…...

编程日记 2023/9/10 5:45:10

文件导入之Validation校验List对象数组

背景&#xff1a; 我们的接口是一个List对象&#xff0c;对象里面的数据基本都有一些基础数据校验的注解&#xff0c;我们怎么样才能校验这些基础规则呢&#xff1f; 我们在导入excel文件进行数据录入的时候&#xff0c;数据录入也有基础的校验规则&#xff0c;这个时候我们又…...

编程日记 2023/9/10 5:44:10

【Linux】文件系统

磁盘及文件系统 文件的增删查改 重新认识目录 目录是文件嘛&#xff1f; 是的。 目录有iNode嘛&#xff1f; 有 目录有内容嘛&#xff1f; 有 任何一个文件&#xff0c;一定在一个目录内部&#xff0c;所以一个目录的内容是什么&#xff1f; 需要数据块&#xff0c;目录的数据…...

编程日记 2023/9/10 5:43:08

1.5 空间中的平面与直线

空间中的平面和直线 知识点1 平面方程 1.平面的法向量与法式 定义1 若向量n 垂直与平面N&#xff0c;则称向量n为平面N的法向量。 设一平面通过一直点 M 0 ( x 0 , y 0 , z 0 ) M_0(x_0,y_0,z_0) M0​(x0​,y0​,z0​)求垂直于非零向量 n ⃗ \vec{n} n (A,B,C),求改平面N的…...

编程日记 2023/9/10 5:42:08

【深度学习】实验06 使用TensorFlow完成线性回归

文章目录 使用TensorFlow完成线性回归1. 导入TensorFlow库2. 构造数据集3. 定义基本模型4. 训练模型5. 线性回归图 附&#xff1a;系列文章 使用TensorFlow完成线性回归 TensorFlow是由Google开发的一个开源的机器学习框架。它可以让开发者更加轻松地构建和训练深度学习模型&a…...

编程日记 2023/9/10 5:41:07

2023国赛 C题论文 蔬菜类商品自动定价与补货策略

因为一些不可抗力&#xff0c;下面仅展示小部分论文&#xff0c;其余看文末 一、问题重述 在生鲜超市管理领域&#xff0c;涉及一系列复杂问题&#xff0c;包括供应链管理、定价策略以及市场需求分析等方面。以蔬菜类商品为案例&#xff0c;这些商品在生鲜商超中具有较短的保…...

编程日记 2023/9/10 5:40:06

使用 【jacoco】对基于 SpringBoot 和 Dubbo RPC 的项目生成测试覆盖率报告：实践+原理

基于 Dubbo RPC 的项目中有一个提供者项目backend、一个消费者项目gateway、以及注册中心nacos。本篇文章记录在windows本地对该框架的测试过程&#xff0c;以及介绍jacoco的基本原理 测试过程 官网下载安装包解压到本地&#xff0c;https://www.jacoco.org/jacoco/ 只需要用…...

编程日记 2023/9/10 5:39:05

Mac OS合集

MacOS 10.15os 提取码:u12a 如不能点击跳转请复制此链接到浏览器&#xff1a;https://pan.baidu.com/s/1UgPNYprBgJrc25v5ushWxQ?pwdu12a MacOS 11.0 提取码:y77y 如不能点击跳转请复制此链接到浏览器打开&#xff1a;https://pan.baidu.com/s/1srmibmCi2T7UVGvHkCzGKA?pwdy7…...

编程日记 2023/9/10 5:38:05

网站建设 乐清网络公司/广州各区最新动态

&#xff08;1&#xff09;因为在之前两个案例已经详细说明了mybatis-con.xml的配置了&#xff0c;这里就不一一例举了 下面是关于用mybatis怎样去动态的去映射sql&#xff0c;在案例中我都标明了怎么使用&#xff0c;我就把主要的一些实现给大家例出来 1.接口类 package edu.…...

编程日记 2024/11/30 18:09:07

怎样在网站做友情链接/企业网站推广模式

先%一发达哥 T1,其实不难,就是一个简单的dp矩阵快速幂加个原根优化,其实是模意义之前没做过题,有点懵,一开始思路也光想数学了,就gg了…… 模意义下所有运算都和正常运算一样,只是除变成了乘逆元!! 定义状态数组f[i][j]表示第i步转移后模数为j的概率,矩阵乘优化,可得80分,正…...

编程日记 2024/11/30 16:41:25

广元网站建设/企业网站推广注意事项

纯电动汽车&#xff0c;顾名思义是以动力电池组电能为动力的汽车&#xff0c;除了动力电池组、电机、电机控制器等之外&#xff0c; 全车电气与传统燃油车无明显区别。更多新能源汽车资讯在“优能工程师”&#xff0c;由易到难&#xff0c;由浅入深&#xff0c;全方位学习&…...

编程日记 2024/11/30 13:45:45

wordpress 缩放大小 设置/网络优化工程师前景如何

来源&#xff1a;网络密码管理器 NordPass 公布了一份 2019 年最常用的 200 个密码的列表&#xff0c;其中排名前三的为&#xff1a;12345、123456、123456789&#xff0c;看来大家对数字还是比较喜欢的&#xff0c;123456 这个密码应该大部分都有设置过。这家公司总共收集了 5…...

编程日记 2024/11/30 13:44:45

wordpress主题静态页面/排名优化网站seo排名

在Vue单页应用中&#xff0c;如果在某一个具体路由的具体页面下点击刷新&#xff0c;那么刷新后&#xff0c;页面的状态信息可能就会丢失掉。这时候应该怎么处理呢&#xff1f;如果你也有这个疑惑&#xff0c;这篇文章或许能够帮助到你一、问题现在产品上有个需求&#xff1a;单…...

编程日记 2024/11/30 10:36:32

建设通类似网站/月入百万的游戏代理

Code /* 队列基本操作 InitQueue(&Q)&#xff1a;初始化队列&#xff0c;构造一个空队列Q。 QueueEmpty(Q)&#xff1a;判队列空&#xff0c;若队列Q为空返回true&#xff0c;否则返回false。 EnQueue(&Q, x)&#xff1a;入队&#xff0c;若队列Q未满&#xff0c;则将…...

编程日记 2024/11/30 9:28:02