Vue3前端表单用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 {
    @Autowired
    private 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.id
          let 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>