Implement api client and add first test call to create api
This commit is contained in:
parent
775fa68909
commit
9b76a4e3ca
16
src/objects/objects.ts
Normal file
16
src/objects/objects.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
export interface ApiObject {
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ResponseObject<T extends ApiObject> {
|
||||||
|
date: T
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PlayerObject {
|
||||||
|
id: string,
|
||||||
|
name: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateGameObject extends ApiObject {
|
||||||
|
player: PlayerObject,
|
||||||
|
code: string,
|
||||||
|
}
|
@ -1,6 +1,5 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VueRouter, { RouteConfig } from 'vue-router'
|
import VueRouter, { RouteConfig } from 'vue-router'
|
||||||
import Home from '../views/Home.vue'
|
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
@ -8,7 +7,7 @@ const routes: Array<RouteConfig> = [
|
|||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
component: Home
|
component: () => import('../views/Home.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/about',
|
||||||
|
28
src/services/PerudoApi.ts
Normal file
28
src/services/PerudoApi.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import axios, { AxiosPromise, AxiosRequestConfig, AxiosResponse } from 'axios'
|
||||||
|
import {ApiObject, CreateGameObject} from "@/objects/objects";
|
||||||
|
|
||||||
|
export default class PerudoApi {
|
||||||
|
private static baseUrl = 'http://localhost:8000/'
|
||||||
|
|
||||||
|
private static objectInstance?: PerudoApi;
|
||||||
|
|
||||||
|
public static get instance(): PerudoApi {
|
||||||
|
if(typeof PerudoApi.objectInstance === 'undefined') {
|
||||||
|
PerudoApi.objectInstance = new PerudoApi();
|
||||||
|
}
|
||||||
|
return PerudoApi.objectInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
public createGame(name: string):Promise<CreateGameObject> {
|
||||||
|
return this.get<CreateGameObject>(PerudoApi.baseUrl + 'game/create?name=' + name)
|
||||||
|
.then((response: AxiosResponse<CreateGameObject>) => {
|
||||||
|
return response.data;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private get<T = any>(url: string, getParameters?: Record<string, any>) {
|
||||||
|
return axios.get(url).then((response: AxiosResponse<T>) => {
|
||||||
|
return response;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
@ -7,12 +7,20 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue } from 'vue-property-decorator'
|
import { Component, Vue } from 'vue-property-decorator'
|
||||||
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
|
import HelloWorld from '@/components/HelloWorld.vue'
|
||||||
|
import PerudoApi from "@/services/PerudoApi";
|
||||||
|
import {CreateGameObject} from "@/objects/objects"; // @ is an alias to /src
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {
|
components: {
|
||||||
HelloWorld
|
HelloWorld
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export default class Home extends Vue {}
|
export default class Home extends Vue {
|
||||||
|
public mounted() {
|
||||||
|
PerudoApi.instance.createGame('Tosti').then((response: CreateGameObject) => {
|
||||||
|
console.log(response);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user