安装axios

1.下载axios

在项目所在文件夹中输入
npm install axios -S

2.下载成功后可看见版本号

使用axios

在要使用的组件中引入axios

import axios from "axios";

在该组件中就可以愉快的使用了

axios.get 无数据请求的使用

<template><div class="tablebox"><table class="table table-hover"><thead><tr><th scope="col">id</th><th scope="col">name</th><th scope="col">age</th><th scope="col">classid</th><th scope="col">操作</th></tr></thead><tbody><tr v-for="(v, k) in list" :key="k"><th scope="row">{{ v.id }}</th><td>{{ v.name }}</td><td>{{ v.age }}</td><td>{{ v.classid }}</td><td><button type="button" class="btn btn-danger">删除</button></td></tr></tbody></table></div>
</template><script>
import axios from "axios";
export default {data() {return {list: [],};},created() {// --------------------------------------------------let url = "/index";// 发送一个没有请求数据的请求axios.get(url).then((res) => {// 这里执行请求成功后的代码this.list = res.data;console.log(res);console.log(this.list);}).catch(function (error) {// 这里执行请求失败后的代码console.log(error);console.log("发生了错误");});},// ----------------------------------------------------
};
</script>

请求失败的运行结果

跨域之设置代理

由于端口号的不同vue无法访问node,所以我们要设置代理

1.在项目文件夹中新建一个vue.config.js文件

module.exports={devServer:{// 设置端口号// port:8090,// 设置代理服务proxy:{// '/index':代理名,要和url中域名后面的第一个路径名一致"/index":{target:'http://localhost:8090'}}}
}

2.运行服务端代码,刷新页面

axios.get 无数据请求的使用

1.在组件发送数据

<template><div class="tianjai"><div class="formbox"><form ><div class="form-group">姓名<br><input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="name"><br>年龄<br><input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="age"><br>学号<br><input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="classid"><br></div><div class="form-group form-check"><input type="checkbox" class="form-check-input" id="exampleCheck1"><label class="form-check-label" for="exampleCheck1">Check me out</label></div><button type="submit" class="btn btn-primary" @click="fun()">Submit</button>
</form></div>  </div>
</template><script>
import axios from "axios";
export default {data() {return {name: "",age: "",classid: "",};},created() {},methods: {fun() {console.log(this.name);console.log(this.age);console.log(this.classid);// -------------------------有数据的axios请求------------axios.get("/index/tianjia", {// 在url后面添加一个对象,对象中放要发送给服务端的数据params: { name: this.name, age: this.age, classid: this.classid },// 这里用了匿名函数和之前的箭头函数是一个意思}).then(function (response) {this.$router.push("/");}).catch(function (error) {console.log("发生了错误");});// ----------------------------------------------------},},
};
</script><style>
.tianjai{width: 50%;margin: 0 auto;
}
.btn-primary{margin-left: 0px;
}</style>

node服务端获取方式

var mysql = require('mysql')
var express = require('express')
var formidable=require('formidable')
var urll=require('url')// 配置服务
var app = express();
app.use(express.static('node_modules'))                         // 配置数据库
var connection = mysql.createConnection({host: 'localhost',user: 'root',password: 'root',database: '56yezonghui'
})
connection.connect();// 无参数数的请求接口
app.get('/index', function (req, res) {sql = 'select * from users'connection.query(sql, function (error, results, fields) {console.log(results);res.json(results)res.end()})
})// -------------------------------------带参数的请求接口--------------------------
app.get('/index/tianjia', function (req, res) {console.log(req);var url = req.url;//解析url地址var param = urll.parse(url,true);//console.log(param.query);var name = param.query.name;var age = param.query.age;var classid = param.query.classid;sql = "insert into users(name,age,classid) values(" + name + "," + age + ","+classid+")"console.log(sql);connection.query(sql, function (error, results, fields) {console.log(results);})})// --------------------------------------------------------------------------------------// 设置端口号
app.listen(8090);

接收到的数据

axios 美[æk‘sioʊz]相关推荐

美语音标 [z]出现在字尾的变音
2023美春赛Z题：奥运会的未来
背景国际奥林匹克委员会(IOC)正面临着申办奥运会–包括夏季和冬季奥运会–的数量不断减少.在过去,主办奥运会的竞争非常激烈,也很有声望.然而,最近,主办城市/国家经历了各种短期和长期的负面影响.为了 ...
新东方雅思词汇---8.3、apt
新东方雅思词汇---8.3.apt 一.总结一句话总结:本身为词根 adj. 恰当的:有-倾向的:灵敏的本身为词根英 [æpt] 美 [æpt] adj. 恰当的:有-倾向的:灵敏的 n. ...
sizeof是c语言的一种运算符,kingsize是什么意思? C语言中sizeof是什么意思
in size是什么意思,不要告诉小编"在尺寸""和大小"什in size是什么意思,不要告诉小编"在尺寸""和大斜什么的,说的通 ...
copies(copies什么意思)
copies是什么意?copies是什么意思 copies 英['kɒpɪz] 美['kɒpɪz] n. 文案; 抄本,副本,复制本[品],摹本; 拷贝 (印刷的)原稿; 新闻材料 (书的)一部; 一 ...
美信Maxim与Z公司EDI项目案例
全球领先的半导体制造代理商美信MaximIntegrated,成立于1983年.是最先使用AS2(APPLICABILITY STATEMENT 2)作为EDI(Electronic data int ...
matlab1信号的单边z变换:,实验二离散时间信号与系统的Z变换分析
实验二离散时间信号与系统的Z变换分析一. 实验目的 1.熟悉离散信号Z变换的原理及性质 2.熟悉常见信号的Z变换 3.了解正/反Z变换的MATLAB实现方法 4.了解离散信号的Z变换与其对应的理想 ...
YbtOJ#20070-[NOIP2020模拟赛B组Day5]诗人小K【状压dp】
正题题目链接:http://noip.ybtoj.com.cn/contest/102/problem/4 题目大意求有多少个长度为nnn的序列aaa满足1≤ai≤101\leq a_i\leq ...
linux z是什么文件夹,Linux znew初学者命令实例教程
原标题:Linux znew初学者命令实例教程您是否知道Linux提供了一种将.Z文件重新压缩为.gz文件的方法? 是的,znew命令可以让你这样做. 在本教程中,我们将使用一些易于理解的示例讨论此 ...

axios 美[æk‘sioʊz]

安装axios

使用axios

axios.get 无数据请求的使用

跨域之设置代理

axios.get 无数据请求的使用

axios 美[æk‘sioʊz]相关推荐

最新文章

热门文章