今天我们来学习关于“Django项目怎样实现前后端分离，方法是什么”的内容，下文有详解方法和实例，内容详细，逻辑清晰，有需要的朋友可以参考，希望大家阅读完这篇文章后能有所收获，那么下面就一起来了解一下吧。

一：创建django项目

django-admin startproject mysite   # 创建mysite项目

django-admin startapp app01# 创建app01应用

二：安装vue

1.首先安装node.js，官网地址：https://nodejs.org/zh-cn/download/

2.使用npm淘宝镜像，避免npm下载速度过慢的问题

npm install -g cnpm --registry=https://registry.npm.taobao.org 

3、使用cnpm 下载vue-cli

cnmp install -g cue-cli

如果之前安装的有node，nmp和cnpm就可以不用安装，

三：设置vue项目

1.将vue项目，放在django文件夹下，跟app01文件夹同级

2.运行vue项目

cd firstvue         ## 进入到上一部创建的firstvue项目中  
cnpm install        ## 安装需要的依赖模块  
cnpm run dev        ## 运行调式的服务，会启动一个web服务，访问localhost:8080 即可调式  

如果可以运行成功，证明当前vue项目是没有问题

四：vue项目写完后，打包vue项目，然后修改django配置，将vue集成到django中

cnpmrunbuild##打包vue项目，会将所有东西打包成一个dist文件夹

在python下的项目文件夹下的-settings.py中配置

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['vue-admin-master/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',
            ],
        },
    },
]

把vue的静态文件夹的目录配置到项目中【添加静态文件夹路径】

STATIC_URL = '/static/'

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'vue-admin-master/dist/static/'), # 添加内容
]

五：修改django的主目录的urls文件

from django.contrib import admin
from django.urls import path
from blog import views
from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'', TemplateView.as_view(template_name='index.html')),
]

添加对应的路由

六：启动django服务，访问localhost:8000 则可以出现vue的首页

启动django

python manage.py runserver
http://127.0.0.1:8000/#/login

访问出现vue项目的界面，就已经成功了！

七：有时候并不能直接访问出首页，原因是路径不对

有的会设置的有前缀，需要把前缀去掉，重新打包才能使用

打包的时候不需要把之前的打包内容删除，直接重新打包，会有对应的打包记录

八：vue打包之后经常会出现fontawesome图标库不能使用的情况

打包之后，需要手动吧fontawesome引入的css文件路径更改

把原来的

url(/static/fonts/fontawesome-webfont.b06871f.ttf),
换成
url(../fonts/fontawesome-webfont.b06871f.ttf),

fontawesome小图标就可以显示出来了

这篇关于“Django项目怎样实现前后端分离，方法是什么”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Python中__str__()方法用于做什么，怎样使用

  __str__()方法，这个方法是一个魔法方法 (Magic Method) ，用来显示信息，该方法需要 return 一个数据，并且只有self一个参数，当在类的外部 print(对象) 则打印这个数据，当类的实例化对象如果没有__str__ 则默认打印 对象在内存的地址。如果拥有 __str__ 方法后，那么打印对象则打印 __str__ 的返回值。

• Python实现定时任务方式有哪些，脚本是什么

  我们在日常工作中,常常会用到需要周期性执行的任务,下面这篇文章主要给大家介绍了关于Python脚本实现定时任务的最佳方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

• tfrecords格式是什么，写入与读取是怎样的

  这篇文章主要为大家介绍了python神经网络tfrecords文件的写入读取及内容解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• Python中strptime()方法主要用于什么，基本用法是什么

  strptime()方法分析表示根据格式的时间字符串。返回值是一个struct_time所返回gmtime()或localtime()。格式参数使用相同的指令使用strftime

• Python装饰器的定义怎么理解，具体如何应用

  装饰器经常被用于有切面需求的场景，较为经典的有插入日志、性能测试、事务处理等。装饰器是解决这类问题的绝佳设计，有了装饰器，我们就可以抽离出大量函数中与函数功能本身无关的雷同代码并继续重用。装饰器的作用就是为已经存在的对象添加额外的功能。