实际Django项目+VUE项目开发

目录

• 实际Django项目+VUE项目开发
• 项目搭建
  • 1. pip换源
  • 2. 项目虚拟环境搭建
    • （1）优点：
    • （2）windows系统下搭建虚拟环境：
    • （3） MacOS、Linux系统下搭建虚拟环境：
    • （3）虚拟环境的使用
    • （4）使用pycharm开发项目
  • 3. 项目后台创建
    • （1）项目环境搭建
    • （2）项目后端文件的创建
  • 4. 后台项目配置
    • （1）基本配置
    • （2）项目内的环境变量配置
    • （3）日志配置
    • （4）二次封装异常处理模块
    • （5）二次封装Response模块
    • （6）路由组件配置
    • （7）media文件配置
    • （8）项目路由配置
  • 5. 项目的后端数据库配置
    • （1）创建数据库
    • （2）为数据库指定账户
    • （3）项目中配置文件配置
  • 6. user文件夹的创建（app）
    • （1）创建user 文件夹
  • （2）创建user表对应的model
    • （3）数据库迁移
    • （4）xadmin后台管理
  • 7. 项目前端文件创建
  • 8. 前端项目配置
    • （1）模块安装及配置
  • 9. 前后端分离跨域问题的解决

实际Django项目+VUE项目开发

项目搭建

• 步骤：

1. pip换源
2. 项目虚拟环境搭建
3. 项目后台的创建
4. 后台的项目配置（环境变量配置和日志文件配置）
5. 项目的后端数据库配置
6. user文件夹的创建（利用xadmin模块）
7. 项目前端文件创建（VUE框架的前端项目）
8. 项目的前端配置（main.js文件中全局配置）
9. 前后端分离跨域问题的解决
10. 前后端业务逻辑书写

1. pip换源

• 配置永久安装源

（1）windows系统下：
'''
在C:\Users\电脑用户\AppData\Roaming 文件夹中创建pip文件夹并新建pip.ini配置文件，在pip.ini文件中配置下面的内容
'''

（2）MacOS、Linux系统下：
"""
1、在用户根目录下 ~ 下创建 .pip 隐藏文件夹，如果已经有了可以跳过
	-- mkdir ~/.pip
2、进入 .pip 隐藏文件夹并创建 pip.conf 配置文件
	-- cd ~/.pip && touch pip.conf
3、启动 Finder(访达) 按 cmd+shift+g 来的进入，输入 ~/.pip 回车进入
4、新增 pip.conf 配置文件内容
"""

pip.ini配置内容：(直接复制粘贴到pip.ini文件中)

"""
[global]
index-url = http://pypi.douban.com/simple
[install]
use-mirrors =true
mirrors =http://pypi.douban.com/simple/
trusted-host =pypi.douban.com
"""

2. 项目虚拟环境搭建

（1）优点：

1、使不同应用开发环境相互独立
2、环境升级不影响其他应用，也不会影响全局的python环境
3、防止出现包管理混乱及包版本冲突

（2）windows系统下搭建虚拟环境：

1. 安装

# 先使用下面的命令安装到python3环境下

pip3 install virtualenv
pip3 install virtualenvwrapper-win

2. 配置虚拟环境工作目录

（1）在系统环境变量中添加新的环境变量WORKON_HOME
	eg：WORKON_HOME: D:\Virtualenvs
            
（2）在python3安装文件中，找到Scripts文件夹=>virtualenvwrapper.bat => 双击

（3） MacOS、Linux系统下搭建虚拟环境：

1. 安装

# 建议使用pip3安装到python3环境下
pip3 install -i https://pypi.douban.com/simple virtualenv
pip3 install -i https://pypi.douban.com/simple virtualenvwrapper
    
2. 配置虚拟环境工作目录 

# 先找到virtualenvwrapper的工作文件 virtualenvwrapper.sh，该文件可以刷新自定义配置，但需要找到它
# MacOS可能存在的位置 /Library/Frameworks/Python.framework/Versions/版本号文件夹/bin
# Linux可能所在的位置 /usr/local/bin  |  ~/.local/bin  |  /usr/bin
# 建议不管virtualenvwrapper.sh在哪个目录，保证在 /usr/local/bin 目录下有一份
# 如果不在 /usr/local/bin 目录，如在 ~/.local/bin 目录，则复制一份到 /usr/local/bin 目录
	-- sudo cp -rf ~/.local/bin/virtualenvwrapper.sh /usr/local/bin
    
3. 配置

# 在 ~/.bash_profile 完成配置，virtualenvwrapper的默认默认存放虚拟环境路径是 ~/.virtualenvs
# WORKON_HOME=自定义存放虚拟环境的绝对路径，需要自定义就解注
VIRTUALENVWRAPPER_PYTHON=/usr/local/bin/python3
source /usr/local/bin/virtualenvwrapper.sh

# 在终端让配置生效：
	-- source ~/.bash_profile

（3）虚拟环境的使用

# ***以下命令都是在终端中输入***

1. 创建虚拟环境工作文件夹到上面配置环境变量的WORKON_HOME路径下

2. 创建虚拟环境
	# 选取默认Python环境创建虚拟环境：
		mkvirtualenv 虚拟环境名称
	# 基于某Python环境创建虚拟环境：
        mkvirtualenv -p python2.7 虚拟环境名称
        mkvirtualenv -p python3.6 虚拟环境名称
        
3. 查看已有的虚拟环境
	workon  
    
4. 使用某个虚拟环境
	workon 虚拟环境名称   
    
5. 进入|退出 该虚拟环境的Python环境 
	python | exit()
    
6. 为虚拟环境安装项目开发所需要的模块   
	pip或pip3 install 模块名
    
7. 退出当前虚拟环境  
	deactivate

8. 删除虚拟环境(删除当前虚拟环境要先退出) 
	rmvirtualenv 虚拟环境名称

（4）使用pycharm开发项目

• 新建Django项目，使用已存在的环境，选择我们创建的虚拟环境中的python解释器即可。

3. 项目后台创建

（1）项目环境搭建

"""
为项目创建一个虚拟环境
	mkvirtualenv 虚拟环境名


安装基础环境依赖
	pip install django==2.0.7
	pip install djangorestframework
	pip install pymysql
        pip install djangorestframework-jwt  # 第三方插件，辅助完成jwt token的签发和校验

"""

（2）项目后端文件的创建

"""
├── luffyapi                    # 项目根目录文件夹
    ├── logs/			# 项目运行时/开发时日志目录 - 包
    ├── manage.py		# 脚本文件
    ├── luffyapi/      		# 项目主应用，开发时的代码保存 - 包
        ├── wsgi.py             # 脚本文件
     	├── apps/      		# 开发者的代码保存目录，以模块[子应用]为目录保存 - 包
        ├── libs/      		# 第三方类库的保存目录[第三方组件、模块] - 包
    	├── settings/  		# 配置目录 - 包
		├── dev.py   	# 项目开发时的本地配置
		└── prod.py  	# 项目上线时的运行配置
	├── urls.py    		# 总路由
	└── utils/     		# 多个模块[子应用]的公共函数类库[自己开发的组件]
    └── scripts/       		# 保存项目运营时的脚本文件 - 文件夹
"""

4. 后台项目配置

（1）基本配置

• 创建dev.py文件

"""
1.修改 wsgi.py 与 manage.py 两个文件：
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffyapi.settings.dev')

2.将settings.py删除或改名，内容拷贝到settings/dev.py中

3.国际化配置（修改dev.py文件内容）
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False

4.修改启动配置：见插图

5.在任何一个__init__.py文件中测试默认配置文件是否是dev.py文件
from django.conf import settings
print(settings)
"""

• 插图

（2）项目内的环境变量配置

# 环境变量操作：小luffyapiBASE_DIR与apps文件夹都要添加到环境变量
import sys
sys.path.insert(0, BASE_DIR)
APPS_DIR = os.path.join(BASE_DIR, 'apps')
sys.path.insert(1, APPS_DIR)

（3）日志配置

• dev.py文件中

# 真实项目上线后，日志文件打印级别不能过低，因为一次日志记录就是一次文件io操作
LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'formatters': {
        'verbose': {
            'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
        },
        'simple': {
            'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
        },
    },
    'filters': {
        'require_debug_true': {
            '()': 'django.utils.log.RequireDebugTrue',
        },
    },
    'handlers': {
        'console': {
            # 实际开发建议使用WARNING
            'level': 'DEBUG',
            'filters': ['require_debug_true'],
            'class': 'logging.StreamHandler',
            'formatter': 'simple'
        },
        'file': {
            # 实际开发建议使用ERROR
            'level': 'INFO',
            'class': 'logging.handlers.RotatingFileHandler',
            # 日志位置,日志文件名,日志保存目录必须手动创建，注：这里的文件路径要注意BASE_DIR代表的是小luffyapi
            'filename': os.path.join(os.path.dirname(BASE_DIR), "logs", "luffy.log"),
            # 日志文件的最大值,这里我们设置300M
            'maxBytes': 300 * 1024 * 1024,
            # 日志文件的数量,设置最大日志数量为10
            'backupCount': 10,
            # 日志格式:详细格式
            'formatter': 'verbose',
            # 文件内容编码
            'encoding': 'utf-8'
        },
    },
    # 日志对象
    'loggers': {
        'django': {
            'handlers': ['console', 'file'],
            'propagate': True, # 是否让日志信息继续冒泡给其他的日志处理系统
        },
    }
}

• utils/logging.py文件中

import logging
logger = logging.getLogger('django')

（4）二次封装异常处理模块

• utils/exception.py文件中

from rest_framework.views import exception_handler as drf_exception_handler
from rest_framework.views import Response
from rest_framework import status
from utils.logging import logger
def exception_handler(exc, context):
    response = drf_exception_handler(exc, context)
    
    # 异常模块就是记录项目的错误日志
    logger.error('%s - %s - %s' % (context['view'], context['request'].method, exc))
    if response is None:
        return Response({
            'detail': '%s' % exc
        }, status=status.HTTP_500_INTERNAL_SERVER_ERROR, exception=True)
    return response

• settings文件中

REST_FRAMEWORK = {
    'EXCEPTION_HANDLER': 'utils.exception.exception_handler',
}

（5）二次封装Response模块

• utils/response.py文件中

from rest_framework.response import Response

class APIResponse(Response):
    def __init__(self, data_status=0, data_msg='ok', results=None, http_status=None, headers=None, exception=False, **kwargs):
        data = {
            'status': data_status,
            'msg': data_msg,
        }
        if results is not None:
            data['results'] = results
        data.update(kwargs)

        super().__init__(data=data, status=http_status, headers=headers, exception=exception)

（6）路由组件配置

• utils/router.py文件中

from rest_framework.routers import Route, DynamicRoute, SimpleRouter as DRFSimpleRouter

class SimpleRouter(DRFSimpleRouter):
    routes = [
        # List route.  /资源s/
        Route(
            url=r'^{prefix}{trailing_slash}$',
            mapping={
                'get': 'list',  # 群查
                'post': 'create',  # 单增、群增
                'put': 'multiple_update',  # 群整改
                'patch': 'multiple_partial_update',  # 群局改
                'delete': 'multiple_destroy',  # 群删
            },
            name='{basename}-list',
            detail=False,
            initkwargs={'suffix': 'List'}
        ),
        # Dynamically generated list routes. Generated using
        # @action(detail=False) decorator on methods of the viewset.
        DynamicRoute(
            url=r'^{prefix}/{url_path}{trailing_slash}$',
            name='{basename}-{url_name}',
            detail=False,
            initkwargs={}
        ),
        # Detail route.  /资源s/(pk)/
        Route(
            url=r'^{prefix}/{lookup}{trailing_slash}$',
            mapping={
                'get': 'retrieve',  # 单查
                'put': 'update',  # 单整改
                'patch': 'partial_update',  # 单局改
                'delete': 'destroy'  # 单删
            },
            name='{basename}-detail',
            detail=True,
            initkwargs={'suffix': 'Instance'}
        ),
        # Dynamically generated detail routes. Generated using
        # @action(detail=True) decorator on methods of the viewset.
        DynamicRoute(
            url=r'^{prefix}/{lookup}/{url_path}{trailing_slash}$',
            name='{basename}-{url_name}',
            detail=True,
            initkwargs={}
        ),
    ]

# 对外提供十大接口的router对象
router = SimpleRouter()
# eg: router.register('users', UserModelViewSet, basename='user')
"""
/users/
'get': 'list',  # 群查
'post': 'create',  # 单增、群增
'put': 'multiple_update',  # 群整改
'patch': 'multiple_partial_update',  # 群局改
'delete': 'multiple_destroy',  # 群删

/users/(pk)/
'get': 'retrieve',  # 单查
'put': 'update',  # 单整改
'patch': 'partial_update',  # 单局改
'delete': 'destroy'  # 单删
"""

（7）media文件配置

• dev.py文件中

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

• media目录配置

"""
├── luffyapi
    └──	luffyapi/
       	└──	media/  	
			└──	icon 
				└── default.png
"""

（8）项目路由配置

• 主路由（项目/urls.py文件中）

from django.contrib import admin
from django.urls import path, re_path, include
from django.views.static import serve
from django.conf import settings
urlpatterns = [
    path('admin/', admin.site.urls),

    path('user/', include('user.urls')),

    re_path('^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT})
]

• 子路由（应用文件夹/urls.py文件中）

from django.urls import path, re_path
urlpatterns = [

]

5. 项目的后端数据库配置

（1）创建数据库

"""
1.管理员连接数据库
>: mysql -uroot -proot

2.创建数据库
>: create database luffy default charset=utf8;

3.查看用户
>: select user,host,password from mysql.user;
"""

（2）为数据库指定账户

"""
设置权限账号密码
# 授权账号命令：grant 权限(create, update) on 库.表 to '账号'@'host' identified by '密码'

1.配置任意ip都可以连入数据库的账户
>: grant all privileges on luffy.* to 'luffy'@'%' identified by 'Luffy123?';

2.由于数据库版本的问题，可能本地还连接不上，就给本地用户单独配置
>: grant all privileges on luffy.* to 'luffy'@'localhost' identified by 'Luffy123?';

3.刷新一下权限
>: flush privileges;

只能操作luffy数据库的账户
账号：luffy
密码：Luffy123?
"""

（3）项目中配置文件配置

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'luffy',
        'USER': 'luffy',
        'PASSWORD': 'Luffy123?',
        'HOST': 'localhost',
        'PORT': 3306
    }
}
import pymysql
pymysql.install_as_MySQLdb()

6. user文件夹的创建（app）

（1）创建user 文件夹

*****************前提：在 luffy 虚拟环境下********************

1.终端从项目根目录进入apps目录
>: cd luffyapi & cd apps

2.创建app
>: python ../../manage.py startapp user

（2）创建user表对应的model

• user文件夹下的models文件中

from django.db import models
from django.contrib.auth.models import AbstractUser
class User(AbstractUser):
    mobile = models.CharField(max_length=11, unique=True)
    # 需要pillow包的支持
    icon = models.ImageField(upload_to='icon', default='icon/default.png')

    class Meta:
        db_table = 'luffy_user'
        verbose_name = '用户表'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.username

• 注册user app，配置user表

# 注册user app
INSTALLED_APPS = [
    # ...
    'user',
]


# 配置自定义User表
AUTH_USER_MODEL = 'user.User'

（3）数据库迁移

"""
1）去向大luffyapi所在目录的终端（项目最顶层的目录）

2）安装pillow模块
pip install pillow

3）数据库迁移
python manage.py makemigrations
python manage.py migrate
"""

（4）xadmin后台管理

• Django自带的后台管理在实际开发中，不太健全，所以我们使用xadmin后台管理

1. 安装

pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2
    
2. 注册app （dev.py文件中）
INSTALLED_APPS = [
    # ...
    # xamin主体模块
    'xadmin',
    # 渲染表格模块
    'crispy_forms',
    # 为模型通过版本控制，可以回滚数据
    'reversion',
]

3. 需要自己的数据库模型类，完成数据库迁移
python manage.py makemigrations
python manage.py migrate

4. 主路由中替换掉admin

# xadmin的依赖
import xadmin
xadmin.autodiscover()
# xversion模块自动注册需要版本控制的 Model
from xadmin.plugins import xversion
xversion.register_models()

urlpatterns = [
    # ...
    path(r'xadmin/', xadmin.site.urls),
]

5. 创建超级用户：大luffyapi路径终端

# 在项目根目录下的终端
python manage.py createsuperuser
# 账号密码设置：admin | Admin123

6. 完成xadmin全局配置：新建home/adminx.py
# home/adminx.py
# xadmin全局配置
import xadmin
from xadmin import views

class GlobalSettings(object):
    """xadmin的全局配置"""
    site_title = "路飞学城"  # 设置站点标题
    site_footer = "路飞学城有限公司"  # 设置站点的页脚
    menu_style = "accordion"  # 设置菜单折叠

xadmin.site.register(views.CommAdminView, GlobalSettings)


7. 在adminx.py中注册model（home/adminx.px）

from . import models
# 注册
xadmin.site.register(models.Banner)

8. 修改app:home的名字：xadmin页面上的显示效果
# home/__init__.py
default_app_config = "home.apps.HomeConfig"

# home/apps.py
from django.apps import AppConfig
class HomeConfig(AppConfig):
    name = 'home'
    verbose_name = '我的首页'

7. 项目前端文件创建

• 使用VUE框架开发前端项目
• 点我查看前端项目搭建详情

8. 前端项目配置

（1）模块安装及配置

1. 安装

cnpm install axios
cnpm install vue-cookies
cnpm install element-ui
cnpm install jquery
cnpm install bootstrap@3

2. 将安装的模块在main.js文件中分别配置
*****************************
import axios from 'axios'
Vue.prototype.$axios = axios;
*****************************
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;
*****************************
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
*****************************
const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};
*****************************
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

9. 前后端分离跨域问题的解决

1. 在后端项目中，安装插件
pip install django-cors-headers

插件参考地址：https://github.com/ottoyiu/django-cors-headers/
    
2. 项目配置：dev.py
# 注册app
INSTALLED_APPS = [
	...
	'corsheaders'
]

# 添加中间件
MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware'
]

# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True