新建一个vue页面,输入学生信息,使用axios调用后端接口,能在student表中新增一条记录相关代码
时间: 2024-03-16 22:46:37 浏览: 96
VUE使用axios调用后台API接口的方法
5星 · 资源好评率100%
好的,这是一个简单的前后端交互流程,我会给你提供一些代码示例。
前端代码:
首先,你需要在 Vue 中新建一个页面,比如我假设你已经有了一个名为 `AddStudent.vue` 的页面,然后在这个页面中添加一个表单,让用户输入学生信息:
```html
<template>
<div>
<h1>Add Student</h1>
<form @submit.prevent="submitForm">
<div>
<label for="name">Name:</label>
<input type="text" id="name" v-model="name">
</div>
<div>
<label for="age">Age:</label>
<input type="number" id="age" v-model="age">
</div>
<div>
<label for="gender">Gender:</label>
<select id="gender" v-model="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
name: '',
age: '',
gender: 'male'
}
},
methods: {
submitForm() {
const data = {
name: this.name,
age: this.age,
gender: this.gender
}
axios.post('/api/student', data)
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
```
这里使用了 axios 库来发送 POST 请求到后端,当用户点击提交按钮时,`submitForm` 方法会被调用,将用户输入的数据封装成一个对象 `data`,然后使用 axios 发送 POST 请求到 `/api/student` 接口。
后端代码:
假设你使用的是 Node.js 平台和 Express 框架,你需要在后端添加一个路由来处理 `/api/student` 接口的请求,然后在路由处理函数中调用数据库的 API 来插入一条学生记录,示例代码如下:
```javascript
const express = require('express')
const router = express.Router()
const db = require('../db')
router.post('/api/student', (req, res) => {
const { name, age, gender } = req.body
db.query('INSERT INTO student (name, age, gender) VALUES (?, ?, ?)',
[name, age, gender],
(error, results, fields) => {
if (error) {
res.status(500).send({ error: error.message })
} else {
res.send({ message: 'Student added successfully.' })
}
})
})
module.exports = router
```
这里使用了一个名为 `db` 的数据库模块来操作数据库,你需要根据你自己的情况来编写该模块的代码。在路由处理函数中,首先从请求对象的 `body` 属性中获取学生信息,然后调用 `db.query` 方法来执行 SQL 语句,将学生信息插入到数据库中。如果插入成功,就返回一个 JSON 对象 `{ message: 'Student added successfully.' }`,否则返回一个错误对象 `{ error: error.message }`。
以上是一个简单的前后端交互流程的代码示例,你可以根据自己的情况来修改和完善代码。
阅读全文