当前位置： 首页 > news >正文

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

news 2026/4/20 13:13:40

一、视图创建

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 

 效果：

 

相关文章：

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):# 前后端分离 &#xff08;前端JS代码渲染数据&#xff09;return JsonRespo…...

编程日记 2023/11/25 19:56:10

Linux中安装MySQ-合集

Linux中安装MySQL Centos中 1、卸载不必要的软件 先卸载mariadb安装MySQL必要环境 rpm -qa|grep mariadb rpm -e --nodeps mariadb-libs yum install -y gcc-c yum install net-tools yum -y install gcc如果需要Java等程序 yum install -y java* java-1.8.0-openjdk* op…...

编程日记 2023/11/25 19:55:09

elk 简单操作手册

1.1. 基础概念 EFK不是一个软件,而是一套解决方案,开源软件之间的互相配合使用,高效的满足了很多场合的应用,是目前主流的一种日志系统。 EFK是三个开源软件的缩写,分别表示:Elasticsearch , Filebeat, Kibana , 其中Elasticsearch负责日志保存和搜索,Filebeat负责收集日志,Ki…...

编程日记 2023/11/25 19:54:08

CSS画一条线

<p style"border: 1px solid rgba(0, 0, 0, 0.1);"></p> 效果&#xff1a;...

编程日记 2023/11/25 19:53:07

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

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

编程日记 2023/11/25 19:52:06

python每日一题——6三数之和

题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。 …...

编程日记 2023/11/25 19:50:04

黑马点评笔记 分布式锁

文章目录 分布式锁基本原理和实现方式对比Redis分布式锁的实现核心思路实现分布式锁版本一Redis分布式锁误删情况说明解决Redis分布式锁误删问题分布式锁的原子性问题分布式锁-Redission分布式锁-redission可重入锁原理分布式锁-redission锁重试和WatchDog机制分布式锁-redissi…...

编程日记 2023/11/25 19:48:03

java---抽象类 用abstract修饰

抽象类是不能被[ 直接 ] [ 显式 ]实例化的如果抽象类中有一个抽象方法,那么这个类一定要声明为抽象类(反过来说,如果一个类是抽象类,那么它里面可以没有抽象方法)如果父类中有一个抽象方法,那么抽象的子类,要么也得是抽象的,要么就把抽象的方法全部给具体化(实现了) 抽象方法 …...

编程日记 2023/11/25 19:47:01

JVM 之 javac、java、javap 命令详解

目录 一. 前言 二. javac 命令 三. java 命令 四. javap 命令 一. 前言 在日常工作中&#xff0c;我们新建 Java工程&#xff0c;写好代码后&#xff0c;编译和运行几乎都是通过 IDE&#xff08;如idea、eclipse&#xff09;工具完成。但作为 Java开发者还是要了解下 Java虚…...

编程日记 2023/11/25 19:46:01

市场被套牢，没有了解积累和分配，昂首资本一一介绍

很多投资者对市场中的积累和分配的概念不是很清楚&#xff0c;下面昂首资本将一一介绍。 积累意味着尽可能多地买入筹码&#xff0c;而不大幅抬高价格&#xff0c;直到在你买入时的价格水平上没有或几乎没有筹码。这种买入通常发生在市场熊市之后&#xff0c;此时有最佳买入价…...

编程日记 2023/11/25 19:43:59

notion 3.0.0 版本最新桌面端汉化教程，支持MAC和WIN版本

notion客户端汉化&#xff08;目前版本3.0.0&#xff09; 最近notion桌面端更新了3.0.0版本后会导致老版本汉化失效&#xff0c;本项目实现了最新版Notion桌面端的汉化。 文件下载地址&#xff1a;汉化文件下载地址 项目说明 本项目针对新的客户端做了汉化文化&#xff0c;依…...

编程日记 2023/11/25 19:42:58

mysql union 和 union all区别？

在MySQL中&#xff0c;UNION和UNION ALL都是用于合并两个或多个SELECT语句的结果集。它们之间的主要区别在于如何处理重复记录。 UNION:UNION在合并结果集时会删除重复的记录。这意味着如果两个SELECT语句的输出结果中有相同的记录&#xff0c;那么UNION只会保留其中一个。在执…...

编程日记 2023/11/25 19:41:56

uni-app小程序 swiper 分页器样式修改

小程序中使用 wx-swiper-dot和wx-swiper-dot-active选择器 H5中使用uni-swiper-dot和uni-swiper-dot-active选择器 .swiper {height: 408px;margin-bottom: 28rpx;::v-deep .uni-swiper-dot {background: #e7e7e7;&.uni-swiper-dot-active {background: #b1b1b1;}}// #ifde…...

编程日记 2023/11/25 19:40:55

2023.11.23使用flask实现在指定路径生成文件夹操作

2023.11.23使用flask实现在指定路径生成文件夹操作 程序比较简单&#xff0c;实现功能&#xff1a; 1、前端输入文件夹 2、后端在指定路径生成文件夹 3、前端反馈文件夹生成状态 main.py from flask import Flask, request, render_template import osapp Flask(__name__)a…...

编程日记 2023/11/25 19:39:54

【Unity入门】Input.GetAxis(““)控制物体移动、旋转

使用Unity的Input.GetAxis(“”)控制物体移动、旋转 Input.GetAxis(“”) 是 Unity 引擎中的一个方法&#xff0c;用于获取游戏玩家在 键盘 或 游戏手柄 上输入的某个轴&#xff08;Axis&#xff09;的值。这里的 “” 是一个字符串参数&#xff0c;表示要获取的轴的名称。 在…...

编程日记 2023/11/25 19:38:53

【C++ 设计模式】面向对象设计原则 Template Method 模式 Strategy 策略模式

一、面向对象设计原则 重新认识面向对象 理解隔离变化 • 从宏观层面来看&#xff0c;面向对象的构建方式更能适应软件的变化&#xff0c; 能将变化所带来的影响减为最小 各司其职 • 从微观层面来看&#xff0c;面向对象的方式更强调各个类的“责任” • 由于需求变化导…...

编程日记 2023/11/25 19:37:52

Flink-简介与基础

Flink-简介与基础 一、Flink起源二、Flink数据处理模式1.批处理2.流处理3.Flink流批一体处理 三、Flink架构1.Flink集群2.Flink Program3.JobManager4.TaskManager 四、Flink应用程序五、Flink高级特性1.时间流&#xff08;Time&#xff09;和窗口&#xff08;Window&#xff0…...

编程日记 2023/11/25 19:36:51

mobiusp 正在创作乐曲

题目描述 mobiusp 创作了一首 n 个音符的乐曲&#xff0c;其中第 iii 个音符的音高为 ai​ &#xff0c;但是 mobiusp 对以前的创作风格和黑历史很不满意&#xff0c;他希望所有音符的音高 ai 都是 1∼7 的正整数&#xff0c;且相邻的音高差不超过 k 。 现在他要修改若干个音符…...

编程日记 2023/11/25 19:35:50

Jensen不等式

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

编程日记 2023/11/25 19:34:49

北邮22级信通院数电：Verilog-FPGA（11）第十一周实验（2）设计一个24秒倒计时器

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章&#xff0c;请访问专栏&#xff1a; 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 目录 一.代码部分 1.1 counter_24.v 1.2 divid…...

编程日记 2023/11/25 19:32:46

Unity 引擎中的 RuntimeInitializeOnLoadMethod 属性解析

在 Unity 游戏开发中，有许多细微但非常重要的特性，其中之一就是 RuntimeInitializeOnLoadMethod 属性。这篇博文将详细探讨这个属性的工作原理，并结合实例解释其在实际开发中的应用。 背景介绍 Unity 引擎虽然主要使用 C# 进行开发，但其核心是基于 C 和 C++ 构建的。这意…...

编程新知 2026/4/20 12:12:53

解密网易云音乐NCM格式：ncmdumpGUI让你的音乐库重获自由

解密网易云音乐NCM格式&#xff1a;ncmdumpGUI让你的音乐库重获自由 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾为网易云音乐的NCM加密格式而烦恼…...

编程新知 2026/4/20 8:47:14

【逆向实战】从算法到驱动：剖析学生机房管理助手7.8的进程隐藏与设备管控机制

1. 学生机房管理助手7.8逆向分析实战 记得第一次在学生机房看到那个熟悉的蓝色图标时&#xff0c;我就知道又要和这个"老朋友"斗智斗勇了。学生机房管理助手7.8版本相比之前的7.5版本&#xff0c;最明显的变化就是进程名随机化算法的调整。用dnSpy反编译脱壳后的mai…...

编程新知 2026/4/20 7:58:11

别再暴力匹配了！用DBoW2词袋模型5分钟搞定ORB-SLAM2回环检测

从暴力匹配到高效检索&#xff1a;DBoW2词袋模型在ORB-SLAM2回环检测中的实战优化 当你在Jetson Nano上运行ORB-SLAM2时&#xff0c;是否经历过回环检测模块成为整个系统性能瓶颈的困扰&#xff1f;传统暴力匹配方法在面对数万张历史关键帧时&#xff0c;其O(N)的时间复杂度足以…...

编程新知 2026/4/20 7:53:57

SenseVoiceSmall实战：如何让AI听懂你的喜怒哀乐？附完整部署指南

SenseVoiceSmall实战&#xff1a;如何让AI听懂你的喜怒哀乐&#xff1f;附完整部署指南 1. 引言&#xff1a;当语音识别遇上情感理解 想象一下&#xff0c;当你对着智能音箱说"我太高兴了"和"我太生气了"时&#xff0c;设备能听出你语气中的不同情绪吗&a…...

编程新知 2026/4/20 7:41:30

LFM2.5-1.2B-Thinking在人力资源领域的应用：智能简历分析系统

LFM2.5-1.2B-Thinking在人力资源领域的应用&#xff1a;智能简历分析系统 1. 引言 每天&#xff0c;HR部门都要面对成百上千份简历&#xff0c;手动筛选耗时耗力&#xff0c;还容易错过优秀人才。传统的关键词匹配方法往往只能看到表面的技能列表&#xff0c;无法深入理解候选…...

编程新知 2026/4/20 7:19:10

模块解耦的重要性

**模块解耦为什么如此重要&#xff1f; 1. 开发效率提升&#xff1a;清晰的模块边界让团队并行开发互不干扰&#xff1b; 2. 维护成本降低&#xff1a;bug修复和功能迭代的影响范围可控&#xff1b; 3. 代码复用性强&#xff1a;通用模块可在多个项目间复用&#xff1b; 4. 测试…...

编程新知 2026/4/20 6:00:05

Intv_AI_MK11在Ubuntu系统上的最佳实践：从安装到高性能部署

Intv_AI_MK11在Ubuntu系统上的最佳实践&#xff1a;从安装到高性能部署 1. 环境准备与系统初始化 在开始部署Intv_AI_MK11之前&#xff0c;我们需要确保Ubuntu系统已经做好充分准备。以下步骤适用于Ubuntu 20.04/22.04 LTS版本&#xff0c;建议使用服务器版以获得最佳性能。 …...

编程新知 2026/4/20 5:28:20

别再只盯着效率了！聊聊DCDC电源在轻载时，PSM、Burst、FCM三种模式到底该怎么选？

DCDC电源轻载模式深度解析&#xff1a;PSM、Burst、FCM的工程实践指南 在IoT设备和便携式电子产品的设计中&#xff0c;电源管理芯片的轻载性能往往成为决定产品续航能力的关键因素。某次深夜调试中&#xff0c;当我用示波器捕捉到一颗纽扣电池供电的传感器模组在待机时产生的异…...

编程新知 2026/4/20 4:28:07

“Community-Driven Spring Integration Extensions”（社区驱动的 Spring Integration 扩展）是指由 Spring 社区

“Community-Driven Spring Integration Extensions”&#xff08;社区驱动的 Spring Integration 扩展&#xff09;是指由 Spring 社区&#xff08;而非 Spring 官方核心团队&#xff09;开发、维护和贡献的一系列补充性模块&#xff0c;用于增强 Spring Integration 的功能边…...

编程新知 2026/4/20 3:51:17