django接入vue

已于 2022-12-12 12:34:31 修改
阅读量1.5k 收藏 5
点赞数 1
分类专栏： # rest_framework 文章标签： django接入vue
于 2019-09-30 22:39:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsx1314lovezyf/article/details/101797960
版权

django接入vue

  • build运行vue

    npm run build

  • 这是你的vue项目里就会有个dist文件夹
    在这里插入图片描述

  • 把index.html放在Django的template下, 其它文件放在static
    在这里插入图片描述

  • 配置settings
    在这里插入图片描述

  • 修改index.html需要的js路径
    在这里插入图片描述

  • 写入url

    # 最简单的通用类视图。一般在仅仅渲染一个模板时派上用场。可直接在URLconf中使用as_view()方法
from django.views.generic import TemplateView

urlpatterns = [
    url(r"^index/", TemplateView.as_view(template_name="index.html"), name="index"),
]

  • 这是就可以访问django服务器来运行vue, 不在需要node.js的8080端口来访问vue
    在这里插入图片描述

只因为你温柔
关注
专栏目录
Django+Vue环境搭建
WeirdoGiraffe的博客
05-19 9542
一、Django环境 1、下载Django pip install django 2、创建Django项目 django-admin startproject server #server 为项目名 3、将最外层目录改为项目名称 4、启动服务 python manage.py runserver 0.0.0.0:8000 二、Vue环境 因为Vue环境可能会面临网络问题引发的timeout，所以以下介绍两种方式来安装。 方式一：线上安装 1、安装node.js js环...
【Django基础】7、django+vue前后端分离项目，接入cas单点登录
陈建华的博客
07-11 2100
【Django基础】7、django+vue前后端分离项目，接入cas单点登录
Django和vue打通
weixin_65784341的博客
12-13 1388
【代码】Django和vue打通。
vue结合Django
最新发布
qq_40649373的博客
08-25 306
manage.py文件中修改这句话，不然会报错，找不到settings文件了。
django中vue的使用
qq_39112101的博客
07-20 3815
后端使用vue的目的? 后端使用vue的目的就是把ajax里面的数据绑定到前端，实现动静分离。 Vue绑定被分为两个部分 HTML部分：就是要绑定位置，通常用vue的语法来定义绑定的变量。 Django和vue默认都用{{ }}作为变量的标识，在django是有冲突的，所以要使用 verbatim标签进行转义。 Js部分：js部分是vue变量声明的部分，vue变量声明的规则很...
django+vue快速入门1
weixin_43877527的博客
12-21 1549
django+vue入门
Django模板中使用Vue语法
bocai_xiaodaidai的博客
12-23 1363
html文件内容如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TestManager</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body
如何在 django中安装vue
SKY_PLA的博客
12-10 5842
背景：之前写了一个运维小工具文章地址基于前后端分离的使用标准，前端使用vue,django作为后端处理接口 以下是尝试组合的过程： 一、vue安装 前提：先安装nodejs #安装最新版本的vue npm install -g @vue/cli #-g是全局安装，并移除安装了 webpack和webpack-cli npm install webpack webpack-cli –g #本地安装（推荐） npm install webpack webpack-cli --save-dev 创建VUE项
django 套vue 模板_整合 Django + Vue.js 框架快速搭建web项目(转载)
weixin_39602976的博客
12-22 933
在工作中我们经常须要构件一些基于web的项目，例如内部测试平台、运维系统等。本篇主要介绍如何使用后端Django + 前端Vue.js的技术栈快速地搭建起一套web项目的框架。为什么使用Django和Vue.js?Django是Python体系下最成熟的web框架之一，由于Python语言的易用性和受众面广，Django框架也因其能够快速开发网站应用的特性成为了中小型网站开发框架首选。且Djang...
刨析django----django+vue项目部署
weixin_45228198的博客
05-02 3624
文章目录打包Vue项目方案1打包Vue项目配置django端方案2部署django到公网 打包Vue项目 需将Vue项目打包为静态资源，放入django项目中，具体方法如下：   方案1 打包Vue项目 # 项目目录下 npm run build 会生成一个dist目录，内部就是静态文件；如下： “vue”: “^2.6.11” ico图标，加载不到，就放入static目录     生成的index首页： 必须修改静态文件的路径，以/static/开头 另外，有的vue版
基于Django+Vue实现管理kubernetes资源平台
u013898946的博客
10-20 549
基于Python+Vue实现Kubernetes资源管理平台
使用django和vue进行数据交互的方法步骤
09-18
主要介绍了使用django和vue进行数据交互的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
django+vue实现websocket即使通讯
qq_45632139的博客
05-06 1038
Websocket 即时通讯 1.需求 即时通讯工具一定要保障的是即时性 基于现在的通讯协议HTTP要如何保障即时性呢? 2.短连接型 基于HTTP短连接如何保障数据的即时性 HTTP的特性就是无状态的短连接,即一次请求一次响应断开连接失忆,这样服务端就无法主动的去寻找客户端给客户端主动推送消息 1.轮询 即:客户端不断向服务器发起请求索取消息 优点:基本保障消息即时性 缺点:大量的请求导致客户端...
django如何使用vue
weixin_35756373的博客
12-30 561
在 Django 中使用 Vue.js 有几种方式。这里介绍两种常用的方法。 将 Vue.js 作为前端框架使用：这种方法适用于将 Vue.js 作为前端框架，与 Django 后端分离的场景。 在这种情况下，你需要做的是将 Vue.js 集成到 Django 项目的前端部分，然后使用 Django 提供的视图来处理请求和响应。 下面是一个简单的例子，展示了如何在 Django 中使用 Vue...
【前后端】django与vue的结合使用
weixin_43366051的博客
04-23 4269
本文主要介绍了django和vue的结合使用，前后端分离是一种软件架构模式，旨在将应用程序的前端和后端部分分开开发、部署和维护。在传统的单体应用中，前端和后端通常紧密耦合在一起，而前后端分离则将它们解耦，使得前端和后端可以独立地进行开发、测试和部署。在前后端分离的架构中，前端负责用户界面和用户体验，而后端则负责业务逻辑、数据处理和持久化。
【django+vue】项目搭建、解决跨域访问
urge的博客
11-18 5301
django 和 Vue.js 是一对非常强大的技术组合，可以用于构建现代化的 Web 应用程序。Django： Django 是一个使用 Python 编写的高级 Web 框架，它遵循了 MTV（模型-模板-视图）的设计模式。Django 提供了许多内置功能和工具，使开发者能够快速构建安全可靠的 Web 应用程序。ORM：Django 的 ORM（对象关系映射）层可以方便地与数据库交互，支持多种数据库后端。路由系统：Django 的路由系统可以帮助你管理 URL 映射和请求分发。
前端（以Vue为例）webpack打包后dist文件包如何部署到django后台中
热门推荐
AlexGeek
10-07 2万+
       由于现在前端使用的三大框架配合webpack可以实现快速打包，为部署到服务端提供了非常大的便利，那么在前端打包后，应该做些什么可以部署到django的后台中呢？ 1.打包后文件包dist 进入到 dist文件包会发现是这个样子的： 2.在django项目中创建前端文件包（静态资源包，我习惯起名为frontend）         然后把dist文件包中的static文...
在django中配置vue
HHYZBC的博客
08-05 1093
最后即可运行django，即可看到vue脚手架中的页面了。在django项目根目录下创建vue脚手架。frontend为脚手架的名字，可以随意。mysite为项目名，可以随意自定义。创建django项目。
VUE与django建立连接交互
小明同学的博客
05-22 5746
1,先创建VUE项目： vue init webpack-simple test_test （test_test）项目名 2.进入项目目录下：cd test_test 3.下载补全依赖：cnpm install 4.下载vue-router： cnpm install vue-router --save 5.下载 axios：cnpm install axios --save 6.下载j...
python接入vue
12-16
为了在Python中接入Vue，你需要使用一个Python Web框架，例如Flask或Django。这些框架可以与Vue配合使用，以便在前端和后端之间进行通信。以下是一个简单的示例，演示如何在Flask中使用Vue： 1.首先，确保你已经安装了Flask和Vue.js。 2.创建一个名为app.py的Python文件，并添加以下代码： ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True) ``` 3.创建一个名为index.html的HTML文件，并添加以下代码： ```html <!DOCTYPE html> <html> <head> <title>Vue.js Example</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> ``` 4.运行app.py文件，并在浏览器中打开http://localhost:5000/，你应该能够看到一个显示“Hello Vue!”的页面。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

只因为你温柔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值