一、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项目开发有所帮助。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285017.html
微信扫一扫 
支付宝扫一扫 