【测试平台开发】——07Vue前端框架实战——restful请求

本节主要是前后端接口的调用，以及前端如何进行封装接口

 

一、创建相关文件

在文件夹下创建http.js、api.js、user.js

1）http.js封装接口：

• 在src下创建api文件夹

• 添加http.js文件

• 创建一个通用的aixos实例

• 设置baseURL，headers

import axios from 'axios'
var instance = axios.create({
    headers: {
        'Content-Type': 'application/json'
    },
    baseURL:'http://xxx.xxxx.com:8089/'
})

export default instance

2）user.js

创建接口，引用http.js文件

import axios from './http'

// 定义常量
const user = {
    //创建登录接口
    signIn(){
       
    }}

export default user

3）api.js

把每个界面的接口都统一封装一个js里

import user from "./user"

const api = {
    user
}

export default api

二、挂载

1）main.js

把api挂载到这里，通过引用vue，就可以引用api里面的接口

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.js'

Vue.config.productionTip = false
Vue.prototype.$api = api

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

三、接口文档--登录、注册

1）登录接口

 通过接口文档，完善user.js接口：

import axios from './http'

// 定义常量
const user = {
    //登录接口
    signIn(params){
        return axios.post('/user/login',params)
    }
    //
}

export default user

2）注册接口

import axios from './http'

// 定义常量
const user = {
    //登录接口
    signIn(params){
        return axios.post('/user/login',params)
    },
    //注册接口
    signUp(params){
        return axios.post('/user/register',params)
    }
}

export default user

四、前端调用后端接口

1）创建SingUp.vue文件

vue文件三部分模板

// html部分
<template>
    <div>
       注册
    </div>
</template>

// JS部分
<script>
export default {
    
}
</script>

// CSS部分
<style lang="stylus" scoped>

</style>

2）设置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import SignIn from '../components/SignIn.vue'
import SignUp from '../components/SignUp.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'SignIn',
    component: SignIn
  },
  {
    path: '/',
    name: 'SignUp',
    component: SignUp
  }
]

const router = new VueRouter({
  routes
})

export default router

3）登录界面跳转注册页面

登录界面的【注册】按钮定义方法，并且在js方法中添加跳转方法，红色标注

// Html部分
<template>
    <div class="login-form">
        <h1>登录</h1>
        <v-col cols="12">
          <v-text-field
            v-model="username"
            name = 'input-10-0'
            label="用户名"
            placeholder="请输入用户名"
            outlined
            :rules="[rules.required, rules.nameMin]"
            hint="至少8个字符"
            counter
            ></v-text-field>
        </v-col>

        <v-col cols="12">
          <v-text-field
            v-model="password"
            :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.pwdMin]"
            :type="show1 ? 'text' : 'password'"
            name="input-10-1"
            label="密码"
            placeholder="请输入密码"
            hint="至少6个字符"
            outlined
            counter
            @click:append="show1 = !show1"
          ></v-text-field>
        </v-col>

        <v-btn depressed color="primary" elevation="12" large>立即登录</v-btn>
        <v-btn class="btn2" depressed color="primary" elevation="12" large @click="singUp()">立即注册</v-btn>
    </div>
</template>



// JS部分
<script>
export default {
    data () {
      return {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        username: '',
        password: '',
        rules: {
          required: value => !!value || '不能为空',
          nameMin: v => v.length >= 8 || '至少8个字符',
          pwdMin: v => v.length >= 6 || '至少6个字符',
          emailMatch: () => (`The email and password you entered don't match`),
        },
      }
    },
    methods:{
      singUp(){
        this.$router.push({name: 'SignUp'})
      }
    }
}
</script>



// CSS部分
<style scoped>
.login-form{
    width: 500px;
    margin: 0 auto;
    text-align: center;
    margin-top: 100px;
}
.btn2{
    margin-left: 30px;
}
</style>

跳转效果：

4）完善注册页面

接口文档里面注册接口需要：邮箱、用户名、密码

页面构建跟登录页面差不多，就直接上代码了，包括返回按钮跳转登录页面

// html
<template>
    <div class="logon-form">
        <h1>注册</h1>
        
        <v-col cols="12">
          <v-text-field
            v-model="username"
            name = 'input-10-0'
            label="用户名"
            placeholder="请输入用户名"
            outlined
            :rules="[rules.required, rules.nameMin, rules.inputMax]"
            hint="至少8个字符，最多20个字符"
            counter
            ></v-text-field>
        </v-col>

        <v-col cols="12">
          <v-text-field
            v-model="password"
            :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.pwdMin, rules.inputMax]"
            :type="show1 ? 'text' : 'password'"
            name="input-10-1"
            label="密码"
            placeholder="请输入密码"
            hint="至少6个字符，最多20个字符"
            outlined
            counter
            @click:append="show1 = !show1"
          ></v-text-field>
        </v-col>

        <v-col cols="12">
          <v-text-field
            v-model="email"
            name = 'input-10-2'
            label="邮箱"
            placeholder="请输入邮箱"
            outlined
            :rules="[rules.required, rules.inputMax]"
            hint="最多20个字符"
            counter
            ></v-text-field>
        </v-col>

        <v-btn class="style-btn" depressed color="primary" elevation="12" large>注册</v-btn>
        <v-btn class="back-btn style-btn" depressed color="primary" elevation="12" large @click="back()">返回</v-btn>
    </div>
</template>

// JS
<script>
export default {
    data () {
      return {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        username: '',
        password: '',
        email: '',
        rules: {
          required: value => !!value || '不能为空',
          nameMin: v => v.length >= 8 || '至少8个字符',
          pwdMin: v => v.length >= 6 || '至少6个字符',
          inputMax: v => v.length <= 20 || '最多20个字符',
          emailMatch: () => (`The email and password you entered don't match`),
        },
      }
    },
    methods:{
      back(){
        this.$router.push({name: 'SignIn'})
      }
    }
}
</script>

// CSS
<style lang="stylus" scoped>
.logon-form{
  width: 500px;
  margin: 0 auto;
  text-align: center;
  margin-top: 100px;
}
.back-btn{
  margin-left: 30px;
}
.style-btn{
  width: 100px;
}
</style>

展示效果：

5）前端调用注册接口

// html
<template>
    <div class="logon-form">
        <h1>注册</h1>
        。。。。。。省略
       
        <v-btn class="style-btn" depressed color="primary" elevation="12" large @click="register()">注册</v-btn>
        <v-btn class="back-btn style-btn" depressed color="primary" elevation="12" large @click="back()">返回登录</v-btn>
    </div>
</template>

// JS
<script>
export default {
    data () {
      return {
        。。。。。。省略
        },
      }
    },
    methods:{
      back(){
        this.$router.push({name: 'SignIn'})
      },
      register(){
        let post_data = {
          username : this.username,
          password : this.password,
          email : this.email
        }
        this.$api.user.signUp(post_data).then(res=>{
          console.log(res)
        })
      }
    },
}
</script>
</style>

页面填写值，点击【注册】按钮

 解析:

register方法有两部分组成。

1、传递参数

let post_data = {
          username : this.username,
          password : this.password,
          email : this.email
        }

2、调取接口

this.$api.user.signUp(post_data).then(res=>{
          console.log(res)
        })

6）调用登录接口

点击【登录】按钮，调取登录接口

// Html部分
<template>
    <div class="login-form">
        <h1>登录</h1>
        <v-col cols="12">
          <v-text-field
            v-model="username"
            name = 'input-10-0'
            label="用户名"
            placeholder="请输入用户名"
            outlined
            :rules="[rules.required, rules.nameMin, rules.inputMax]"
            hint="至少8个字符,最多20字符"
            counter
            ></v-text-field>
        </v-col>

        <v-col cols="12">
          <v-text-field
            v-model="password"
            :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
            :rules="[rules.required, rules.pwdMin, rules.inputMax]"
            :type="show1 ? 'text' : 'password'"
            name="input-10-1"
            label="密码"
            placeholder="请输入密码"
            hint="至少6个字符,最多20字符"
            outlined
            counter
            @click:append="show1 = !show1"
          ></v-text-field>
        </v-col>

        <v-btn class="style-btn" depressed color="primary" elevation="12" large @click="login()">立即登录</v-btn>
        <v-btn class="logon-btn style-btn" depressed color="primary" elevation="12" large @click="singUp()">立即注册</v-btn>
    </div>
</template>



// JS部分
<script>
export default {
    data () {
      return {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        username: '',
        password: '',
        rules: {
          required: value => !!value || '不能为空',
          nameMin: v => v.length >= 8 || '至少8个字符',
          pwdMin: v => v.length >= 6 || '至少6个字符',
          inputMax: v => v.length <= 20 || '最多20个字符',
          emailMatch: () => (`The email and password you entered don't match`),
        },
      }
    },
    methods:{
      singUp(){
        this.$router.push({name: 'SignUp'})
      },
      login(){
        let post_data = {
          username : this.username,
          password : this.password
        }
        this.$api.user.signIn(post_data).then(res=>{
          console.log(res)
        })
      }
    },
}
</script>



// CSS部分
<style scoped>
.login-form{
    width: 500px;
    margin: 0 auto;
    text-align: center;
    margin-top: 100px;
}
.logon-btn{
    margin-left: 30px;
}
.style-btn{
  width: 100px;
}
</style>

内容与注册同理