単純なタスクをコーディングして学ぶ


こんにちは、コーダ.
この記事は、学生と初心者がopen-source admin panel Djangoフレームワークで符号化.この挑戦に従う誰でも、少しのものを成し遂げます:
  • Git/Djangoフレームワークに対応する
  • 生産準備スターターに対応:Django Atlantis
  • 仮想環境を使用したPythonプロジェクトの構築
  • 既存のページのタイトルを変更する
  • 新しいページを作る
  • Djangoシェルを使用して、リスト定義されたユーザー
  • Thanks for reading! - Content provided by App Generator.


    この記事で使用されるWebアプリケーションは、Githubで公開されています.MITライセンスの下には、美しいUIキットの上に基本的な機能セットがコード化されています.
  • sqlite , djangoネイティブ
  • モジュラーコードベース
  • セッションベース認証(ログイン,登録)
  • フォームの検証
  • UIキット:アトランティスダークダッシュボード

  • Django ( Webフレームワーク)


    DjangoはPythonで書かれたオープンソースのWebアプリケーションフレームワークです.フレームワークとは、開発を容易にするモジュールやヘルパーの集まりです.彼らは論理的にグループ化され、あなたがゼロからすべてを書く代わりに、ものを再利用してWebアプリケーションを作成することができます.
    有用なジャンゴ資源

  • Django - オフィシャルウェブサイトdocs

  • Reddit/r/Django - スーパーアクティブレッドディコミュニティ

  • Django - 人気の完全なPythonプラットフォームによって提供される関連コンテンツ
  • ソースコードのクローン


    前に述べたように、アプリはGitHubに公開されており、我々は簡単にプロジェクトのページからzipをダウンロードしたり、端末を使用してソースを取得することができますgit ソースをクローンするコマンドツール
    $ git clone https://github.com/app-generator/django-dashboard-atlantis-dark.git
    $ cd django-dashboard-atlantis-dark
    

    コード構造


    ソースコードをローカルにした後、その構造を分析するために少し時間をとりましょう.Djangoプロジェクトは、デフォルトでは、モジュール化され、非常に理解し、更新しやすい.プロジェクトは例外ではなく、コードベースは三つのモジュールに分割されます.

  • Core module - 静的な資産(JS、CSS、イメージ)とグローバル構成を扱うのに用いられます

  • Authentication module - ログインとユーザー登録を取り扱います

  • App module - 他のすべての行動を管理します:ユーザーが認証されて、それ以外のログインページにリダイレクトするとき、アプリページを出してください.関連するファイルはこの単純なチャートに記載されています.
  •  # Source code:
     # https://github.com/app-generator/django-dashboard-atlantis-dark
    
     <django-dashboard-atlantis-dark>
         |
         |-- requirements.txt # project dependencies 
         |-- manage.py        # app bootstrapper 
         |
         |-- <core>
         |      | 
         |      |---- settings.py # global settings 
         |      |---- urls.py     # define the routing rules  
         |      |
         |      |---- <static>    # used for assets (js, css, images)  
         |      |---- <templates> # HTML templates 
         |                |       
         |                |-- layouts, includes, pages
         |
         | 
         |-- <authentication> 
         |      | 
         |      |---- views.py # manage Login, registration pages
         |      |---- urls.py  # Auth routing rules (login, register)
         |      |---- forms.py # Define auth forms  
         |
         | 
         |-- <app> 
         |      | 
         |      |---- views.py  # load dashboard pages
         |      |---- urls.py   # Define the routing rules 
         |      |---- models.py # Define the User model, used by authentication
         |
         |-- ******************************************************************
    

    Have questions regarding the structure? AMA in the comments.


    プロジェクトのビルド


    Python/Djangoプロジェクトは、通常、ソースからビルドされており、requirements.txt . 依存関係を2つの方法でインストールできます.
  • グローバルなPython環境を使用して、プロジェクトの依存関係をインストールするには、常に良い練習を我々は他のアプリケーションで使用されるバージョン間の競合を持っている可能性があります事実に基づいて
  • を使うVirtual environment - ほとんどの時間、我々はアプリケーションを実行し、Pythonのサンドボックスを使用してアプリケーションを構築するのに役立ちます推奨方法.アプリケーションによって必要なすべてのモジュールは、仮想envの中にインストールされ、他のPythonアプリで使用されるモジュールとの競合を失う危険がなくなります.
  • 仮想envをアクティブにし、モジュールをインストールするには、いくつかの簡単なコマンドを端末に入力する必要があります.
    $ # Make sure you are inside the project
    $ cd django-dashboard-atlantis-dark
    $
    $ # Virtualenv modules installation (Unix based systems)
    $ virtualenv --no-site-packages env
    $ source env/bin/activate
    $
    $ # Virtualenv modules installation (Windows based systems)
    $ # virtualenv --no-site-packages env
    $ # .\env\Scripts\activate
    $ 
    $ # Install modules
    $ pip3 install -r requirements.txt
    
    すべてうまくいけば、次の段階に進むことができます.

    Webアプリケーションを起動する


    使用可能なDjango Webアプリを持っている、我々は開始する前に、データベースを設定する必要があります.これは簡単に2つのコマンドしか使えません.
    $ # makemigrations sub-command will generate the necessary SQL code
    $ python manage.py makemigrations
    $
    $ # Migrate sub-command will create the SQLite database and tables
    $ python manage.py migrate
    
    すべてうまくいけば、我々はアプリを起動することができますし、コンソールで入力してブラウザでUIを参照してください.
    $ # Start the application (development mode)
    $ python manage.py runserver # default port 8000
    $
    $ # Start the app - custom port 
    $ # python manage.py runserver 0.0.0.0:<your_port>
    $
    $ # Access the web app in browser: http://127.0.0.1:8000/
    
    デフォルトでは、アプリケーションで定義された既定のユーザーは存在しません.記事の最初の部分で述べたように、アプリはログインと登録の認証画面が付属しています.

    Registration Page



    ユーザーの作成後、ログインページにアクセスし、認証できます.

    ログイン後、Webアプリケーションメニューとデフォルトのダッシュボードページを参照してください.

    ページタイトルを更新


    このJjangoプロジェクトでは、ページはマスターページと実際のページの間の合成を使用してレンダリングされますextends 特定のデータを持つ骨格.例えば、index page extends マスターページdefault.html

    Code for master page


    <head>
    
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <title>
        Django Dashboard Atlantis - { % block title % }{ % endblock % } | AppSeed 
       </title>
    
    </head>
    <body data-background-color="dark">
        { % include 'includes/navigation.html' % }
    
        { % include 'includes/sidenav.html' % }
    
        <div class="main-panel">
            <div class="content">
    
                { % content % }{ % content % }
    
            </div>
    
        { % include 'includes/footer.html' % }
    
        </div>
    
    </body>
    </html>
    
    新しいページextends 別のページでは、特定のコンテンツをcorespondentブロックの間で定義する必要がありますindex ページ
    {% extends "layouts/default.html" %}
    
    {% block title %} Dashboard {% endblock title %}
    
    { % block content % }
    
       <H1> Specific Content injected into the master page </H1>
    
    { % endblock content % }
    
    ページタイトルを変更するには、テキストを更新する必要がありますtitle block :
    {% extends "layouts/default.html" %}
    
    {% block title %} New Title {% endblock title %}
    
    ...
    

    新しいページを作る


    現在のユーザが認証された場合、アプリケーションはディレクトリからページを提供します pages . このタスクを簡単にするために、プロジェクトは新しいページを追加するためのスケルトンとして使用できる黒いページが付属しています.

    Black page path : root / core / templates / pages


    ページ内容:
    {% extends "layouts/default.html" %}
    
    {% block title %} Dashboard {% endblock title %}
    
    <!-- Specific CSS goes HERE -->
    {% block stylesheets %}{% endblock stylesheets %}
    
    {% block content %}
    
        <!-- (Almost) A blank page -->
        <h3>
        Add content here
        </h3>
    
    {% endblock content %}
    
    <!-- Specific JS goes HERE -->
    {% block javascripts %}{% endblock javascripts %}
    
    新しいページを作成するには、このページを新しいページとして保存します.HTMLは、ブラウザで新しいページを透過し、保存し、アクセスするように内容を更新しますhttp://localhost:8000/new-page.html
    {% extends "layouts/default.html" %}
    
    {% block title %} My Page Title {% endblock title %}
    
    <!-- Specific CSS goes HERE -->
    {% block stylesheets %}{% endblock stylesheets %}
    
    {% block content %}
    
        <!-- Your content here -->
        <h3>
        This is my content rendered by my new page. 
        </h3>
    
    {% endblock content %}
    
    <!-- Specific JS goes HERE -->
    {% block javascripts %}{% endblock javascripts %}
    

    コンソールを使っているユーザをリストする


    DJangoは、アプリケーション構造、データベース情報、およびアプリケーションによって定義されたり使用されるメソッドをテストする便利な方法を提供していますDjango shell
    ジャンゴシェルを起動するにはshell サブコマンド
    $ # Start the Django shell
    $ python manage.py shell
    
    すべてがうまくいくなら、この出力を見るべきです:
    >>> Python 3.7.2 (tags/v3.7.2:9a3ffc0492, Dec 23 2018, 22:20:52) [MSC v.1916 32 bit (Intel)] on win32
    >>> Type "help", "copyright", "credits" or "license" for more information.
    >>> (InteractiveConsole)
    >>>
    
    この点から、我々はこのシェルインターフェースによって我々のプロジェクトデータと方法と対話することができます.アプリケーションで登録されているすべてのユーザーを一覧表示するには、ユーザーモデルをインポートする必要があります.ユーザーモデルはすべてのユーザーが保存され、Django固有のORMを使用してクエリを作成する必要があります.
    >>> from django.contrib.auth.models import User
    >>> User.objects.all()
    <QuerySet [<User: test>]>
    >>> User.objects.all()[0].id
    1
    >>> User.objects.all()[0].username
    `test`
    

    Thank you for reading this long post. Feel free to AMA in the comments.


    資源・リンク


  • Django Dashboard Atlantis Dark - ソースコード

  • Django Admin Dashboards - Djangoでコード化されるより多くの管理ミンダッシュボード