vue如何使用axios查询上传数据是否存在数据库表中

本文介绍如何在Vue项目中使用Axios进行HTTP请求配置,并实现登录功能。通过在main.js中引入并配置Axios,使其成为Vue实例的一个全局属性。登录功能通过验证表单数据后,调用Axios的post方法发送登录请求,根据响应判断登录是否成功。
部署运行你感兴趣的模型镜像

需要在main.js中配置

// 引入axios
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 挂载到vue的原型对象上
Vue.prototype.$http = axios

点击获取到传过去的值之后,匹配数据库中是否含有这个数据,不含有则返回登录失败

login () {
      // 发送请求
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) {
          return false
        } else {
          const { data: res } = await this.$http.post('login', this.loginForm)
          if (res.meta.status !== 200) {
            return console.log('登录失败')
          } else {
            return console.log('登录成功')
          }
        }
      })
    }

您可能感兴趣的与本文相关的镜像

Qwen-Image-Edit-2509

Qwen-Image-Edit-2509

图片编辑
Qwen

Qwen-Image-Edit-2509 是阿里巴巴通义千问团队于2025年9月发布的最新图像编辑AI模型,主要支持多图编辑,包括“人物+人物”、“人物+商品”等组合玩法

使用 VueAxios 实现 Excel 数据批量导入到数据库的过程中,需要从前端和后端两个方面进行配合。前端负责读取 Excel 文件并发送请求,后端负责解析 Excel 数据并将其保存到数据库中。 ### 前端部分(Vue + Axios) 1. **文件上传组件** 在 Vue 中,可以使用 `<input type="file">` 或第三方组件库(如 Element UI 的 `el-upload`)来实现文件上传功能。 2. **使用 Axios 发送请求** 通过 Axios 发送 `multipart/form-data` 请求,将 Excel 文件上传到后端接口。 ```javascript import axios from 'axios'; const importData = (file) => { const formData = new FormData(); formData.append('file', file); return axios.post('/api/school/base/importData', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); }; ``` 3. **调用方法** 在文件选择后,调用 `importData` 方法将文件上传到后端。 ```javascript const handleFileUpload = (event) => { const file = event.target.files[0]; importData(file) .then(response => { console.log('导入成功', response); }) .catch(error => { console.error('导入失败', error); }); }; ``` ### 后端部分(Spring Boot + EasyExcel) 1. **定义实体类** 使用 `@ExcelAnnotation` 注解来映射 Excel 头与实体类字段。 ```java public class ImportDealerManagement { @ExcelAnnotation(exportName = "保单号", order = 1) private String policyNumber; // 其他字段及 getter/setter } ``` 2. **Controller 层** 在 Controller 中接收文件并调用 EasyExcel 进行解析。 ```java @RestController @RequestMapping("/api") public class ImportController { @Autowired private ImportDealerManagementService importDealerManagementService; @Autowired private DealerManagementMapper dealerManagementMapper; @Transactional(rollbackFor = Exception.class) @PostMapping("/school/base/importData") public ResponseEntity<Object> importData(@RequestParam("file") MultipartFile file) throws IOException { EasyExcel.read(file.getInputStream(), ImportDealerManagement.class, new ExcelListener(importDealerManagementService, dealerManagementMapper)) .sheet() .doRead(); return new ResponseEntity<>("导入成功", HttpStatus.OK); } } ``` 3. **自定义监听器** 实现 `ReadListener` 接口,在读取每一行数据时将其保存到数据库。 ```java public class ExcelListener extends AnalysisEventListener<ImportDealerManagement> { private ImportDealerManagementService importDealerManagementService; private DealerManagementMapper dealerManagementMapper; public ExcelListener(ImportDealerManagementService importDealerManagementService, DealerManagementMapper dealerManagementMapper) { this.importDealerManagementService = importDealerManagementService; this.dealerManagementMapper = dealerManagementMapper; } @Override public void invoke(ImportDealerManagement data, AnalysisContext context) { // 保存数据数据库 dealerManagementMapper.insert(data); } @Override public void doAfterAllAnalysed(AnalysisContext context) { // 所有数据解析完成后的操作 } } ``` ### 总结 通过 VueAxios 实现 Excel 数据批量上传数据库的过程可以分为前端和后端两部分。前端负责上传文件并发送请求,后端负责解析 Excel 数据并将其保存到数据库中。结合 EasyExcel 和注解机制,可以高效地实现数据导入功能。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值