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

一、视图创建

python 复制代码
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'})

二、配置子路由

python 复制代码
from django.urls import path

from book import views

urlpatterns = [
    #子路由
    path('', views.IndexView.as_view()),

]

三、配置主路由

python 复制代码
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博客

五、HTML页面

my.html页面

python 复制代码
<!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:8080/my.html

效果:

相关推荐
最后一个农民工7 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
用户83562907805110 小时前
从手动编辑到代码生成:Python 助你高效创建 Word 文档
后端·python
侃侃_天下10 小时前
最终的信号类
开发语言·c++·算法
c8i10 小时前
python中类的基本结构、特殊属性于MRO理解
python
艾小码10 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
echoarts10 小时前
Rayon Rust中的数据并行库入门教程
开发语言·其他·算法·rust
liwulin050610 小时前
【ESP32-CAM】HELLO WORLD
python
wusp199410 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
Aomnitrix11 小时前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
Doris_202311 小时前
Python条件判断语句 if、elif 、else
前端·后端·python