用户新增数据_调用外部接口新增数据-CSDN博客

本文链接：https://blog.csdn.net/qq_64757356/article/details/127304307

1、增加接口

api.js下增加接口addUser

    addUser(params) {
        return request ({
            url: '/user/add',
            method: 'post',
            //这个mock如果是true的话  用的就是线上fastmock的数据
            mock: false,
            data: params
            // data:{total: 0,page: 1,}
        })
    }

2、增加拦截

mock.js下增加拦截调用user.js下的createUser方法

Mock.mock(/user\/add/,'post',userApi.createUser)

3、定义方法

定义onSubmit方法获取调用接口数据将formUser数据传到addUser

const onSubmit = async () => {
let res = await proxy.$api.addUser(formUser);
};

4、模态框

新增之后模态框内数据重置并关闭模态框

<el-form :inline="true" :model="formUser" ref="userForm">

if(res) {
      dialogVisible.value = false
      proxy.$refs.userForm.resetFields();
      getUserData(config);
    }

需要在每一个<el-form-item label="出生日期" prop="birth">prop属性

5、日期处理

格式化日期

const timeFormat = (time) => {
    var time = new Date(time);
    var year = time.getFullYear();
    var month = time.getMonth()+1;
    var date = time.getDate();
    function add(m) {
      return m < 10 ? "0" + m : m;
    }
  return year + "-" + add(month) + "-" + add(date);
  }

const onSubmit = async () => {
formUser.birth = timeFormat(formUser.birth);
};