一、Django Vue index参数
在使用Django与Vue结合的时候,需要特别关注的是index参数。由于Vue是前端框架,因此我们需要在Django中指定我们要使用哪个index.html页面。这个可以通过在settings.py文件中进行如下设置:
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', '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', ], 'libraries':{ 'staticfiles': 'django.templatetags.static', }, 'builtins':[ 'django.contrib.staticfiles.templatetags.staticfiles', ], 'string_if_invalid': 'Undefined', 'debug': True, 'loaders': [ ('django.template.loaders.cached.Loader', [ 'django.template.loaders.filesystem.Loader', 'django.template.loaders.app_directories.Loader', ]), ], 'context_processors': [ 'django.template.context_processors.request', ], 'OPTIONS': { 'context_processors': [ 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.template.context_processors.media', 'django.template.context_processors.csrf', 'django.template.context_processors.static', 'django.template.context_processors.tz', 'django.template.context_processors.i18n', ], 'debug': settings.DEBUG, 'loaders': [ ('django.template.loaders.cached.Loader', [ 'django.template.loaders.filesystem.Loader', 'django.template.loaders.app_directories.Loader', ]), ], }, }, }, ]
其中的DIRS参数需要设置为Vue项目打包后的dist文件夹,可以使用os.path.join()函数获取。具体的代码如下:
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ os.path.join(BASE_DIR, 'path/to/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', ], }, }, ]
二、Django Vue多页面
如果需要使用Vue进行多页面开发,需要在Django中进行多个路由设置。这可以通过修改url.py文件实现:
urlpatterns = patterns('', url(r'^$', views.home_page, name="home"), url(r'^about/$', views.about_page, name="about"), url(r'^contact/$', views.contact_page, name="contact"), )
其中的views是Django中的视图函数。如下所示:
def home_page(request): return render(request, 'home.html', context={}) def about_page(request): return render(request, 'about.html', context={}) def contact_page(request): return render(request, 'contact.html', context={})
而对应的Vue页面则可以放在dist文件夹下的相应位置。
三、Django Vue教程
如果要学习Django和Vue的使用,推荐参考以下教程:
官方文档:https://docs.djangoproject.com/en/3.2/
Vue.js教程:https://cn.vuejs.org/v2/guide/
这两份教程可以讲解Django和Vue的使用方法,建议您一边学习一边进行实践。
四、Django Vue获取前端属性
获取前端属性可以在Vue的methods中进行定义,同时需要使用Axios库和Django的request库进行交互。具体代码如下:
// 前端Vue代码 import axios from 'axios'; export default { name: 'test', props: { name: { type: String, default: '' } }, data () { return { message: '' } }, methods: { submitMessage () { var self = this; axios.post('/api/submit-message', { message: self.message }).then(function (response) { self.$emit('update'); }).catch(function (error) { console.log(error); }); } } }
# 后台Django代码 from django.views import View from django.http import JsonResponse class SubmitMessageView(View): def post(self, request): message = request.POST.get('message') # do something with the message return JsonResponse({'status': 'success'})
这样前端就可以通过submitMessage()方法把message数据传送给后台,并进行修改操作。
五、Django Vue前后端分离
前后端分离可以使用Django Rest Framework和Vue-Axios进行实现。具体代码如下:
# 后端Django代码 from rest_framework.views import APIView from rest_framework.response import Response from rest_framework import authentication, permissions class TestApi(APIView): permission_classes = [permissions.IsAuthenticated] def get(self, request, format=None): content = { 'status': 'success', 'data': ['hello', 'world'] } return Response(content) # 前台Vue代码 import axios from 'axios'; export default { name: 'test', data () { return { messages: [] } }, created () { var self = this; axios.get('/api/test').then(function (response) { self.messages = response.data['data']; }).catch(function (error) { console.log(error); }); } }
这样前台就能够通过axios获取后台的数据,并进行展示。
六、Django Vue项目
要使用Django和Vue进行项目开发,可以参考以下步骤:
第一步:创建Django项目
$ django-admin.py startproject myproject
第二步:创建Vue项目
$ vue init webpack myproject-web $ cd myproject-web $ npm install axios
第三步:在Vue项目的src目录中创建一个新的main.js文件,用于启动Vue
// src/main.js import Vue from 'vue' import App from './App.vue' import Axios from 'axios' Vue.config.productionTip = false Axios.defaults.baseURL = `http://localhost:8000/` Vue.prototype.$http = Axios new Vue({ render: h => h(App), }).$mount('#app')
第四步:设置Django的STATICFILES_DIRS选项,指向Vue项目的dist目录
# myproject/settings.py STATICFILES_DIRS = [ os.path.join(BASE_DIR, "myproject-web/dist") ]
第五步:创建Django的RESTful API
# myproject/views.py from rest_framework.decorators import api_view from rest_framework.response import Response @api_view(['GET']) def example_view(request): return Response({'foo': 'bar'})
第六步:让Django返回Vue的index.html文件
# myproject/views.py from django.shortcuts import render def index(request): return render(request, 'index.html')
这样就能够完成一个简单的Django+Vue项目的开发。
七、Django Vue3模板
Django Vue3模板可以直接使用Django Vue官方提供的vue-cli-plugin-django命令行进行创建。具体命令如下:
$ vue create --default myapp $ cd myapp $ vue add django
这个过程会提示你设置Django项目的名称和端口号,完成后就能够开始开发Django Vue项目了。
八、Django Vue运维
对于Django Vue的运维,主要是需要注意以下几个方面:
- 升级Django和Vue版本时需要注意兼容性
- 对于静态资源的处理需要特别注意,可以使用CDN进行加速
- 需要遵守Vue和Django的开发规范,保证代码可读可维护
- 在部署时需要考虑服务器的配置和环境问题
以上就是Django与Vue的完美结合的介绍,希望能够对您的Django Vue项目开发有所帮助。