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

效果:

相关推荐
电商数据girl7 分钟前
有哪些常用的自动化工具可以帮助处理电商API接口返回的异常数据?【知识分享】
大数据·分布式·爬虫·python·系统架构
CoooLuckly10 分钟前
numpy数据分析知识总结
python·numpy
无限远的弧光灯12 分钟前
c语言学习_函数递归
c语言·开发语言·学习
天天向上102418 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
趣多多代言人19 分钟前
从零开始手写嵌入式实时操作系统
开发语言·arm开发·单片机·嵌入式硬件·面试·职场和发展·嵌入式
超龄超能程序猿26 分钟前
(六)PS识别:源数据分析- 挖掘图像的 “元语言”技术实现
python·组合模式
胖大和尚30 分钟前
C++项目学习计划
开发语言·c++·学习
开开心心_Every31 分钟前
全能视频处理工具介绍说明
开发语言·人工智能·django·pdf·flask·c#·音视频
芬兰y34 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁40 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js