axios 美[æk‘sioʊz]

安装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);

接收到的数据