【Vue.js】实现前端页面请求后端接口

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

书接上回：想要联系本章需要先看前面文章
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】定义好

总结

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