Tagged: npm

Python Django Vue 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

yum pip npm

Centos yum 加速

# 备份
mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup

# Centos 6
wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-6.repo

# Centos 7
wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo

# 生成缓存
yum makecache

pip加速

  • windows建立 %HOMEPATH%\pip\pip.ini 文件,写入如下内容;
  • Linux 建立 ~/.pip/pip.conf 文件,写入如下内容;
[global]
index-url = http://mirrors.aliyun.com/pypi/simple/
trusted-host=mirrors.aliyun.com

[list]
format=columns 

pip常用命令

yum -y install python-pip python-wheel
pip list --format=columns

# 升级
pip install -U pip setuptools
# 如果安装的是for all user的话需要使用如下参数升级,否则可能报错
pip install -U pip setuptools --user
# 若升级后pip报错,可以使用如下命令试试
easy_install pip

pip search [module]
pip install [module]

# 创建虚拟环境
python3 -m venv /path/to/new/virtual/environment
python3 -m venv c:\path\to\myenv

npm加速

# 临时使用
npm --registry https://registry.npm.taobao.org install express

# 持久使用
npm config set registry https://registry.npm.taobao.org

# 配置后可通过下面方式来验证是否成功
npm config get registry
# 或
npm info express

Archives