Python 前后端分离项目Vue部署应用

矫情吗；* 2024-02-17 10:23 80阅读 0赞

### 一、视图创建 ###

from django.http import JsonResponse
    from django.shortcuts import render
    
    # Create your views here.
    from django.views import View
    
    
    class IndexView(View):
        def get(self,request):
    
            # 前后端分离 （前端JS代码渲染数据）
            return JsonResponse({'name':'Hello,mike'})

### 二、配置子路由 ###

from django.urls import path
    
    from book import views
    
    urlpatterns = [
        #子路由
        path('', views.IndexView.as_view()),
    
    ]

### 三、配置主路由 ###

from django.contrib import admin
    from django.urls import path, include
    
    urlpatterns = [
        path('', include('book.urls')),  #子路由
        path('admin/', admin.site.urls),
    ]

#### 四、解决跨域查看（[Python 安装django-cors-headers解决跨域问题-CSDN博客][Python _django-cors-headers_-CSDN]） ####

### 五、HTML页面 ###

![8609a7425041420a90d290dfaa242407.png][] my.html页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>前后端分离数据</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
    <div id="app">{
       {name}}</div>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'',
            },
            mounted:function () {
               axios.get('http://127.0.0.1:8000')
                .then(response=>{
                    this.name=response.data.name
                })
                .catch(error=>{
                    alert(error)
                })
            },
        })
    </script>
    </body>
    </html>

六、运行前后端服务

[ http://127.0.0.1:8000][http_127.0.0.1_8000]

![a0b5fcd7ee2b48ab9b93d32e54152e51.png][]

[ http://127.0.0.1:8080/my.html][http_127.0.0.1_8000]

![a8decef5564a4ef3ace1a7e9ba91919f.png][]

#### 效果：![fff8c39546e447b4a249f2abdf0c260e.png][] ####

![c43b8a6c8e364ed48e5da78aec41deaa.png][]

[Python _django-cors-headers_-CSDN]: https://blog.csdn.net/hlx20080808/article/details/134617820?spm=1001.2014.3001.5501
[8609a7425041420a90d290dfaa242407.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/35e69cade3eb4c61892c2d6ecadb62bb.png
[http_127.0.0.1_8000]: http://127.0.0.1:8080/my.html
[a0b5fcd7ee2b48ab9b93d32e54152e51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/c5ec8876b10d4d39b5e695e1254f3034.png
[a8decef5564a4ef3ace1a7e9ba91919f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/2a309e4ad9524a8c8ca21a62cc64a756.png
[fff8c39546e447b4a249f2abdf0c260e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/de8bf1c32baf48d49f806e1691872ffb.png
[c43b8a6c8e364ed48e5da78aec41deaa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/21628a30f023439cb3819bc05da9a359.png