Django+Vue.js创建前后端分离项目

简介: Django+Vue.js创建前后端分离项目

1、使用django创建项目:


django-admin startproject ocr_manager

2、进入项目根目录,创建django的App:


python manage.py startapp backend

3、在项目根目录创建Vue项目:


vue-init webpack frontend

项目目录如下所示:

├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── frontend
│   ├── README.md
│   ├── build
│   │   └── ....
│   ├── config
│   │   ├── dev.env.js
│   │   ├── index.js
│   │   ├── prod.env.js
│   │   └── test.env.js
│   ├── index.html
│   ├── package.json
│   ├── src
│   │   ├── App.vue
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── components
│   │   │   └── Hello.vue
│   │   └── main.js
│   ├── static
│   └── test
│       └── ...
├── manage.py
└── ocr_manager
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py
├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── template
│   ├── index.html
│   ├......
├── manage.py
└── ocr_manager
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py



4、打包Vue项目:


cd frontend          #  进入到创建的
cnpm install         #  安装需要的因依赖库
cnpm run dev      #  运行调试的服务,启动web服务。
cnpm run build    #  打包vue项目,会将所有东西打包成一个dist文件夹

修改django的settings:


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        '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',
            ],
        },
    },
]
STATICFILES_DIRS = [             ## 添加静态文件路径
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

运行服务:python manage.py runserver


q1.png


相关文章
|
1天前
|
JavaScript 前端开发 Java
node.js环境安装以及Vue-CLI脚手架搭建项目教程
node.js环境安装以及Vue-CLI脚手架搭建项目教程
|
3天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
|
5天前
|
JavaScript 前端开发 网络协议
如何快速搭建一个 Node.JS 项目并进入开发?
如何快速搭建一个 Node.JS 项目并进入开发?
|
5天前
|
JavaScript Shell
创建第一个vue项目
创建第一个vue项目
7 0
|
6天前
|
JSON 前端开发 API
Django API开发实战:前后端分离、Restful风格与DRF序列化器详解
Django API开发实战:前后端分离、Restful风格与DRF序列化器详解
|
6天前
|
前端开发 数据库 Python
Django入门全攻略:从零搭建你的第一个Web项目
Django入门全攻略:从零搭建你的第一个Web项目
|
6天前
Vue3项目 小兔鲜问题总结
Vue3项目 小兔鲜问题总结
17 2
|
7天前
|
分布式计算 资源调度 JavaScript
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
13 0
|
7天前
|
JavaScript 前端开发 API
Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
Vue3入门 - vue3相比于vue2的优点,及如何创建Vue3项目
|
7天前
|
JavaScript 前端开发
脚手架vue-cli自定义创建Vue项目,完整详细步骤!
脚手架vue-cli自定义创建Vue项目,完整详细步骤!