华为云 DevUI Vue项目集成实战：如何打通axios，并且在表格中显示结果
·
Axios 是一个基于 Promise 的 HTTP 客户端库，用于在浏览器和 Node.js 环境中发送 HTTP 请求。 它提供了统一的 API，支持常见的请求方法（如 GET、POST、PUT、DELETE 等），并能自动处理响应数据。
核心特性
- 跨平台兼容：Axios 具有同构特性，同一套代码可在浏览器和 Node.js 中运行。浏览器端基于
XMLHttpRequest实现，服务端则使用 Node.js 原生http模块。 - Promise 支持：基于 Promise 的设计，支持
.then()、.catch()和async/await语法，简化异步请求处理。 - 拦截器功能：提供请求拦截器和响应拦截器，可在请求发送前或响应接收后进行预处理（如添加认证头、统一错误处理）。
- 高级配置：支持设置全局默认配置（如
baseURL、timeout）、请求/响应转换、取消请求、并发请求等。 - 错误处理：统一的错误处理机制，错误对象包含
response、request和config等属性，便于调试。
1. 安装：
npm install axios
2. 基本使用示例
// 发送 GET 请求
axios.get('/user?id=123')
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));
// 发送 POST 请求
axios.post('/user', { name: 'John' })
.then(response => console.log(response))
.catch(error => console.error(error));
// 使用 async/await
async function getUser() {
try {
const response = await axios.get('/user');
console.log(response.data);
} catch (error) {
console.error('Error:', error);
}
}
Axios 因其简洁的 API 和强大功能，广泛应用于前端工程化项目和后端开发中。
3. 发送post请求：
const onClick = () => {
formRef.value.validate((isValid, invalidFields) => {
console.log(isValid);
console.log(formData);
axios.post('http://localhost:3000/stduentSave', formData)
.then(response => console.log(response))
.catch(error => console.error(error));
});
};
可以看到后端的数据也是接收到了，而且也是显示到axios请求成功了。
node后端代码：
const express = require('express');
const app = express();
const port = 3000;
// 解析application/json
app.use(express.json());
// 解析application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));
app.post('/stduentSave', (req, res) => {
console.log(req.body); // 打印接收到的数据
res.send('Data received');
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
请求接口返回列表数据显示：
<d-table :data="baseTableData" style="width: 100%">
<d-column field="username" header="用户名"></d-column>
<d-column field="userInfo" header="用户信息"></d-column>
<d-column field="age" header="年龄"></d-column>
<d-column field="select" header="班级"></d-column>
<d-column field="autoComplete" header="课程安排"></d-column>
<d-column field="executionDay" header="班级类型"></d-column>
<d-column field="radio" header="值日考勤"></d-column>
<d-column field="datePickerPro" header="评审时间"></d-column>
<d-column field="rangeDatePickerPro" header="考勤范围"></d-column>
</d-table>
<template>
<d-form ref="formRef" layout="vertical" :data="formData" :rules="rules" :pop-position="['right']">
<d-form-item
field="username"
:rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
:show-feedback="false"
label="用户名"
>
<d-input v-model="formData.username" />
</d-form-item>
<d-form-item field="userInfo" label="用户信息">
<d-textarea v-model="formData.userInfo"></d-textarea>
</d-form-item>
<d-form-item field="age" label="年龄" :rules="[{ required: true, message: '年龄不能为空', trigger: 'blur' }]">
<d-input v-model="formData.age" />
</d-form-item>
<d-form-item field="select" label="班级">
<d-select v-model="formData.select" :options="selectOptions" allow-clear />
</d-form-item>
<d-form-item field="autoComplete" label="课程安排">
<d-auto-complete :source="source" v-model="formData.autoComplete"></d-auto-complete>
</d-form-item>
<d-form-item field="radio" label="班级类型">
<d-radio-group direction="row" v-model="formData.radio">
<d-radio value="0">A类</d-radio>
<d-radio value="1">B类</d-radio>
<d-radio value="2">C类</d-radio>
</d-radio-group>
</d-form-item>
<d-form-item field="executionDay" label="值日考勤">
<d-checkbox-group v-model="formData.executionDay" label="Execution day" direction="row">
<d-checkbox label="Mon" value="Mon" />
<d-checkbox label="Tue" value="Tue" />
<d-checkbox label="Wed" value="Wed" />
<d-checkbox label="Thur" value="Thur" />
<d-checkbox label="Fri" value="Fri" />
<d-checkbox label="Sat" value="Sat" />
<d-checkbox label="Sun" value="Sun" />
</d-checkbox-group>
</d-form-item>
<d-form-item field="datePickerPro" label="评审时间">
<d-date-picker-pro v-model="formData.datePickerPro"></d-date-picker-pro>
</d-form-item>
<d-form-item field="rangeDatePickerPro" label="考勤范围">
<d-range-date-picker-pro v-model="formData.rangeDatePickerPro"></d-range-date-picker-pro>
</d-form-item>
<d-form-operation class="form-operation-wrap">
<d-button variant="solid" @click="onClick">提交</d-button>
<d-button @click="onClear">清除校验结果</d-button>
<d-button @click="onReset">重置</d-button>
</d-form-operation>
</d-form>
<d-table :data="baseTableData" style="width: 100%">
<d-column field="username" header="用户名"></d-column>
<d-column field="userInfo" header="用户信息"></d-column>
<d-column field="age" header="年龄"></d-column>
<d-column field="select" header="班级"></d-column>
<d-column field="autoComplete" header="课程安排"></d-column>
<d-column field="executionDay" header="班级类型"></d-column>
<d-column field="radio" header="值日考勤"></d-column>
<d-column field="datePickerPro" header="评审时间"></d-column>
<d-column field="rangeDatePickerPro" header="考勤范围"></d-column>
</d-table>
</template>
<script>
import { defineComponent, reactive, ref, watch } from 'vue';
import axios from 'axios';
export default defineComponent({
setup() {
const baseTableData = ref([]);
const formRef = ref(null);
const formData = reactive({
username: '',
userInfo: '',
age: '',
select: 'Options2',
autoComplete: '',
executionDay: ['Tue'],
radio: '',
datePickerPro: '',
rangeDatePickerPro: ['', ''],
});
const selectOptions = reactive(['701班', '293班', '384班']);
const source = ref(['C#', 'C', 'C++']);
const checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (value < 18) {
return callback(new Error('年龄不能小于18'));
} else {
callback();
}
}, 1000);
};
const checkRangeDatePickerPro = (rule, value, callback) => {
if (!value || (!value[0] && !value[1])) {
return callback(new Error('请选择日期范围'));
} else if (!value[0]) {
return callback(new Error('请选择开始日期'));
} else if (!value[1]) {
return callback(new Error('请选择结束日期'));
} else {
return callback();
}
};
const rules = {
username: [{ min: 3, max: 6, message: '用户名需不小于3个字符，不大于6个字符', trigger: 'change' }],
userInfo: [{ required: true, message: '用户信息不能为空', trigger: 'blur' }],
age: [{ validator: checkAge }],
select: [{ required: true, message: '请选择', trigger: 'change' }],
autoComplete: [{ required: true, message: '请选择', trigger: 'change' }],
executionDay: [{ type: 'array', required: true, message: '请至少选择一个执行时间', trigger: 'change' }],
radio: [{ required: true, message: '请选择', trigger: 'change' }],
datePickerPro: [{ type: 'object', required: true, message: '请选择日期', trigger: 'change' }],
rangeDatePickerPro: [
{ validator: checkRangeDatePickerPro },
{ type: 'array', required: true, message: '请选择日期范围', trigger: 'change' },
],
};
const onClick = () => {
formRef.value.validate((isValid, invalidFields) => {
console.log(isValid);
console.log(formData);
axios.post('http://localhost:3000/stduentSave', formData)
.then(response => {
axios.get('http://localhost:3000/api/stduent', formData).then(res => {
baseTableData.value = res.data;
})
})
.catch(error => console.error(error));
});
};
const onClear = () => {
formRef.value.clearValidate();
};
const onReset = () => {
formRef.value.resetFields();
};
return { formRef, formData, selectOptions, source, rules, onClick, onClear, onReset, baseTableData };
},
});
</script>
<style>
.form-operation-wrap > * {
margin-right: 8px;
}
</style>
参考链接：
MateChat：https://gitcode.com/DevCloudFE/MateChat
MateChat官网：https://matechat.gitcode.com
DevUI官网：https://devui.design/home
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
4
0- 0
已为社区贡献29条内容
所有评论(0)