Django3与Vue3前后端分离搭建

在虚拟环境中安装django与vue在第一个终端里面安装djangopip insstall django创建django项目django-admin startproject djangovue进入djangovue项目里面cd djangovue进行应用迁移python manage.py migrate运行一下服务器python manage.py runserver在第二个终端里面创建一个

LuiChun

3695人浏览 · 2020-12-07 15:42:13

LuiChun · 2020-12-07 15:42:13 发布

Django3Vue3前后端分离项目
https://blog.csdn.net/weixin_47021806/article/details/118410146

请转到最新文档，有实测案例与例图

在虚拟环境中安装django与vue
在第一个终端里面
安装django
pip insstall django
在这里插入图片描述

创建django项目
django-admin startproject djangovue
进入djangovue项目里面
cd djangovue
进行应用迁移
python manage.py migrate
在这里插入图片描述

运行一下服务器
python manage.py runserver
在这里插入图片描述
在第二个终端里面
创建一个文件夹，（manage.py同目录下）
mkdir templates

并且在templates文件夹下创建一个index.html文件,并且进行初始化该文件(自动填充html格式)
mkdir index.html
在这里插入图片描述

到目前为止，django还未配置模板文件路径，进入到settings.py中配置
在这里插入图片描述

# 加载 模板
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
       #01 开始 指定django模板文件夹的路径
    #    使用joinpath()函数方法添加,文件夹名字就作为参数,这个函数将会返回class实例，
    #   因为返回的是class实例，所以转换为字符串
        'DIRS': [
            str(BASE_DIR.joinpath('templates')),
        ],
       # 01结束
        'APP_DIRS': True,
        'OPTIONS': {

在这里插入图片描述

然后再配置urls.py

from django.contrib import admin
from django.urls import path
urlpatterns = [
    path('admin/', admin.site.urls),

]

在这里插入图片描述

创建一个新的网址格式
需要导入TemplateView
并且所有根地址请求都将由templateview类处理
调用as_view()方法,这里面必须获取需要呈现的(HTML模板名称)
template_name的参数为获取的新值(模板页面)---index.html

并且命名为index  这个名字没关系的(可以随便命名)

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html'),name='index'),

]

在这里插入图片描述
在第三个终端里面
那么接下来解释创建vue app (需要提前安装node.js)
在新的终端里面创建(这里也是在虚拟环境里面)
进入到djangovue文件夹里面（创建是在manage.py同目录级别下）
-g 表示全局安装
@vue/cli 手脚架模式安装
npm install -g @vue/cli
在这里插入图片描述因为我在国内，很多插件无法正确安装，所以，我要重新选择再执行一次

cnpm install -g @vue/cli

（淘宝镜像）

安装完毕之后创建一个新项目(frontend)

vue create frontend

在这里插入图片描述

选择
Default(Vue 3 Preview)([Vue 3] babel, eslint)
在这里插入图片描述

等待之后
进入frontend文件夹里面

cd frontend

然后启动服务器

npm run serve

启动后进入启动的本地链接端口察看是否启动成功

在这里插入图片描述

接下来解释把这两个项目捆绑在一起

第一步去到npm官网里面找到
webpack-bundle-tracker
的
npm i webpack-bundle-tracker@0.4.3

第二步就是去到github里面的(2.2K星星以上)
安装
owais/django-webpack-loader

图解为:
在第四个终端里面
在新的终端里面创建(这里也是在虚拟环境里面)
进入到frontend文件夹里面
npm install --save-dev webpack-bundle-tracker@0.4.3
在这里插入图片描述

然后进行webpack设置

在frontend文件夹里面创建一个新的文件vue.config.js
在这里插入图片描述

讲解
publicPath是vue.js项目的默认路径
outputDir是捆绑文件的默认目录
config.optimization.splitChunks(false)是只创建一个文件所以是false
filename: './webpack-stats.json'是文件名子与webpack-stats.json文件路径
webpack-stats.json文件将会在当前目录中创建，也就是vue的前端项目中
https://gist.github.com/zaemiel/1bcde7098afceacb1e1f49fb4616bea9

vue.config.js
代码为

const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    publicPath: "http://0.0.0.0:8080",
    outputDir: "./dist/",

    chainWebpack: config => {
        config.optimization.splitChunks(false)

        config.plugin('BundleTracker').use(BundleTracker, [
            {
                filename: './webpack-stats.json'
            }
        ])

        config.resolve.alias.set('__STATIC__', 'static')

        config.devServer
            .public('http://0.0.0.0:8080')
            .host('0.0.0.0')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({'Access-Control-Allow-Origin': ['\*']})
    }
};

到了这一步，vue的就配置好了
接下来的是django部分
在刚才安装webpack-bundle-tracker@0.4.3 终端里面创建(这里也是在虚拟环境里面)
在这里插入图片描述

继续操作
去到manage.py同级别目录下
安装django-webpack-loader
pip install django-webpack-loader
在这里插入图片描述

然后再到settings里面配置

INSTALLED_APPS=[
'webpack_loader',
]

在这里插入图片描述

然后在最后添加上

里面的这个WEBPACK_LOADER设置
https://github.com/owais/django-webpack-loader
上面这个网址有完整的展示(按照我这个教程之后的延伸，可以到这个网址上查看)

在这里插入图片描述

代码讲解

这里面stats文件，需要指定webpack-stats.json所在的路径————在本地frontend文件夹里面（这里在上面vue.config.js文件里面有设置过的）
   'STATS_FILE': str(BASE_DIR.joinpath('frontend', 'webpack-stats.json')),
这里面的第一个参数为'frontend'。第二个为'webpack-stats.json'。然后需要将其转换为字符串str()

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': str(BASE_DIR.joinpath('frontend', 'webpack-stats.json')),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],

    }
}

原本会有另外一行是这样的:
‘LOADER_CLASS’: ‘webpack_loader.loader.WebpackLoader’,
这行我删除了

然后再在templates文件夹的index.html里面
加载renser_bundle过滤器

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
//在这里添加render_bundle app 与css样式
{% render_bundle 'app' 'css' %}
    <title>Document</title>
</head>
<body>


//Vue对象应用默认安装点是具有id的div块
<div id ="app"></div>


//在底部，body标记之前
//在这里添加js文件
{% render_bundle 'app' 'js' %}  
</body>
</html>

在这里插入图片描述

配置到这里
就结束了

重新启动django服务器 manage.py runserver
在这里插入图片描述

重新启动vue服务器 npm run serve

在这里插入图片描述

然后它就会自动创建webpack-stats.json文件
就好了
去到浏览器刷新一下
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^