Vue3前端表单用axios封装类向后端简单传值

表单用axios封装类向后端简单传值"/>

Vue3前端表单用axios封装类向后端简单传值

• • 一、axios封装
  • 二、前端form表单
  • 三、导入工具类
  • 四、初始化表单的值
  • 五、利用axios封装类请求后端路径,传递表单中的数值
  • 后端接口
  • 前端完整代码

以简单的修改密码为例

一、axios封装

axios.js

// 引入axios
import axios from 'axios';
import {ElMessage} from "element-plus";// 创建axios实例
const httpService = axios.create({// url前缀-'http:xxx.xxx'// baseURL: process.env.BASE_API, // 需自定义baseURL:'http://localhost:8080/',// 请求超时时间timeout: 3000 // 需自定义
});//添加请求和响应拦截器
// 添加请求拦截器
httpService.interceptors.request.use(function (config) {// 在发送请求之前做些什么config.headers.token=window.sessionStorage.getItem('token');return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
httpService.interceptors.response.use( response=> {// 对响应数据做点什么return response;
},function (error) {// 对响应错误做点什么return Promise.reject(error);
});/*网络请求部分*//**  get请求*  url:请求地址*  params:参数* */
export function get(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'get',params: params}).then(response => {resolve(response);}).catch(error => {reject(error);});});
}/**  post请求*  url:请求地址*  params:参数* */
export function post(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params}).then(response => {console.log(response)resolve(response);}).catch(error => {console.log(error)reject(error);});});
}/**  文件上传*  url:请求地址*  params:参数* */
export function fileUpload(url, params = {}) {return new Promise((resolve, reject) => {httpService({url: url,method: 'post',data: params,headers: { 'Content-Type': 'multipart/form-data' }}).then(response => {resolve(response);}).catch(error => {reject(error);});});
}export default {get,post,fileUpload
}

二、前端form表单

<template><div><el-card style="width: 40%; margin: 10px"><el-form ref="formRef" :model="form" label-width="80px" :rules="rules" ><el-form-item label="原密码" prop="password"><el-input v-model="form.password" show-password ></el-input></el-form-item><el-form-item label="新密码" prop="newPass"><el-input v-model="form.newPass" show-password ></el-input></el-form-item><el-form-item label="确认密码" prop="confirmPass"><el-input v-model="form.confirmPass" show-password ></el-input></el-form-item></el-form><div style="text-align: center"><el-button type="primary" @click="changePsss">保存</el-button></div></el-card></div>
</template>

三、导入工具类

`import { ref } from 'vue'import  axios from '@/util/axios'`

四、初始化表单的值

const form=ref({   //表单设置的参数名要和后端所需参数对应password:'',newPass:'',confirmPass:'',id:''
})
const formRef=ref(null)  

五、利用axios封装类请求后端路径,传递表单中的数值

输入表单后，将form.vaule传给后端

axios.post(“admin/modifyPassword”,form.value);

后端接口

@RestController
public class AdminController {@Autowiredprivate IAdminService adminService;@PostMapping("/admin/modifyPassword")    			public R modifyPassword(@RequestBody Admin admin){Admin select = adminService.getById(admin.getId());if (!Objects.equals(select.getPassword(), admin.getPassword())){return R.error("原密码错误");}adminService.updatePass(admin);return R.ok();}
}

前端完整代码

<template><div><el-card style="width: 40%; margin: 10px"><el-form ref="formRef" :model="form" label-width="80px" :rules="rules" ><el-form-item label="原密码" prop="password"><el-input v-model="form.password" show-password ></el-input></el-form-item><el-form-item label="新密码" prop="newPass"><el-input v-model="form.newPass" show-password ></el-input></el-form-item><el-form-item label="确认密码" prop="confirmPass"><el-input v-model="form.confirmPass" show-password ></el-input></el-form-item></el-form><div style="text-align: center"><el-button type="primary" @click="changePsss">保存</el-button></div></el-card></div>
</template>
<script setup>
import { ref } from 'vue'
import  axios from '@/util/axios'
import {ElMessage} from "element-plus";const rules=ref({password:[{required: true,message: '请输入密码！',},],newPass:[{required: true,message: '请输入新密码！',},],confirmPass:[{required: true,message: '请输入确认新密码！',},]
})
const form=ref({password:'',newPass:'',confirmPass:'',id:''
})
const formRef=ref(null)   
const changePsss=()=>{formRef.value.validate(async (valid) => {if (valid) {if(form.value.newPass!==form.value.confirmPass){  // 判断确认新密码是否正确ElMessage.error("两次新密码输入不一致！");}else{ // 带上用户名和新密码 请求后端try{  //登录时存一下用户信息let admin = sessionStorage.getItem("admin")?JSON.parse(sessionStorage.getItem("admin")) : null;form.value.id=admin.idlet result=await axios.post("admin/modifyPassword",form.value);let data=result.data;if(data.code===0){ElMessage.success("密码修改成功，重新登录后生效");formRef.value.resetFields();}else{ElMessage.error(data.msg);}}catch(err){console.log("error:"+err)ElMessage.error('系统运行出错，请联系管理员');}}} else {return false}})
}
</script>
<style scoped>
</style>