侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

Python Django Vue 项目创建过程详解

Python  /  管理员 发布于 3年前   228

1、创建项目

打开pycharm 终端,输入如下,创建项目

# 进入pycharm 项目目录下cd pyWebdjango-admin startproject pyweb_dome# pyweb_dome 是django项目名称

2、创建应用

# 进入项目根目录 pyweb_dome 下 cd pyweb_dome python manage.py startapp webserver # webserver 为应用名

3、创建前端项目

使用vue-cli在根目录创建一个名称叫【frontend】的Vue.js项目作为项目前端

# 使用vue-cli在根目录创建一个名称叫【webfront】的Vue.js项目作为项目前端vue-init webpack webfront

4、打包vue项目

# 使用 webpack 打包vue项目cd webfrontnpm install npm run build

此时直接运行npm run dev也可以直接查看前端 vue界面

npm run build

构建完成会生成一个文件夹,名字叫dist,里面有一个 index.html 和一个 文件夹static。

5、使用Django的通用视图 TemplateView修改静态指向路径(就是让Django访问目录指向我们刚才打包的dist/index.html)

找到项目根 pyweb_demo/urls.py文件作出如下修改,注意1、2两处修改。

"""pyweb_dome URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:  https://docs.djangoproject.com/en/2.1/topics/http/urls/Examples:Function views  1. Add an import: from my_app import views  2. Add a URL to urlpatterns: path('', views.home, name='home')Class-based views  1. Add an import: from other_app.views import Home  2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')Including another URLconf  1. Import the include() function: from django.urls import include, path  2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))"""from django.contrib import adminfrom django.urls import pathfrom django.views.generic.base import TemplateView # 1、增加该行urlpatterns = [  path('admin/', admin.site.urls),  path(r'',TemplateView.as_view(template_name='index.html')), #2、 增加该行]

6. 配置Django项目的模板搜索路径和静态文件搜索路径 找到根目录下 pyweb_demo/settings.py文件并打开,找到TEMPLATES配置项,修改如下:

TEMPLATES = [  {    'BACKEND': 'django.template.backends.django.DjangoTemplates',    #'DIRS': [],    'DIRS': ['webfront/dist'], # 修改1     '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',      ],    },  },]# 新增2# Add for vue.jsSTATICFILES_DIRS = [  os.path.join(BASE_DIR, "webfront/dist/static"),]

7,到此基本就配置完成了,回退到根目录 运行命令就可以直接查看效果

python manage.py runserver

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


  • 上一条:
    HTML name、id、class 的(格式/应用场景/特性)等区别介绍
    下一条:
    django与vue的完美结合_实现前后端的分离开发之后在整合的方法
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • python爬虫BeautifulSoup快速抓取网站图片(0个评论)
    • vscode 配置 python3开发环境的方法(0个评论)
    • VSCode Python开发环境配置的详细步骤(0个评论)
    • 使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤(0个评论)
    • 解决vscode python print 输出窗口中文乱码的问题(0个评论)
    • 近期文章
    • 在go语言中以邮件标题中获取SPF和DMARC,来判断是否为垃圾邮件之垃圾邮件过滤器功能实现(0个评论)
    • 在go语言中使用attr字段标签提取XML属性数据示例(0个评论)
    • 在laravel中介绍一个生成假数据的PHP库:FakerPHP(0个评论)
    • 在laravel框架中对环境配置文件的加载过程步骤浅析(0个评论)
    • Laravel 10.12版本发布(0个评论)
    • 在go语言中如何记录每个HTTP请求到你的Web服务器、日志记录器?(0个评论)
    • 在Go语言中如何查找一个IP地址的网络地址?(0个评论)
    • ELK + Filebeat 搭建日志系统流程步骤(0个评论)
    • 在laravel中以curl的方式请求京东联盟api获取数据流程步骤(0个评论)
    • 在go语言中使用gin框架-中间件gin.BasicAuth()实现账号密码方式认证示例(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-10
    • 2016-11
    • 2018-04
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2022-01
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客