vue结合django全过程

Posted 2021-01-31 ylinhuang

怎么说，网上找的例子真的不是一般的坑，根本就是少了很多流程让人故意看不懂

第一步，创建好我们的app

django-admin startproject weeklyapp 这是创建我们的整个系统app

第二步，进入我们的app，weeklyapp 

cd weeklyapp 

python manage.py startapp weeklypython

第三步，创建我们的vue，这个你可以另外前端去写，因为前后端完全分离

vue-init webpack weeklyvue

cdweeklyvue

npm install
npm run build   #这样会生成dist文件
第四步，就是vue和django的结合

from django.contrib import admin
from django.views.generic.base import TemplateView  #一定要记得去引入，很多坑就在这里
from django.conf.urls import include, url

urlpatterns = [
    url(r‘^admin/‘, admin.site.urls),
    url(r‘^user/‘, include(‘weeklypython.urls‘, namespace=‘user‘)),
    url(r‘‘,TemplateView.as_view(template_name=‘index.html‘)),  #这个是直接访问到我们的vue项目的首页

]
第五步,配置模板搜索路径

TEMPLATES = [
    {
        ‘BACKEND‘: ‘django.template.backends.django.DjangoTemplates‘,
         ‘DIRS‘: [‘weeklyvue/dist‘],   #在这里哦，记得哦
        #‘DIRS‘: [],
        ‘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,‘weeklyvue/dist/static‘)   #记得在最下面要添加这个
]

第六步，因为我们前后端完全是分离的，所以说前端后端分别需要独立运行，就是解决跨域问题

pip install django-cors-headers  就是安装这个应用

MIDDLEWARE = [
    # ‘corsheaders.middleware.CorsMiddleware‘
    # 跨域用的，必须放最先前,
    # ‘corsheaders.middleware.CorsMiddlewaredjango‘;corsheaders.middleware‘ is not a package
    # 这个还要安装 corsheader 这个app应用
    ‘django.middleware.security.SecurityMiddleware‘,
    ‘django.contrib.sessions.middleware.SessionMiddleware‘,
    ‘django.middleware.common.CommonMiddleware‘,
    ‘django.middleware.csrf.CsrfViewMiddleware‘,
    ‘django.contrib.auth.middleware.AuthenticationMiddleware‘,
    ‘django.contrib.messages.middleware.MessageMiddleware‘,
    ‘django.middleware.clickjacking.XFrameOptionsMiddleware‘,
]

最后再在设置里面添加

CORS_ORIGIN_ALLOW_ALL = True   上面的顺序我也不太清楚，反正跨域要解决的   这样子我们的vue单独环境就出来了，可以单独运行vue了

第七步，接下来打通vue和python的数据，这个前后端分离，用到了Django REST framework这个django应用

pip install djangorestframework
pip install markdown       # Markdown support for the browsable API.
pip install django-filter  # Filtering support   #直接安装就可以了
接下来就是配置了

INSTALLED_APPS = [
    ‘django.contrib.admin‘,
    ‘django.contrib.auth‘,
    ‘django.contrib.contenttypes‘,
    ‘django.contrib.sessions‘,
    ‘django.contrib.messages‘,
    ‘django.contrib.staticfiles‘,
    # ‘weeklypython.apps.WeeklypythonConfig‘,
    ‘weeklypython‘,
    # 这里也可以不写这么多的，直接 wekpypython 也是可以的
    # 这里 weeklypython 表示你的app应用  .apps 表示下面的apps.py  .WeeklypythonConfig表示你的配置文件
    ‘rest_framework‘,
    ‘corsheaders‘, # 这里安装这个app应用  pip install corsheader
]

连接数据库

# 连接到本地的数据库
DATABASES = {
    ‘default‘: {
        ‘ENGINE‘: ‘django.db.backends.mysql‘,
        ‘HOST‘:‘localhost‘,
        ‘PORT‘:‘3306‘,
        ‘USER‘:‘root‘,
        ‘PASSWORD‘:‘123456‘,
        ‘NAME‘: ‘user‘,
    }
}

创建models，自己创建就好
该项目下要新建两个文件，一个是urls.py, 另一个是serializers.py  
在

serializers.py 里面写好序列化的models

from .models import UserInfo
from rest_framework import serializers
#serializers定义了API的表现形式
class UserInfos(serializers.ModelSerializer):
    #使用ModelSerializer来序列化model层
    class Meta:
        module = UserInfo  #指定要序列化的模型
        filter(‘user_department‘,‘user_jobNumber‘,‘user_userName‘,‘user_post‘,‘user_telephone‘,‘user_email‘,‘user_password‘)


然后是apps.py里面的文件  这个文件是配置文件

from django.apps import AppConfig


class WeeklypythonConfig(AppConfig):
    """
    这个是配置文件，django启动的时候会去这里找到这个配置
    """
    name = ‘weeklypython‘