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

效果:

相关推荐
菌菇汤2 分钟前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
R-sz5 分钟前
java流式计算 获取全量树形数据,非懒加载树,递归找儿
java·开发语言·windows
随意02323 分钟前
Qt 事件
开发语言·qt
qq_4116719829 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
Gyoku Mint30 分钟前
深度学习×第4卷:Pytorch实战——她第一次用张量去拟合你的轨迹
人工智能·pytorch·python·深度学习·神经网络·算法·聚类
鸥梨菌Honevid31 分钟前
Qt自定义控件(1)——QPaintEvent
开发语言·qt
Code季风34 分钟前
深入比较 Gin 与 Beego:Go Web 框架的两大选择
开发语言·golang·go·gin·beego
清幽竹客2 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim2 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck2 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端