Python Django Vue.js
▌Introduction
▌Environment
▋Python 3.6.2
▋Django 1.8.18
▋Vue 2.5.2
▌Implement
▋Confirm dialog box
We
would like to show a dialog box for user to confirm the item-removing.
Let’s
try using sweetalert2 and vue.js to make this done.
First
include sweetalert2 and vue.js cdn.
▋base.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.min.css" />
</head>
Then
we will add v-on directive
on the click event for the remove button, in order to trigger the confirm
dialog box.
<div id="prodapp">
<!--
skip.... -->
<tbody>
{% for prod in Prods %}
<tr>
<td>{{ prod.Id }}</td>
<td>{{ prod.Title
}}</td>
<td>{{ prod.Price
}}</td>
<td>
<form action="{% url 'productRemove' %} " method="post" ref="removeForm{{ prod.Id }}">
{% csrf_token %}
<input type="hidden" name="Id" value="{{ prod.Id }}" />
<input type="button" class="btn
btn-success" value="Edit" onclick="location.href='{% url
'productEdit' prodId=prod.Id %}'" />
<input type="button" class="btn btn-warning" value="Remove" v-on:click="confirmRemove({{ prod.Id }},'{{ prod.Title }}')" />
</form>
</td>
</tr>
{% endfor %}
</tbody>
<!--
skip.... -->
</div>
n Notice that the“Mustache” syntax (double curly
braces) will be replaced with value from django’s view.
n We use ref to register every form element in
the product’s for loop, we will use $refs to get the form and submit it.
Let’s
implement the javascript.
▋js (product-list.js)
var prodapp = new Vue({
el: '#prodapp',
data: {
},
methods: {
confirmRemove: function (id, title) {
var refs = this.$refs;
swal({
title: 'Are you sure?',
text: `\"${title}\" will be removed!`,
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
}).then(function () {
let form = "removeForm" + id.toString();
refs[form].submit(); //Submit
}, function (dismiss) {
})
}
}
})
OK,
seems everything is done. But wait a minute, how set the link path to include our
js file into the html?
▋Managing static files
In
Django, django.contrib.staticfiles
can help managing the static files and make us could refer to them.
▋settings.py
Make
sure that the INSTALLED_APPS
includes django.contrib.staticfiles.
INSTALLED_APPS
= [
'app',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
Then
set the STATIC_URL
like following in settings.py,
STATIC_URL = '/static/' # Change to your directory name
Ok,
now we can use static template tag to get the relative path for our static
files.
For
example,
{% load static
%}
<script src="{% static "scripts/app/components/product-list.js" %}"></script>
▌Demo
沒有留言:
張貼留言