关于接口 api js文件 用接口 (form-model输入框input校验)

  • 先写一下api里面的js吧
    一般post的就是存一些数据给接口,接口本身可能也有数据
    一般get的就是通过关键字,拿接口里面的数据

我看见的文本


  • js里面
    因为需要把数据给接口,所以data:data 可以简写成data
export function changePassword(data) {
  return request({
    url: "/auth/changePassword",
    method: "post",
    data,
  });
}
export function userInfo(username) {

return request({

url: "/auth/userInfo/" + username,

method: "get",

});

}

在要调用接口的页面,根据路径先把对应的接口进行引入`

import { editUserInfo, userInfo, getCities } from "../../api/auth";

下面就是调接口

我这个是一个form-model页面,有输入框
在开头写了

<a-form-model
        class="light-form-wrapper"
        :rules="rules"
        :model="informationForm"
        ref="Form"
      >

这里调用表单

async preservation() {
      this.$refs.Form.validate(async (valid) => {
      -------------------------------------------这里就是input输入框的校验,valid是结果,全对就是true,否则就是false
        if (valid) {
          const res = await editUserInfo({
            email: this.informationForm.email,
            phone: this.informationForm.phone,
            nickname: this.informationForm.name,
            picture: this.imageUrlId,
            cityWeather: this.informationForm.cityWeather,
            id: sessionStorage.id,
        ------------------------------------------------------上面就是传递数据了
          });
          if (res.code === 200) {
            this.$message.success("保存成功");
            localStorage.nickname = this.informationForm.name;
            EventBus.$emit("renderHeader", this.informationForm.name);
            console.log(localStorage.nickname);
          }
        } else {
          return false;
        }
      });
    },
async getdata() {
      let that = this;
      if (localStorage.username) {
        const res = await userInfo(localStorage.username);
        if (res.code == 200) {
      ------------------------------------------这里是调用数据,res里面是拿到的数据,通过赋值显示到页面上
          console.log(res);
          that.informationForm.email = res.data.email;
          that.informationForm.phone = res.data.phone;
          that.informationForm.name = res.data.nickname;
          that.imageUrlId = res.data.picture;
          that.informationForm.cityWeather = res.data.cityWeather;
          sessionStorage.id = res.data.id;
        }
      }
    },
posted @   zongkm  阅读(36)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示