python+django+vue搭建前后端分离项目Part1
文章目录
- Python环境搭建
- 安装django框架
- 创建django项目
- 新建static静态文件夹
- 创建django App(后端)
- 创建vue项目(前端)
- 集成vue项目到django
- 打包vue项目
- django项目参数配置修改
- 运用python执行django项目
- 参考文章
Python环境搭建
(base) XXX:~ XXX$ conda create -n my_django python=3.9
安装django框架
(base) XXX:~ XXX$ conda activate my_django
创建django项目
(my_django) XXX:~ XXX$ django-admin startproject first_django
此时项目结构如下:
新建static静态文件夹
此时的项目结构如下:
创建django App(后端)
进入到django项目的根目录下,然后创建django App
(my_django) XXX:~ XXX$ cd first_django
(my_django) XXX:first_django$ python manage.py startapp backend
此时的项目结构如下:
创建vue项目(前端)
(my_django) XXX:first_django$ npm install -g @vue/cli-init #若不添加,则无法使用vue init命令
(my_django) XXX:first_django$ vue init webpack frontend
以上是我对初始化vue项目的配置,供参考
? Project name frontend
? Project description the frontend for my first web
? Author name <XXXX@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
此时的项目结构如下:
集成vue项目到django
打包vue项目
首先将vue项目进行打包
cd frontend
npm install
npm run build
此时会产生一个带有static文件夹和index.html的一个文件夹dist。这个文件夹是用于集成到django框架中的。(每次更新vue项目,都需要重新执行上述代码进行打包)
django项目参数配置修改
django项目下的setting.py
TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates',# 'DIRS': [], #注释掉'DIRS':['frontend/dist'], # 用它替换'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]
## 添加如下前端静态文件夹路径
# Add for vue.js
STATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend/dist/static"),
]
## 添加如下后端静态文件夹路径
STATIC_URL = 'static/'
# STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] # 不需要
django下的urls.py
from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView # 引入TemplateView
urlpatterns = [path('admin/', admin.site.urls),path(r'', TemplateView.as_view(template_name="index.html")), # 定义frontend/dist/index.html的路径
]
运用python执行django项目
需要在djange项目的主路径下执行,否则找不到manage.py
(my_django) XXX:first_django$ python manage.py runserver
可通过本地网页http://127.0.0.1:8000/进行访问。
参考文章
https://www.cnblogs.com/smallclown/p/11656001.html
https://www.cnblogs.com/zhixi/p/9996832.html
https://www.runoob.com/django/django-first-app.html
python+django+vue搭建前后端分离项目Part1相关推荐
- python+django+vue搭建前后端分离项目Part3——后端django
文章目录 创建django项目 数据库创建和连接 创建 Django APP 后端搭建 模型层model.py 视图层view.py 路由配置 数据迁移 参考文章 创建django项目 (my_dja ...
- python+Django+vue 搭建前后端分离项目
步骤一 : 创建项目所在文件夹. 步骤二: 进入CMD模式输入 : django-admin startproject backend 步骤三 : 进入backend 步骤四:查看Django后端服务 ...
- python+django+vue搭建前后端分离项目Part2——前端Vue
文章目录 创建vue项目 主要文件及其作用 src/components/ src/router/index.js src/main.js static/ 创建vue项目 (my_django) XX ...
- python django vue +VSCode 前后端分离
(文章里的链接不是我写的,都是引用别人的,我只是记录查看) 编辑器:vscode 语言:python 后端:django 前端:vue 前后端分离 一.项目框架搭建 https://blog.csdn ...
- Django vue 搭建前后端分离的web 二
bootstrap的安装和使用: 安装: 在vue项目下使用npm直接安装即可: 由于bootstrap依赖jQuery,所以第一步安装jQuery: npm install jquery 检查在pa ...
- 从零到一 django + vue 构建前后端分离项目
(本文在win10环境下进行) django 和 vue 的优点 django的python血统,开发起来基本上是站在巨人的肩膀上,用起来顺手,加上drf这个restful API 框架,SaltSt ...
- Django vue 搭建前后端分离的web 三
Django连接数据库(MySQL) : 第一步:使用命令[pip install mysqlclient ],可以下载并安装最新版本的mysqlclient 第二步:创建数据库:create dat ...
- php node.js django,Vue.js和Django搭建前后端分离项目示例详解
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下 在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是 ...
- B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
最新文章
- 【Linux】Linux中正则表达式
- Redis中缓存Lua 脚本
- HDU - 1005 Number Sequence(循环群)
- 20个非常好用的正则表达式
- LeetCode之Reverse String
- 二叉树前序中序后续线索树_二叉树的先序,中序,后序遍历以及线索二叉树的遍历...
- npm ERR! Please try running this command again as root/Administrator.
- javascript中的undefined 和 not defined
- android 通过短信找回密码,如何通过强力安卓恢复精灵找回丢失的手机短信?
- C++笔记-并发编程 异步任务(async)
- 浙江大学_包家立教授_计算生物学3_贝叶斯算法
- java 新手入门电子书_Java基础入门电子书.pdf
- Rust手机端皮肤搜索、生成Rust专属名片、转盘概率模拟
- nanomsg 高性能通信库_NanoMsg框架|C#中Nanomsg的PAIR和BUS使用
- 有书共读:《穷查理宝典》
- Achain迎来众多合作伙伴 共建社区生态发展
- linux 3d 制作工具,3D特效制作 SideFX Houdini FX For Win/Linux/macOS 及安装教程
- vulnhub:Who Wants To Be King: 1
- 基于51单片机数码管显示
- 多边形裁剪(Polygon Clipping) 2