python 记录Django与Vue前后端分离项目搭建


python 记录Django与Vue前后端分离项目搭建

参考链接:

https://blog.csdn.net/liuyukuan/article/details/70477095

 

1. 安装python与vue

2. 创建Django项目

django-admin startproject ulb_manager

3. 进入项目并创建名为backeng的app

  1.  
    cd ulb_manager
  2.  
    python manage.py startapp backend

4. 使用vue-cli创建vue项目 frontend

vue-init webpack frontend

5.打包vue目录

  1.  
    cd frontend
  2.  
    npm install
  3.  
    npm run build

打包完成后会生成dist文件 内有index.html和文件夹static  

6.配置Django指向index.html

 配置ulb_manager/urls.py文件

  1.  
     
  2.  
    from django.views.generic import TemplateView // 添加
  3.  
     
  4.  
    urlpatterns = [
  5.  
    path( 'admin/', admin.site.urls),
  6.  
    path( 'index/', TemplateView.as_view(template_name="index.html")), // 添加
  7.  
    ]

配置ulb_manager/settings.py文件

  1.  
    TEMPLATES = [
  2.  
    {
  3.  
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
  4.  
    # 'DIRS': [],
  5.  
    'DIRS': ['frontend/dist'], // 添加
  6.  
    'APP_DIRS': True,
  7.  
    'OPTIONS': {
  8.  
    'context_processors': [
  9.  
    'django.template.context_processors.debug',
  10.  
    'django.template.context_processors.request',
  11.  
    'django.contrib.auth.context_processors.auth',
  12.  
    'django.contrib.messages.context_processors.messages',
  13.  
    ],
  14.  
    },
  15.  
    },
  16.  
    ]
  17.  
     
  18.  
    STATICFILES_DIRS = [ // 添加
  19.  
    os.path.join(BASE_DIR, "frontend/dist/static"),
  20.  
    ]

7. 这时启动Django项目 并访问/index便能打开打包好的vue项目

python manage.py runserver

8. Django添加接口

    在Django的backend目录下新建urls.py文件

  1.  
    from django.urls import path
  2.  
     
  3.  
    from . import views
  4.  
     
  5.  
    urlpatterns = [
  6.  
    path( 'testapi', views.testapi, name='testapi'),
  7.  
    ]

    修改backend目录下views.py文件

  1.  
    from django.shortcuts import render
  2.  
     
  3.  
    # Create your views here.
  4.  
    from django.http import HttpResponse
  5.  
    import json
  6.  
     
  7.  
    # 解决前端post请求 csrf问题
  8.  
    from django.views.decorators.csrf import csrf_exempt
  9.  
    @csrf_exempt
  10.  
     
  11.  
    def testapi(request):
  12.  
    print(request)
  13.  
    print(request.method)
  14.  
    if request.method == "GET":
  15.  
    print(request.GET.get( 'aa'))
  16.  
    resp = { 'errorcode': 100, 'type': 'Get', 'data': {'main': request.GET.get('aa')}}
  17.  
    return HttpResponse(json.dumps(resp), content_type="application/json")
  18.  
    else:
  19.  
    print(request.POST)
  20.  
    print(request.body)
  21.  
    str1=str(request.body, encoding = "utf-8")
  22.  
    data=eval(str1)
  23.  
    print(data)
  24.  
    print(data[ 'aa'])
  25.  
    print(type(request.body))
  26.  
    resp = { 'errorcode': 100, 'type': 'Post', 'data': {'main': data['aa']}}
  27.  
    return HttpResponse(json.dumps(resp), content_type="application/json")

配置ulb_manager/urls.py文件

  1.  
    from django.contrib import admin
  2.  
    from django.urls import include, path // 添加
  3.  
    from django.views.generic import TemplateView
  4.  
     
  5.  
     
  6.  
    urlpatterns = [
  7.  
    path( 'admin/', admin.site.urls),
  8.  
    path( 'index/', TemplateView.as_view(template_name="index.html")),
  9.  
    path( 'api/', include('backend.urls')) // 添加
  10.  
    ]

这时接口就可以访问到了

9. 开发环境跨域

    前端编辑时依旧使用npm run dev 这时请求Django接口可能会出现跨域问题   

    安装django-cors-headers

pip install django-cors-headers

    配置ulb_manager/settings.py文件

  1.  
    MIDDLEWARE = [
  2.  
    'django.middleware.security.SecurityMiddleware',
  3.  
    'django.contrib.sessions.middleware.SessionMiddleware',
  4.  
    'corsheaders.middleware.CorsMiddleware', // 添加
  5.  
    'django.middleware.common.CommonMiddleware',
  6.  
    'django.middleware.csrf.CsrfViewMiddleware',
  7.  
    'django.contrib.auth.middleware.AuthenticationMiddleware',
  8.  
    'django.contrib.messages.middleware.MessageMiddleware',
  9.  
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
  10.  
    ]
  11.  
     
  12.  
    CORS_ORIGIN_ALLOW_ALL = True // 添加

10. 在vue中请求接口

    配置axios

    https://blog.csdn.net/qq_39785489/article/details/80111141

    在组建中使用

  1.  
    import {post,get,patch,put} from '../http'
  2.  
     
  3.  
    export default {
  4.  
    name: 'HelloWorld',
  5.  
    mounted() {
  6.  
    // get('http://localhost:8000/api/testapi?aa=bb')
  7.  
    // .then((response) => {
  8.  
    // console.log(response)
  9.  
    // })
  10.  
    post( 'http://localhost:8000/api/testapi',{"aa": 'bb'})
  11.  
    .then( (response) => {
  12.  
    console.log(response)
  13.  
    console.log(response.data.main)
  14.  
    })
  15.  
    },
  16.  
    data () {
  17.  
    return {
  18.  
    msg: 'Welcome to Your Vue.js App'
  19.  
    }
  20.  
    }
  21.  
    }

  请求成功

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2021 CODEPRJ.COM