2017年10月17日 星期二

[Django] Queries - List data

 Python   Django   Queries  



Introduction


From the chapter, we will create CRUD functions to our model: Product.
We will first make a product listing page by queries, template rendering.

Environment


Python 3.6.2
Django 1.8.18


Implement


Before we start

We need a enum to keep the Product Type information.

enum.py

from enum import Enum

class ProductTypeEnum(Enum):
     book = 1
     clothes = 2
     toy = 3

Which will present the following data from database.




Also add the jquery, bootstrap cdn on the base template.

base.html

<head>
    <meta charset="utf-8" />
    <title>{% block title %}django-sample{% endblock %}</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>


Making queries

Let’s create a view: productList, with a parameter: prodtype for the url pattern.

views.py

from app.models import Product
from share.enum import ProductTypeEnum

#region Product: List
def productList(request, prodtype):

    prods = []
    prodtypeEnum = ProductTypeEnum[prodtype]
    prods = Product.objects.filter(ProdType=prodtypeEnum.value)
   
context = {'Prods': prods}

    return render(request, 'product-list.html', context)
#endregion


Url Pattern

urls.py

from app.views import home, productList, productCreate, productEdit, productRemove

urlpatterns = [
    url(r'^$', home, name='home'),
    url(r'^product/(?P<prodtype>\w+)/$', productList, name='productList'),
    url(r'^admin/', admin.site.urls),
]


We use named group to pass the url matched parameter as an argument to a view.
The syntax for named regular-expression groups is (?P<name>pattern), where name is the name of the group and pattern is some pattern to match.


Template

product-list.html

We will use the template tag: for, to display the array data.

{% extends "base.html" %}

{% block header %}Products{% endblock %}

{% block content %}

<div>
    <input type="button" class="btn btn-success" value="Create" />

    <table class="table">
    <thead>
        <th>Id</th>
        <th>Title</th>
        <th>Price</th>
        <th></th>
    </thead>
    <tbody>
        {% for prod in Prods %}
        <tr>
            <td>{{ prod.Id }}</td>
            <td>{{ prod.Title }}</td>
            <td>{{ prod.Price }}</td>
            <td>
                <input type="button" class="btn btn-success" value="Edit" />
                <input type="button" class="btn btn-warning" value="Remove" />
              </form>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

</div>

{% endblock %}

It’s done, let’s take a look.
PS. You can skip the create, edit, remove buttons so far.


Result

Here is the query result.


http://localhost:8000/product/book/




http://localhost:8000/product/toy/





Github





Reference








沒有留言:

張貼留言