【测试平台开发】——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>
内容与注册同理
不积跬步,无以致千里;不集小流,无以成江海。
如转载本文,请还多关注一下我的博客:https://www.cnblogs.com/Owen-ET/;
我的Github地址:https://github.com/Owen-ET————————————
无善无恶心之体, 有善有恶意之动, 知善知恶是良知, 为善去恶是格物。