python 记录Django与Vue前后端分离项目搭建
2018-09-18 09:57
1131 查看
参考链接:
https://www.geek-share.com/detail/2703866190.html
1. 安装python与vue
2. 创建Django项目
[code]django-admin startproject ulb_manager
3. 进入项目并创建名为backeng的app
[code]cd ulb_manager python manage.py startapp backend
4. 使用vue-cli创建vue项目 frontend
[code]vue-init webpack frontend
5.打包vue目录
[code]cd frontend npm install npm run build
打包完成后会生成dist文件 内有index.html和文件夹static
6.配置Django指向index.html
配置ulb_manager/urls.py文件
[code] from django.views.generic import TemplateView // 添加 urlpatterns = [ path('admin/', admin.site.urls), path('index/', TemplateView.as_view(template_name="index.html")), // 添加 ]
配置ulb_manager/settings.py文件
[code]TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', # 'DIRS': [], 'DIRS': ['frontend/dist'], // 添加 '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, "frontend/dist/static"), ]
7. 这时启动Django项目 并访问/index便能打开打包好的vue项目
[code]python manage.py runserver
8. Django添加接口
在Django的backend目录下新建urls.py文件
[code]from django.urls import path from . import views urlpatterns = [ path('testapi', views.testapi, name='testapi'), ]
修改backend目录下views.py文件
[code]from django.shortcuts import render # Create your views here. from django.http import HttpResponse import json # 解决前端post请求 csrf问题 from django.views.decorators.csrf import csrf_exempt @csrf_exempt def testapi(request): print(request) print(request.method) if request.method == "GET": print(request.GET.get('aa')) resp = {'errorcode': 100, 'type': 'Get', 'data': {'main': request.GET.get('aa')}} return HttpResponse(json.dumps(resp), content_type="application/json") else: print(request.POST) print(request.body) str1=str(request.body, encoding = "utf-8") data=eval(str1) print(data) print(data['aa']) print(type(request.body)) resp = {'errorcode': 100, 'type': 'Post', 'data': {'main': data['aa']}} return HttpResponse(json.dumps(resp), content_type="application/json")
配置ulb_manager/urls.py文件
[code]from django.contrib import admin from django.urls import include, path // 添加 from django.views.generic import TemplateView urlpatterns = [ path('admin/', admin.site.urls), path('index/', TemplateView.as_view(template_name="index.html")), path('api/', include('backend.urls')) // 添加 ]
这时接口就可以访问到了
9. 开发环境跨域
前端编辑时依旧使用npm run dev 这时请求Django接口可能会出现跨域问题
安装django-cors-headers
[code]pip install django-cors-headers
配置ulb_manager/settings.py文件
[code]MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'corsheaders.middleware.CorsMiddleware', // 添加 '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 // 添加
10. 在vue中请求接口
配置axios
https://blog.csdn.net/qq_39785489/article/details/80111141
在组建中使用
[code]import {post,get,patch,put} from '../http' export default { name: 'HelloWorld', mounted() { // get('http://localhost:8000/api/testapi?aa=bb') // .then((response) => { // console.log(response) // }) post('http://localhost:8000/api/testapi',{"aa": 'bb'}) .then((response) => { console.log(response) console.log(response.data.main) }) }, data () { return { msg: 'Welcome to Your Vue.js App' } } }
请求成功
阅读更多
相关文章推荐
- Django+Vue.js搭建前后端分离项目的示例
- 从零开始搭建django前后端分离项目 系列一(技术选型)
- 从零开始搭建django前后端分离项目 系列三(实战之异步任务执行)
- 从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之八 || API项目整体搭建 6.3 异步泛型+依赖注入初探
- 从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之六 || API项目整体搭建 6.1 仓储
- vue+djangorestframework打造前后端分离项目(一)之drf的ViewSet、router和跨域
- 使用Django + Vue.js快速而优雅地构建前后端分离项目
- 从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之七 || API项目整体搭建 6.2 轻量级ORM
- 从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之二 || 后端项目搭建
- nginx 搭建 python django 项目
- 在Ubuntu系统上进行SAE+Python+Django开发记录—1.环境搭建
- node.js koa2 项目搭建(前后端分离开发)
- 三十八、python学习之Django框架(一):入门,介绍,设计模式,环境搭建,项目创建,基本配置,创建视图,静态文件,路由与反解析,App应用配置
- lynda.com教程之Learing Python and Django零基础搭建Django项目
- python - django 环境搭建,创建项目并添加应用。
- Django +vue.js实现前后端分离(十三)
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- Python <Windows 使用Django 搭建第一个web项目 2>
- Maven多模块,Dubbo分布式服务框架,SpringMVC,前后端分离项目,基础搭建,搭建过程出现的问题