풀스택? Why not (Django + Vue-js) - 에피소드 2
11974 단어 aderayevansdjangovuetutorial
목차
에피소드 2 구현
장고 쪽
{projectname}/urls.py
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('shark/', include('shark.urls')),
]
shark/urls.py
from django.urls import path
from . import views
app_name = 'shark'
urlpatterns = [
# path('', views.IndexView.as_view(), name='index'),
path('', views.index, name='index'),
]
shark/views.py
from urllib import response
from django.shortcuts import render
from django.views import generic
from django.http import HttpResponse
from .models import mShark
from django.http import JsonResponse
def index(request):
responseData = {
'id': 4,
'name': 'Test Response',
'roles' : ['Admin','User']
}
return JsonResponse(responseData)
# return HttpResponse("return this string")
# Create your views here.
# class IndexView(generic.ListView):
# # template_name = 'shark/index.html'
# model = mShark
# def get_queryset(self):
# return mShark.getIntro(self)
# # return HttpResponse("return this string")
shark/models.py
from django.db import models
# Create your models here.
class mShark(models.Model):
intro = "Hello, This is Shark from Django"
def getIntro(self) -> set[str]:
return { mShark.intro }
Vue.js 쪽
frontend/src/router/index.js
또는 .ts
import Vue from "vue";
import VueRouter from "vue-router";
import Shark from "../components/Shark.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/shark",
name: "Shark",
component: Shark,
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
frontend/src/components/Shark.vue
<template>
<div>
<p>{{ msg }}</p>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "vShark",
data() {
return {
msg: "",
};
},
methods: {
getResponse() {
const path = "http://127.0.0.1:8000/shark/";
axios
.get(path)
.then((res) => {
console.log(res.data);
this.msg = res.data;
})
.catch((err) => {
console.log(err);
});
},
},
created() {
this.getResponse();
},
};
</script>
이제 프런트엔드 쪽인 경로
http://localhost:8080/shark
로 이동할 때마다Vue는
http://127.0.0.1:8000/shark/
에서 서버에 요청하고 응답을 받습니다.그런 다음 프런트엔드 웹 페이지의 모든 메시지를 인쇄합니다.
추가 명령:
npm run lint --fix
를 실행하십시오(VSCode 사용 시 설정Prettier
확장 권장)Reference
이 문제에 관하여(풀스택? Why not (Django + Vue-js) - 에피소드 2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aderayevans/fullstack-why-not-django-vue-js-episode-2-3fj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)