풀스택? Why not (Django + Vue-js) - 에피소드 2

목차


  • Django side
  • Vue.js side

  • 에피소드 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/에서 서버에 요청하고 응답을 받습니다.
    그런 다음 프런트엔드 웹 페이지의 모든 메시지를 인쇄합니다.



    추가 명령:


  • Linting 오류를 수정하려면 npm run lint --fix를 실행하십시오(VSCode 사용 시 설정Prettier 확장 권장)

  • 좋은 웹페이지 즐겨찾기