第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.前端代码

<!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中指明的依赖

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/77686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

拿走吧你,Fiddler模拟请求发送和修改响应数据

模拟伪造请求 方法一&#xff1a;打断点模拟HTTP请求 1、浏览器页面填好内容后&#xff08;不要操作提交&#xff09;&#xff0c;打开fiddler&#xff0c;设置请求前断点&#xff0c;点击菜单fiddler,”Rules”\”Automatic Breakpoints”\”Before Requests” 2、在页面上点…

构建本地yum仓库

此操作针对VMware虚拟机安装的centos系统&#xff0c;yum本地仓库构建仅作参考。 1、挂载光盘 [rootwww ~]# umount /dev/cdrom 【推出原来挂载的光盘】 umount: /dev/cdrom: not mounted [rootwww ~]# mkdir /media/cdrom [rootwww ~]# mount /dev/cdrom /media/cdrom/ 【挂载…

前端每日小计

1.依赖检查depcheck 项目package.json中依赖确实&#xff0c;可用depcheck检查 进入项目根目录运行depcheck&#xff0c;查看Missing dependecies 2.文件名大小写调整后&#xff0c;git无变化&#xff0c;设置core.ignorecasefase 添加git config core.ignorecase false配置 3.…

Java面试题总结2023

Java面试题总结2023 基础String中常用的方法 与 equals的区别值传递和引用传递数组和集合的区别成员变量和局部变量的区别final和finally和finalize的区别Cookie和Session的的区别接口分类接口和抽象类的区别说说你对抽象类的理解String/StringBuffer/StringBuilderjdk1.8的新特…

批量复制文件到指定文件夹,智能跳过相同文件名!

大家好&#xff01;在进行文件管理的过程中&#xff0c;如果需要将大量文件快速复制到指定文件夹&#xff0c;并避免重复文件名带来的混乱&#xff0c;传统的手动操作可能会非常繁琐和耗时。为了让您能够高效地完成这一任务&#xff0c;我们为您提供了一种智能方法&#xff0c;…

SpringMVC之综合案例:参数传递,向页面传参,页面跳转

参数传递向页面传参页面跳转 1.参数传递 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"htt…

Android 通用首页代码示例

在 Android 中&#xff0c;使用 NestedScrollView 来包含多个部分&#xff0c;如横向 Banner、GridView 和 RecyclerView&#xff0c;可以通过嵌套不同的布局组件来实现。以下是一个示例布局的 XML 文件&#xff0c;展示如何将这些部分嵌套在 NestedScrollView 内&#xff1a; …

长胜证券:三大拐点共振 看好智能驾驶新一轮行情

摘要 【长胜证券&#xff1a;三大拐点共振 看好智能驾驭新一轮行情】长胜证券研报指出&#xff0c;全球共振&#xff0c;国内智驾商场正迎来三大拐点&#xff1a;1&#xff09;技能上&#xff0c;“BEV Transformer数据闭环”新架构2023年开端上车&#xff0c;使得不依靠高精地…

HONEYWELL 0574-A-012 0574-A-0131 编码器模块

HONEYWELL 0574-A-012 0574-A-0131 编码器模块是一种用于测量旋转或线性位置的设备&#xff0c;通常用于自动化系统、机器控制和传感器应用。以下是HONEYWELL 0574-A-012 0574-A-0131 编码器模块可能具备的一些常见产品特点&#xff1a; 高精度测量&#xff1a;HONEYWELL 0574-…

Linux学习之MySQL备份

xtrabackup资源下载 完全备份与恢复 # 1.物理备份与恢复 # 冷备份&#xff0c;需停止数据库服务 适合线下服务器。 [rootmysql50 ~]# systemctl stop mysqld [rootmysql50 ~]# mkdir /bakdir [rootmysql50 ~]# cp -r /var/lib/mysql /bakdir/mysql.bak [rootmysql50 ~]# cd /…

Linux编译器-gcc/g++使用

文章目录 前言一、gcc/g编译器1、gcc/g安装2、gcc介绍3、gcc和g区别3.1 gcc不是只能编译.c源文件3.2 gcc和g编译文件3.3 gcc 不会定义 __cplusplus 宏&#xff0c;而 g 会3.5 演示 4、gcc/g编译过程 二、动态库和静态库1、动态库和静态库2、动态链接和静态链接2.1 动态链接2.2 …

STL stack 和 queue

文章目录 一、stack 类和 queue 类的模拟实现 stack 只允许在一端进行插入删除&#xff0c;是一个后进先出(LIFO)的结构&#xff0c;可以存储任意类型 queue 只允许在一端进行插入&#xff0c;另一端进行删除&#xff0c;是一个先进先出(FIFO)的结构&#xff0c;可以存储任意类…

元服务那些事儿 | 挥剑解决隐私声明,激发开发豪情

话说元服务初上的年间&#xff0c;鸿蒙江湖高手云起&#xff0c;都是一顿键盘手猛敲&#xff0c;元服务推陈出新&#xff0c;创意层出不穷&#xff0c;无不风生水起。 江湖规矩&#xff1a;每个元服务必须提供规范的隐私声明&#xff0c;否则提交元服务发布上架后&#xff0c;将…

C++ --- Day03 重载

自己封装类似C中的string类 Mystring.h #ifndef MYSTRING_H #define MYSTRING_H #include <iostream> #include<string.h> using namespace std;class myString {friend ostream& operator<<(ostream &cout,const myString &s);private:char *…

Flask+pyecharts结合,html统计图呈现在前端页面

是我,是你 在网上看到这样一段话: “很多时候,你必须接受这世界上突如其来的失去。洒了的牛奶,遗失的钱包,走散的爱人,断掉的友情。当你做什么都于事无补的时候,唯一能做的,就是让自己努力好过一点。” <

TCP协议报文,核心特性可靠的原因,超时重传详细介绍

目录 一、TCP协议 二、TCP核心特性的保障 三、保留的六位标志位对于应答报文的作用 四、如何处理丢包——超时重传的原理 五、超时重传的时间 一、TCP协议 每一行是四个字节&#xff0c;前面的20个字节是固定的&#xff08;TCP最短长度&#xff0c;20字节&#xff0c;选项…

PAT (Basic Level) Practice 1045~1066

PTA Basic Level Practice 解题思路和代码&#xff0c;主要用的是 C。每22题一篇博客&#xff0c;可以按目录来进行寻找。 文章目录 1045 快速排序1046 划拳1047 编程团体赛1048 数字加密1049 数列的片段和1050 螺旋矩阵1051 复数乘法1052 卖个萌1053 住房空置率1054 求平均值1…

拷贝构造函数(深拷贝+浅拷贝)

目录 拷贝构造函数浅拷贝深拷贝 拷贝构造函数 拷贝构造函数&#xff1a; Myclass(const Myclass& myclass) {amyclass.a;bmyclass.b;cmyclass.c; }浅拷贝 浅拷贝的思路就是和默认的拷贝构造函数一样: 即将原对象的值直接赋值给新对象&#xff0c;这样做一般情况下是没什…

如何查看服务器各项指标的配置-具体指令-服务器配置参数详解-大模型训练推荐配置单服务器和服务器之间显卡直通叠加扩容

查看服务器配置的指令 要查看服务器的各项组件配置,您可以执行以下步骤: 操作系统信息: 使用命令 uname -a(Linux/Unix)或 systeminfo(Windows)来查看操作系统的版本和内核信息。CPU 信息: 在Linux/Unix系统上,运行 lscpu 命令来查看CPU的详细信息。在Windows系统上,…

Java“牵手”淘宝商品详情数据,淘宝商品详情接口,淘宝API接口申请指南介绍

采集场景 在淘宝首页&#xff08;taobao.com&#xff09;输入关键词搜索&#xff0c;采集搜索后得到的商品列表页数据然后再点击进去即是商品详情页面数据。示例中关键词为【新款连衣裙】&#xff0c;可根据需求进行更换&#xff0c;同时支持自动批量输入多个关键词&#xff0…