关于接口 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;
}
}
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了