add a minimal working example
This commit is contained in:
parent
55a9995b3c
commit
1e520e7203
|
@ -27,7 +27,7 @@ class CustomerViewSet(viewsets.ModelViewSet):
|
||||||
"""
|
"""
|
||||||
queryset = Customer.objects.all()
|
queryset = Customer.objects.all()
|
||||||
serializer_class = CustomerSerializer
|
serializer_class = CustomerSerializer
|
||||||
permission_classes = [permissions.IsAuthenticated]
|
# permission_classes = [permissions.IsAuthenticated]
|
||||||
|
|
||||||
|
|
||||||
class DeviceManufacturerViewSet(viewsets.ModelViewSet):
|
class DeviceManufacturerViewSet(viewsets.ModelViewSet):
|
||||||
|
|
|
@ -1,15 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<img alt="Vue logo" src="./assets/logo.png" />
|
<div>
|
||||||
<HelloWorld msg="Hello Vue 3.0 + Vite" />
|
<customer></customer>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
data() {
|
||||||
components: {
|
return {};
|
||||||
HelloWorld
|
},
|
||||||
}
|
};
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
const getAPI = axios.create({
|
||||||
|
baseURL: "http://localhost:8000/api/",
|
||||||
|
timeout: 1000,
|
||||||
|
});
|
||||||
|
|
||||||
|
export { getAPI };
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Customer</th>
|
||||||
|
<th>Description</th>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="customer in customers" :key="customer.id">
|
||||||
|
<td>
|
||||||
|
{{ customer.name }}
|
||||||
|
</td>
|
||||||
|
<td>{{ customer.description }}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getAPI } from "../axios-api";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
customers: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
getAPI
|
||||||
|
.get("/customers/")
|
||||||
|
.then((response) => {
|
||||||
|
console.log("Post API has recieved data");
|
||||||
|
this.customers = response.data.results;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -1,5 +1,9 @@
|
||||||
import { createApp } from 'vue'
|
import { createApp } from "vue";
|
||||||
import App from './App.vue'
|
|
||||||
import './index.css'
|
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
import App from "./App.vue";
|
||||||
|
import Customer from "./components/Customers.vue";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
app.component("customer", Customer);
|
||||||
|
app.mount("#app");
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import Customers from './views/Customers'
|
||||||
|
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
export default new VueRouter({
|
||||||
|
history: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes: [{
|
||||||
|
path: '/',
|
||||||
|
name: 'customers',
|
||||||
|
component: Customers,
|
||||||
|
}, ]
|
||||||
|
})
|
Loading…
Reference in New Issue