私たちの環境を設定し、ホームページを作成する

13782 ワード
webdev django python codenewbie テキストリンク

Django: The web framework for perfectionists with deadlines


こんにちは皆さんは私がこのユーザー登録/ログインdjangoアプリを開発することによって学んだことを皆さんと共有することに興奮しています.あなたはgithubでそれを見つけることができますし、登録/ログインシステムを持っている必要がある大規模なシステムプロジェクトに統合します.
シリーズの今日の部分では、我々は我々のウェブサイトと我々のホームページの骨格をつくって、我々の環境を準備するつもりです.
我々が始める前に、我々がこのチュートリアルで終わったあと、我々のホームページが何のように見えるかについて、あなたに教えさせてください.

十分な話を始めましょう.
...
まず最初にいくつかのパッケージをインストールしましょう.あなたは、あなたのプロジェクトのために仮想環境を使用することのまともな理解を持っていると仮定します、しかし、そうでないならば、ここでそれが重要である理由とそれをセットアップする理由をチェックすることができるlinkです.
仮想環境を設定した後、端末に行き、このコマンドでdjangoをインストールします.
我々は今、新しいジャンゴプロジェクトを作成することができます.私はあなたが望む何かを名前を付けることができますプロジェクトのユーザー管理を命名しました.pip install django
  • 私はあなたが前にDjangoと若干の背景を持っていると仮定するので、私はdjango-admin startproject user_managementコマンドが我々のために作成したプロジェクト構造に多くを得ません.しかし、以下のコメント欄であなたが理解していないことを私に尋ねてください.
    • 次のステップは、新しいアプリを起動することです.これは素晴らしい機能Djangoがある-再利用可能なアプリケーションを作成することができます.startprojectこれ以上の設定では、このアプリをインストールする前に.Pyモジュール.私は一度私のアプリをインストールしていないことを実現するために問題をデバッグしようとすると、純粋な痛みです!それで、これをしてください.
    設定.パイ
    INSTALLED_APPS = [
    # list of other apps django created for us.
    'users'  # add this
]
    さあ、最初のビューを作ろう.意見を述べる.ユーザーモジュール内のPYモジュール、特定のルートのロジックを処理します.ホームページ機能を表示するビュー関数を作成しましょう.
    ビューパイ
    from django.shortcuts import render

def home(request):
    return render(request, 'users/home.html')
  • 私たちがしたことはかなり基本的です.機能ベースのビューを使用して、ホームページをレンダリングします(現在は存在しませんが、少しでも作成します).次に、このホームビュー機能に私達のurlpatternをマップしましょう.
    • URLを作成します.ユーザモジュール内のPYモジュール.
    ユーザー/URL.パイ
    from django.urls import path
from .views import home

urlpatterns = [
    path('', home, name='users-home'),
]
    我々が作成したルートのためのロジックを処理するために我々のホームビューを使用して以来、我々は、ビューから我々のホームビューをインポートする必要があります.PY
  • 私は他のアプリのルートとの衝突を避けるために“ユーザー”とのパスの名前をプリフィックスしました.私たちは今、他のアプリを持っていない知っているが、それは良い練習です.
    • OKですが、我々はまだpython manage.py startapp usersからinclude()関数を呼び出すことによって、メインプロジェクトのURLモジュール内にユーザーのアプリケーションのURLモジュールを含める必要があります.
    私たちの主なプロジェクトのURLモジュールは、我々のユーザーアプリ、ユーザーアプリのURLに私たちを取る必要がありますdjangoに指示します.Pyはそこからそれを取るので、先に行きましょう.
    UserRange管理/URL.パイ
    from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('users.urls')),  # This is what we added
]
  • django.urls ->私はユーザーアプリのホームページをウェブサイトのホームページ(http://localhost:8000/)にしたいので、空の文字列を置きます.
    • はい、私たちはまだHTMLファイルを作成していないので、先に行きましょう.
    ユーザーアプリケーション内では、テンプレートという名前のフォルダーを作成します.次に、テンプレートの中にユーザーという名前の別のフォルダを作成します.ここで我々は、このアプリのために使用する予定のすべてのテンプレートを配置します.
    コードの繰り返しを避けるために、ベースを作成しましょう.他のHTMLファイルのすべてから拡張されるHTMLファイル.我々のベースHTMLファイルの中で今、以下を加えましょう.
    ベース.HTML
    <!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>{% block title %} {% endblock %} </title>
</head>
<body>
  <div class="container p-3 my-3">
    <div class="row">
      <div class="col-md-12">
        <nav class="navbar navbar-expand-md navbar-light " style="background-color: #f0f5f5">
          <a href="/" class="navbar-brand">Home</a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <div class="navbar-nav ml-auto">
                  <a href="#" class="nav-item nav-link">Profile</a>
                  <a href="#" class="nav-item nav-link">Logout</a>
                  <a href="#" class="nav-item nav-link">Sign in</a>
                </div>
            </div>
        </nav>
        {% block content %}{% endblock %}
      </div>
    </div>
  </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>
  • 私たちがしたことは、基本的なHTML構造を設定し、私たちのページにいくつかのスタイリングと応答性を与えるためにブートストラップを使用しました.私たちはまだ他のページを作成していないので、path('', include('users.urls'))の中のすべてのリンクは死んだリンクであることに注意してください.
    • 将来の
  • 、我々はまた、ユーザーが認証されているかどうかに応じてログイン/ログアウトボタンを表示する条件を追加します.
  • 他のすべてのHTMLページは、上記の基本HTMLから拡張されますが、同時に、独自のタイトル、およびコンテンツを追加します.それを再生し、それがあなたのニーズのためにより素晴らしい見てください.
    • 今すぐ私たちのホームページになる別のHTMLファイルを作成します.我々がビューを設定するとき、我々がテンプレートを家に命名したのを思い出してください.HTML 'ので、先に行くと家を作成しましょう.ユーザー/テンプレート/ユーザーの中のHTML
    ホーム.HTML
    {% extends "users/base.html" %}
{% block title %} Home Page {% endblock title%}
{% block content %}
    <div class="jumbotron">
        <h1 class="display-4">Welcome</h1>
        <p class="lead">
            This is <b>user registration and login system</b> build with django which is
            a Python-based free and open-source web framework that follows the model–template–views architectural pattern.
        </p>
        <hr class="my-4">
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Logout</a>
            <a class="btn btn-primary btn-lg" href="#" role="button">Sign in</a>
        </p>
    </div>

{% endblock content %}
    すごい!今すぐ動作するかどうかを確認します.開発サーバー、navを実行し、http://localhost:8000/に行く
    あなたの時間をありがとう!コメントを残してくださいと提案が歓迎されます.更新を得るために私に従ってください.次回シリーズの第2部でお会いしましょう.
    「CSS」テキストを表す様々なスタイル
    asp.Netでストレージ・プロシージャを呼び出す方法