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

一、视图创建

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

二、配置子路由

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

三、配置主路由

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

四、解决跨域查看(Python 安装django-cors-headers解决跨域问题-CSDN博客)

五、HTML页面

 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:8080/my.html 

 效果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/169687.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

24. Spring源码篇之占位符填充${}

简介 在spring中占位符用${}表示&#xff0c;他可以很好的实现将变动的数据与代码分离&#xff0c;这部分变化的数据就可以使用配置文件等诸多手段动态配置 spring中的占位符应用的非常广泛&#xff0c;比如Value注解 RequestMapping Feign等都支持${} spring为该功能定义了…

Jensen不等式

如果是正数&#xff0c;并且它们的和等于1&#xff0c;f是凸函数&#xff0c;那么&#xff1a; 也可表述为&#xff1a; 即x期望的凸函数值小于等于x凸函数值的期望

分享常用设计模式之单例模式(懒汉模式和饿汉模式)和几种关于设计模式的面试题

目录 1.单例模式 1.懒汉模式 2.饿汉模式 2.设计一个不能被继承的类 3.设计一个不能被继承但是可以在外部环境创建该类对象的类 4.设计一个可以被继承但不能在外部环境创建该类的对象的类 5.限制派生类对象不能拷贝也不能赋值 1.单例模式 设计一个不能在外部环境创建该类…

python通过继承、组合、委托组织类

1 python通过继承、组合、委托组织类 #概念描述1继承属性查找X.name2多态方法调用X.method&#xff0c;取决于X的类型3封装方法和运算符实现行为 通常来说&#xff0c;独特的运算使用独特的方法名称&#xff0c;不要依赖于调用标记。 python组织类结构的方式包括&#xff1a…

操作系统的主要功能--处理机、存储器、设备、文件

一、处理机管理功能 对处理机的管理可以归结为对进程的管理。处理机管理的主要功能包括&#xff1a;创建和撤销进程&#xff0c;对进程的运行进行协调&#xff0c;实现进程之间的信息交换&#xff0c;并且按照异地你给的算法将处理机分配给进程 进程控制&#xff1a;为一个作…

可验证随机函数(VRF)

文章目录 一、背景以及场景共识发展第一代 POW “以力取胜”第二代 POS/DPOS “民主投票”第三代 VRF “运气抽签” 二、可验证随机函数&#xff08;VRF&#xff09;快速开始1. VRF是什么?2. MD5 hash函数和VRF&#xff08;Verifiable Random Function&#xff09;区别3. VRF-…

数据结构之数组:简介、特性与应用

文章目录 &#x1f33e;引言&#x1f33e;数组的定义与特性&#x1f33f;数组的定义&#x1f33f;数组的特性&#x1f33f;数组的优缺点 &#x1f33e;数组的应用场景&#x1f341;数组的基本应用&#x1f341;动态数组&#xff08;Dynamic Array&#xff09;&#x1f341;多维…

SQL 注入漏洞的理解

SQL 注入漏洞的理解 1. 漏洞描述 SQL注入漏洞是一种存在于Web 应用程序中的安全漏洞&#xff0c;它允许攻击者通过在用户中注入恶意的SQL 到吗&#xff0c;来操纵应用程序和数据库之间的交互&#xff0c;来执行未经授权的SQL命令。 2. 漏洞原理 SQL注入漏洞产生的原因主要是因为…

项目里边更换了同名的图片地址 / 图片没有及时更新 / 什么原因

一、问题分析 1.1、分析一 浏览器缓存 项目里边更换了同名的图片地址&#xff0c;图片没有及时更新 可能是浏览器缓存的原因&#xff0c;浏览器会将之前访问过的文件缓存下来&#xff0c;下次访问同名的文件时会先从缓存中读取。 如果相同的图片地址没有发生变化&#xff0c…

【刷题宝典NO.4】

目录 公交站间的距离 生命游戏 公交站间的距离 https://leetcode.cn/problems/distance-between-bus-stops/ 环形公交路线上有 n 个站&#xff0c;按次序从 0 到 n - 1 进行编号。我们已知每一对相邻公交站之间的距离&#xff0c;distance[i] 表示编号为 i 的车站和编号为 …

Axios笔记

目录 一、安装Axios 二、发送请求 &#xff08;一&#xff09;Get请求 &#xff08;二&#xff09;Post请求 1. 第一种方式 2. 第二种方式 三、拦截器 &#xff08;一&#xff09;请求前拦截器 &#xff08;二&#xff09;应答拦截器 四、封装 一、安装Axios -g 全局…

程序员职场可能遇到的问题总结!

在职场中&#xff0c;你是否遇到过这样的领导或同事&#xff0c;他可能是自恋狂&#xff0c;自吹自擂自我标榜&#xff1b;可能是团队合作的绊脚石&#xff0c;对团队合作态度消极并频繁拖后腿&#xff1b;可能是抱怨专家&#xff0c;满满负能量&#xff1b;可能是完美主义者&a…

二十一、数组(6)

本章概要 数组排序Arrays.sort的使用并行排序binarySearch二分查找parallelPrefix并行前缀 数组排序 根据对象的实际类型执行比较排序。一种方法是为不同的类型编写对应的排序方法&#xff0c;但是这样的代码不能复用。 编程设计的一个主要目标是“将易变的元素与稳定的元素…

win11渗透武器库,囊括所有渗透工具

开箱即用&#xff0c;最全的武器库&#xff0c;且都是2023年11月最新版&#xff0c;后续自己还可以再添加&#xff0c;下载地址&#xff1a;https://download.csdn.net/download/weixin_59679023/88565739 服务连接 信息收集工具 端口扫描 代理抓包 漏洞扫描 指纹识别 webshel…

【C语法学习】28 - 字符测试函数

文章目录 1 isalnum()函数2 isalpha()函数3 islower()函数4 isupper()函数5 isdigit()函数6 isxdigit()函数7 iscntrl()函数8 isgraph()函数9 isspace()函数10 isblank()函数11 isprint()函数12 ispunct()函数13 tolower()函数14 toupper()函数 1 isalnum()函数 isalnum()函数…

SpringBoot——》关联映射

推荐链接&#xff1a; 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…

移动机器人路径规划(七)--- 基于MDP的路径规划MDP-Based Planning

目录 1 什么是MDP-Based Planning 2 worst-case analysis for nondeterministic model 3 Expected Cost Planning 4 Real Time Dynamic Programming&#xff08;RTDP&#xff09; 1 什么是MDP-Based Planning 之前我们从起点到终点存在很多可执行路径&#xff0c;我们可以…

Can‘t find libdevice directory ${CUDA_DIR}/nvvm/libdevice

win10 Running deepxde 的时候出现问题&#xff1a; cuda-nvcc 安装后解决了。 # Install NVCC conda install -c nvidia cuda-nvcc11.3.58 -y # Configure the XLA cuda directory mkdir -p $CONDA_PREFIX/etc/conda/activate.d printf export LD_LIBRARY_PATH$LD_LIBRARY_P…

Python实现一箭穿心

文章目录 &#x1f384;效果&#x1f3f3;️‍&#x1f308;Turtle模块&#x1f339;代码&#x1f33a;代码讲解 &#x1f384;效果 &#x1f3f3;️‍&#x1f308;Turtle模块 Turtle是一个绘图工具&#xff0c;是Python标准库中的一个模块。它提供了一种简单而直观的方式来创…

【C++】内存管理(new与delete)

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 前言 本篇文章我们一起来学习C的内存管理方式&…