实际Django项目+VUE项目开发

实际Django项目+VUE项目开发
项目搭建

实际Django项目+VUE项目开发

项目搭建

步骤：

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

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')

"""
├── 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

posted @ 2020-01-06 20:19 BigSun丶阅读(2476) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

公告

昵称： BigSun丶
园龄： 5年6个月
粉丝： 13
关注： 10

+加关注

2025年3月

日

一

二

三

四

五

六

质疑IT，理解IT，成为IT

实际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. 前后端分离跨域问题的解决

公告

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论