前端怎么用axios调用后端接口

Axios 是一个基于 promise 的 HTTP 库，可以在浏览器和 Node.js 中使用。通过它，我们可以轻松地发送 GET、POST、PUT、DELETE 等请求，同时也可以处理响应数据。下面是前端如何使用axios调用后端接口的步骤：

1. 安装axios

可以使用 npm 或者 yarn 安装 axios，如下所示：

npm install axios

2. 在前端代码中引入 axios

在需要使用 axios 的文件中，可以使用以下语句引入 axios：

import axios from 'axios'

3. 发送请求

在需要发送请求的地方，可以使用 axios 发送请求，如下所示：

axios.get('/api/user')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

以上代码向后端发送了一个 GET 请求，请求地址为 `/api/user`。如果请求成功，将打印响应数据；如果请求失败，将打印错误信息。

除了 GET 请求外，还可以使用 axios 发送 POST、PUT、DELETE 等请求，具体可以参考 axios 的官方文档。

相关问题

新建一个vue页面，输入学生信息，使用axios调用后端接口，能在student表中新增一条记录

好的，我可以为您提供一些关于这个问题的指导。

首先，您需要在Vue项目中创建一个新的页面，用于输入学生信息。您可以使用Vue的模板语法创建表单，包含需要输入的学生信息字段。

接下来，您需要使用axios来调用后端接口，将学生信息提交到后端保存到数据库中。您可以使用axios的POST请求来提交数据，并将学生信息作为请求正文发送到后端。需要注意的是，在请求头中设置Content-Type为application/json，以确保后端能够正确解析请求体。

最后，在后端中编写对应的API接口，用于接收前端发送的学生信息并将其保存到数据库中。您可以使用Node.js和Express框架来编写API接口，并使用ORM库（如Sequelize）将数据存储到数据库中的student表中。

总的来说，大致的实现步骤如下：

1. 创建Vue页面，包含学生信息表单。
2. 使用axios发送POST请求，将学生信息提交到后端。
3. 在后端中编写API接口，将学生信息存储到数据库中的student表中。

希望这些指导能够对您有所帮助！

在library数据库中建一个student表，表字段有学号、姓名、所在学院，年龄、性别等字段。在表中输入若干数据，（如已有student表，则可不用建） （1） 新建一个vue页面，使用axios调用后端接口，查询student表并把所有学生信息显示在页面上 （2） 新建一个vue页面，输入学生信息，使用axios调用后端接口，能在student表中新增一条记录

好的，我知道了，接下来我将回答你的问题：

对于你的第一个问题，我可以给出以下 SQL 语句来创建一个名为 student 的表，并插入一些数据：

CREATE TABLE student (
  id INT PRIMARY KEY AUTO_INCREMENT,
  student_number VARCHAR(20),
  name VARCHAR(50),
  college VARCHAR(50),
  age INT,
  gender VARCHAR(10)
);

INSERT INTO student (student_number, name, college, age, gender) 
VALUES 
  ('20210001', '张三', '计算机科学与技术学院', 20, '男'),
  ('20210002', '李四', '软件工程学院', 21, '女'),
  ('20210003', '王五', '信息管理学院', 19, '男'),
  ('20210004', '赵六', '电子工程学院', 22, '女');

对于你的第二个问题，我可以给出以下示例代码来实现在前端使用 axios 发送 POST 请求，将学生信息插入到 student 表中：

<template>
  <div>
    <h2>新增学生</h2>
    <form @submit.prevent="addStudent">
      <div>
        <label for="student_number">学号：</label>
        <input type="text" id="student_number" v-model="form.student_number" required>
      </div>
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="form.name" required>
      </div>
      <div>
        <label for="college">所在学院：</label>
        <input type="text" id="college" v-model="form.college" required>
      </div>
      <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" v-model.number="form.age" required>
      </div>
      <div>
        <label for="gender">性别：</label>
        <select id="gender" v-model="form.gender" required>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        student_number: '',
        name: '',
        college: '',
        age: 0,
        gender: '男'
      }
    };
  },
  methods: {
    async addStudent() {
      try {
        const response = await axios.post('/api/add-student', this.form);
        console.log(response.data);
        alert('新增成功！');
        this.form = {
          student_number: '',
          name: '',
          college: '',
          age: 0,
          gender: '男'
        };
      } catch (error) {
        console.error(error);
        alert('新增失败！');
      }
    }
  }
};
</script>

在后端，你可以使用 Express 框架来接收请求，然后使用 MySQL 模块来操作数据库实现新增学生的功能。例如：

const express = require('express');
const mysql = require('mysql');

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'yourpassword',
  database: 'library'
});

app.post('/api/add-student', (req, res) => {
  const { student_number, name, college, age, gender } = req.body;
  const sql = 'INSERT INTO student (student_number, name, college, age, gender) VALUES (?, ?, ?, ?, ?)';
  const values = [student_number, name, college, age, gender];
  connection.query(sql, values, (error, results) => {
    if (error) {
      console.error(error);
      res.status(500).json({ message: '新增失败' });
    } else {
      console.log(results);
      res.json({ message: '新增成功' });
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

希望这些代码能对你有所帮助。