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

效果:

相关推荐
databook4 小时前
Manim实现闪光轨迹特效
后端·python·动效
Juchecar6 小时前
解惑:NumPy 中 ndarray.ndim 到底是什么?
python
用户8356290780516 小时前
Python 删除 Excel 工作表中的空白行列
后端·python
Json_6 小时前
使用python-fastApi框架开发一个学校宿舍管理系统-前后端分离项目
后端·python·fastapi
王王碎冰冰6 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼7 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安7 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队7 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好8 小时前
pinia从定义到运用
前端·vue.js
代码小学僧8 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite