Django+Vue.js新建项目

最新推荐文章于 2024-08-11 18:23:38 发布
最新推荐文章于 2024-08-11 18:23:38 发布
阅读量224 收藏
点赞数
分类专栏： 前端 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39333120/article/details/118764442
版权
本文介绍了如何安装Django并创建项目，详细步骤包括配置settings.py，启动项目，创建应用和路由。同时，展示了如何在Django项目中引入Vue，特别提到了解决Vue与Django模板语法冲突的方法。最后，通过一个简单的示例演示了如何编写接口获取数据并在Vue前端展示。
摘要由CSDN通过智能技术生成

文章目录

Django安装

安装
pip install django

Django创建项目

创建django项目
django-admin startproject vue_django

输入 code .在VSCode中打开当前这个项目

修改settings.py配置文件
TEMPLATES里面指定稍后呈现的文件模板在哪，创建一个目录templates在根目录下面，用于存放后续的模板文件
并修改语言和时区
在这里插入图片描述
在这里插入图片描述
运行基本项目
python manage.py runserver

在这里插入图片描述

创建应用book，并修改配置文件
python manage.py startapp book
修改配置文件，将book应用注册到整个项目的APP
在这里插入图片描述

新建应用路由文件
在book目录下新建urls.py文件，
在这里插入图片描述
将应用地址文件写入项目地址文件，book应用的路由地址统一由book/开头
在这里插入图片描述

编写视图函数，返回功能页面
需要写三个地方，后台逻辑views.py+路由urls.py+前端页面template（依序见下图）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
效果
在这里插入图片描述

使用Vue

准备数据
写一个接口，实现获取所有图书，此处采用手动写模拟数据
在这里插入图片描述
接口请求结果
在这里插入图片描述

引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

在前端页面中使用Vue
在这里插入图片描述
在这里插入图片描述
页面效果
在这里插入图片描述

易错
django和vue默认都是{{ }}的绑定插值语法，所以会有冲突，所以需要在vue对象里面声明一个分隔符，用[[ ]]替换{{ }}，这样就避免了前端的语法和后端的django模板冲突
在这里插入图片描述

参考教程

Vue.js+django 整合应用快速示例

北海几经夏
关注
专栏目录
python django vue_Django+Vue.js构建项目
weixin_33356544的博客
12-28 552
本文主要讲述如何从0开始，用Django和Vue.js构建一个项目。文章提要：Django与vue.js整合开发原理从头新建一个Django项目新建一个前端页面，使用vue应用在Django中设计api在vue应用中调用api获取数据，并展示到用户界面几年前曾接触过Django Web开发框架，对其留下了深刻的印象。后来做数据可视化过程中，愈发觉得不久的将来，可视化领域必是JavaScript的天...
django 套vue 模板_整合 Django + Vue.js 框架快速搭建web项目(转载)
weixin_39602976的博客
12-22 930
在工作中我们经常须要构件一些基于web的项目，例如内部测试平台、运维系统等。本篇主要介绍如何使用后端Django + 前端Vue.js的技术栈快速地搭建起一套web项目的框架。为什么使用Django和Vue.js?Django是Python体系下最成熟的web框架之一，由于Python语言的易用性和受众面广，Django框架也因其能够快速开发网站应用的特性成为了中小型网站开发框架首选。且Djang...
【转】整合 Django + Vue.js 框架快速搭建web项目
m0_37136911的博客
09-26 1462
转自：https://cloud.tencent.com/developer/article/1005607 可能遇到的问题及解决方法：https://segmentfault.com/q/1010000009075667/a-1020000011764624 一、 背景 在工作中我们经常须要构件一些基于web的项目，例如内部测试平台、运维系统等。本篇主要介绍如何使用后端Django + 前...
基于django+vue的交通管理系统的设计与实现【开题报告+程序+论文】计算机毕设
最新发布
紫蝶学姐--毕设
08-11 914
研究背景 随着城市化进程的加速和汽车保有量的持续增长，交通管理面临着前所未有的挑战。交通拥堵、交通事故频发、违章行为难以有效监管等问题日益凸显，不仅影响了市民的日常出行效率，也对城市的安全与可持续发展构成了威胁。传统的人工交通管理模式已难以满足现代城市交通管理的需求，因此，开发一套智能化、高效能的交通管理系统显得尤为重要。该系统旨在通过现代信息技术手段，整合并分析海量交通数据，实现对交通流的实时监测、预测与调控，以及违章行为的精准识别与快速处理，为城市交通管理者提供科学的决策支持，提升城市交通管理效能。
使用Django + Vue.js快速而优雅地构建前后端分离项目
热门推荐
liuyukuan的专栏
04-22 4万+
  2017-02-11 20:43 | https://sanwen8.cn/p/68bJEgr.html 作者｜高远 我为什么要选择Django与Vue.js？ 首先介绍一下我看重的点： Django (MVC框架) Python ORM 简单、清晰的配置 Admin app Django 仅因为 Python 的血统，就已经站在了巨人的肩...
搭建vue项目步骤详解
我不是程序员的博客
09-27 210
搭建vue项目步骤详解 第一步：搭建node.js环境 下载安装node.js，一路下一步就行，如果中途出现错误信息为2503或2502的一般情况下是因为权限不足。（下载地址为：https://nodejs.org/en/） 检查是否安装成功：如果输出版本号，说明我们安装node环境成功 为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可
结合Django框架快速搭建Vue项目
qq_46163588的博客
06-23 407
Vue.js 目录结构 <!-- 展示模板 --> <template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> </div> </template> <script> // 导入组件 import Hello from './components/Hello' export defa
python+Django+vue.js 首次搭建前后端分离项目
BINgreate的博客
12-16 1058
python+django+vue 准备工作：IDE，【JetBrains PyCharm2018.3.5】【webpack 3.3.0】【python3.7.5】【npm5.8.0】【vue-cli2.9.6】 1、Pycharm创建第一个项目 django-admin startproject pc_admin 创建后如下所示： . ├── manage.py └── pc_admin ...
python django框架+vue.js前后端分离
weixin_56327199的博客
12-16 1199
本文用于学习django+vue.js实现web前后端分离协作开发。以一个添加和删除数据库书籍应用为实例。 django框架官方地址：www.djangoproject.com/ vue.js 框架官方地址：cn.vuejs.org/ 一、构建django项目 1. 创建工程文件和APP 创建django_vue django-admin startproject django_vue 进入django_vue，创建虚拟环境django_vue_env pip install virtualenv #安
Django+vue+ElementUi 实现前后端分离项目
vincent的博客
10-28 4660
![](https://img2020.cnblogs.com/blog/2595966/202110/2595966-20211027200616914-384109510.png) ![](https://img2020.cnblogs.com/blog/2595966/202110/2595966-20211027200630022-562388827.png) 本文主要分为五个部分，逐一进行讲解前后端分离项目环境搭建流程，主要有：环境搭建、Django、vue、整合、总结； 一..
django项目与vue项目结合使用详解
weixin_42289273的博客
10-17 3825
1. 安装node.js node.js官网：https://nodejs.org/zh-cn/ cmd终端输入node -v 和npm -v检测是否安装成功 2. 使用淘宝npm镜像 大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 npm install -g cnpm --registry=https://registry.npm.taobao.org 3. 项目初始化 1.第一步：安装vue-cli，在命令提示符中输入 cnpm i...
django+vue分离项目实战.rar
09-03
本资源下载直接可用 需要安装资源：python 3.6以上版本；django 最新版；node.js最新版；eli-ui最新 内容：前后端分离实战项目
Django+Vue.js搭建前后端分离项目的示例
12-11
在写这篇文章的时候，顺带学习了一下关于Markdown的使用方法。 笔者是个渣渣，一切都是自己在摸索的学着，所以也谈不上什么体系、系统学习。在这里主要是为了实现把项目前后端分离开。 这里假设你的电脑上所需的django、vue.js已经有了，如果没有，往下拉就是vue.js的安装流程。django前面写过了，就不赘述了。 一，正常搭建前后端分离项目流程 1.创建django项目 命令： django-admin startproject ulb_manager 结构： ├── manage.py └── ulb_manager ├── __init__.py ├── setti
vuejs+django2.0前后端分离项目
01-16
vuejs+django2.0前后端分离项目,适用于全栈开发。需要有一定的前端基础，前端框架用的是vuejs，后端用的是django写的api。可以在这个项目的基础上进行二次开发
【前后端】django与vue的结合使用
weixin_43366051的博客
04-23 4149
本文主要介绍了django和vue的结合使用，前后端分离是一种软件架构模式，旨在将应用程序的前端和后端部分分开开发、部署和维护。在传统的单体应用中，前端和后端通常紧密耦合在一起，而前后端分离则将它们解耦，使得前端和后端可以独立地进行开发、测试和部署。在前后端分离的架构中，前端负责用户界面和用户体验，而后端则负责业务逻辑、数据处理和持久化。
Django+Vue.js框架快速搭建web项目
weixin_33895657的博客
11-09 434
一、vue环境搭建1、下载安装node.js。2、安装淘宝镜像cnpm，在命令窗口输入： npm install -g cnpm --registry=https://registry.npm.taobao.org 3、安装Vue，在命令窗口输入： cnpm install vue 4、安装vue-cli脚手架构建工具，在命令窗口输入： cnpm install -g...
django+vue项目搭建，前后端通信打通，
我是一言
02-17 4135
使用python+django+vue+element-ui打造自动化平台，首先打通开发环境django后端服务和vue的跨域联调问题和生产通信问题
【django+vue】项目搭建、解决跨域访问
urge的博客
11-18 5207
django 和 Vue.js 是一对非常强大的技术组合，可以用于构建现代化的 Web 应用程序。Django： Django 是一个使用 Python 编写的高级 Web 框架，它遵循了 MTV（模型-模板-视图）的设计模式。Django 提供了许多内置功能和工具，使开发者能够快速构建安全可靠的 Web 应用程序。ORM：Django 的 ORM（对象关系映射）层可以方便地与数据库交互，支持多种数据库后端。路由系统：Django 的路由系统可以帮助你管理 URL 映射和请求分发。
整合Django+Vue.js框架快速搭建web项目（记录一下）
程序员野蛮成长
03-18 960
整合 Django + Vue.js 框架快速搭建web项目 一、 背景 在工作中我们经常须要构件一些基于web的项目，例如内部测试平台、运维系统等。本篇主要介绍如何使用后端Django + 前端Vue.js的技术栈快速地搭建起一套web项目的框架。 为什么使用Django和Vue.js? Django是Python体系下最成熟的web框架之一，由于Python语言的易用性和受众面广...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值