Jalena Blog

  • 首页
  • 程序开发
    • Java
    • Spring
    • SpringBoot
    • SpringMvc
    • Python
    • Odoo
    • C#
    • SQL
    • Web
    • Linux
  • 移动设备
    • Android
    • BlackBerry
    • Router
  • 杂七杂八
    • 我的废话
    • 音频
    • 视频
    • 常用软件
  • 关于
A bad workman always blames his tools.
  1. 首页
  2. Development
  3. Python
  4. 正文

Python Django Vue PostgreSQL搭建前后端分离项目

2019-02-15 724点热度 0人点赞 0条评论

准备工作

  • Pycharm
  • webpack
  • python 3
  • npm
  • Vue CLI https://cli.vuejs.org/zh/guide/
  • postgresql
npm install -g webpack
npm install -g @vue/cli
npm install -g @vue/cli-service-global

创建Django项目

django-admin startproject ServerList

创建成功后的目录如下

.
├── manage.py
└── pc_admin
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

进入项目根目录,创建一个APP作为项目后端

cd ServerList
python manage.py startapp backend //backend乃App名称

成功后目录如下

.
├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
└── ServerList
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

创建前端项目

使用vue-cli在根目录创建一个frontend的Vue.js项目作为项目前端。

# 创建项目
vue create frontend

# Project setup
npm install

# Compiles and hot-reloads for development
npm run serve

# Compiles and minifies for production
npm run build

# Run your tests
npm run test

# Lints and fixes files
npm run lint

如果你确实不想使用命令行来处理这些事情,那么你可以使用Vue提供的图形化界面来创建和管理项目。

vue ui
Vue UI

配置数据源及前端模板

# 数据库设定
DATABASES = {
    'default': {
        # 'ENGINE': 'django.db.backends.sqlite3',
        # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'odam',
        'USER': 'postgres',
        'PASSWORD': 'postgres',
        'HOST': '127.0.0.1',
        'PORT': '5432'
    }
}
# 模版设定
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [os.path.join(BASE_DIR, 'templates')],
        '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"),
]

结束

python manage.py runserver
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: Django npm Python vue webpack
最后更新:2019-02-20

Jalena

原创内容,转载请注明出处! 部分内容来自网络,请遵守法律适用!

点赞
< 上一篇
下一篇 >

文章评论

取消回复

Jalena

原创内容,转载请注明出处! 部分内容来自网络,请遵守法律适用!

腾讯云
最新 热点 随机
最新 热点 随机
Docker overlay2 清理 & 数据转移 PowerShell 升级 & 增强 Python pip 升级 ESXI & Alpine & Clash Premium 旁路网关 ESXi install Alpine & Clash Proxy 打造自己的Aria2c专属设置 ESXI 升级 Centos 7 离线安装Nginx Centos nmcli 网络管理命令 Linux 密钥登录
Python pip 升级PowerShell 升级 & 增强Docker overlay2 清理 & 数据转移
FFmpeg 打造你的专属转换软件 MyBatis 使用详解 C# SqlBulkCopy 批量写入数据 TitleMotion Pro For Edius 6 MySQL基本语句 MySql 开启外部访问 Autodesk 3ds max 2011(Design) 32-64bit 官方简体中文版 GOOGLE NEXUS S i9023 升级安卓4.0.3手记 Python Django Vue PostgreSQL搭建前后端分离项目 JSP环境搭建 centos Tomcat 9
标签聚合
生活 Centos wordpress 其他 odoo java 解码 Edius
Links
  • Emin.ink
  • 时空镜像
  • 猿人学网站
  • ninja911
  • Feng Blog
  • ZWWoOoOo

COPYRIGHT © 2021 Jalena Blog. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS