实现前端页面请求后端接口

书接上回:想要联系本章需要先看前面文章
https://editor.csdn.net/md/?articleId=123499287

前言

前面已经讲解了如何使用Vuetify框架创建编写我们的注册页面,此时的难点就是实现前后端的交互,点击注册或者登陆按钮就能调用我们的 注册和登陆的接口 本篇就主要介绍

一、实现前端页面输入框的值与data做绑定

在这里插入图片描述

二、在注册页面内点击注册按钮实现调用后端接口并返回:

1.先按钮绑定事件

在这里插入图片描述

2.如何在前端点击按钮调用接口

在这里插入图片描述

import axios from 'axios'
axios.defaults.timeout=60000;
var instance = axios.create({
    headers: {
        'Content-Type':'application.json'
    },
    baseURL:'http://127.0.0.1:5000/'
})
export default instance

首先要在http.js中利用axios定义域名及接口参数类型

在这里插入图片描述

import axios from './http'

const user={
    SignIn(params){
        return axios.post('/user/login',params)
    },
    SignUp(params){
        return axios.get('/verifyshop',{params})
    }
}
export default user

api模块当中创建.js文件,将后端封装好的接口按照类型【get,post】定义好

总结

以上就是今天要讲的内容,本文仅仅简单介绍了按钮如何进行事件绑定,前端如何去调用执行的接口,后续会给大家介绍实战的内容

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐