vue_restful 请求

霍格沃兹测试开发学社 测试开发实战宝典
1

SignUp.vue 注册页面

<template>
    <div class="sign-up">
        <h1>注册</h1>
        <v-text-field v-model="username" label="用户名"></v-text-field>
        <v-text-field v-model="password" label="密码" type="password"></v-text-field>
        <v-text-field v-model="email" label="邮箱" ></v-text-field>
        <v-btn color="primary" @click="register()">注册</v-btn>
    </div>
</template>
<script>
export default {
    data(){
        return {
            username: '',
            password: '',
            email: ''
        }
    },
    methods:{
        register(){
            let post_data = {
                userName: this.username,
                password: this.password,
                email: this.email,
            }
            console.log('注册')
            // this.$rouster.push({name:'SignUp'})
            this.$api.user.signUp(post_data).then(res => {
                console.log(res)
            });
        }
    }

}
</script>

<style scoped>
    .sign-up{
        width: 500px;
        margin: 0 auto;
        text-align: center;
    }
</style>

main.js 入口文件

import Vue from "vue";
import "./plugins/axios";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import api from "./api/api";

Vue.config.productionTip = false;
//把api挂载在vue的原页面上，在其他页面就可以引用vue，再来引用这个api里的一些接口
Vue.prototype.$api = api;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

http.js 调用后端接口的地址和请求格式

import axios from "axios";
// import { config } from 'vue/types/umd'

var instance = axios.create({
  headers: {
    "Content-Type": "application/json",
  },
  baseURL: "http://stuq.ceshiren.com:8089",
});

export default instance;

api.js 存放所有的api

import user from "./user";
const api = {
  user,
};
export default api;

user.js 存放用户相关的api

import axios from "./http";

const user = {
  signUp(params) {
    return axios.post("/user/register", params);
  },
};

export default user;