vue与dajngo

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

第一步,创建好我们的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'
 


 


 



上一篇:Eclipse启动Web项目 Tomcat中webapps中没有项目文件夹


下一篇:IntelliJ IDEA 优化总结