django -- 安装django

安装

通过cmd进行安装

pip3 install django==1.11.11

创建django项目

通过命令行进行创建

下面的命令创建了一个名为"mydjango"的Django 项目：

django-admin startproject mydjango

说明：

在哪个目录下创建的，就会在哪里生成这个项目

在pycharm里创建

django -- 安装django

目录介绍

MyDjango/
├── manage.py  # 管理文件
└── MyDjango  # 项目目录
    ├── __init__.py
    ├── settings.py  # 配置
    ├── urls.py  # 路由 --> URL和函数的对应关系
    └── wsgi.py  # runserver命令就使用wsgiref模块做简单的web server

命令行运行

在django项目的根目录下（就是我们起的项目名下），执行下面的命令

python manage.py runserver

如果看到如下信息则启动成功

django -- 安装django

然后我们用浏览器去打开上面的地址，大家会看到如下的页面

django -- 安装django

如果我们想在启动的时候自定义端口号，可以在执行命令的时候加上端口号

python manage.py runserver 8080

pycharm中启动

django -- 安装django

如果想更改端口号，则点击向下的箭头更改

django -- 安装django

settings下面的配置文件

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')] #templates文件夹路径
        ,
        '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',
            ],
        },
    },
]

这个里面定义了模版文件的路径，也就是HTML文件的路径，我们引用的HTML文件，都会在这里面去找，pycharm创建的会自动帮我们加上下面的这句代码，如果通过命令创建的项目，则需要手动去加

'DIRS': [os.path.join(BASE_DIR, 'templates')],  # templates文件夹路径

静态文件相关：

STATIC_URL = '/static/'  # HTML中使用的静态文件夹前缀
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static')  # 静态文件存放路径
]

这里面可以放CSS文件，JS文件，image文件等

写一个登录页面

首先要有一个登录的html文件，上面也说了templates是放html文件的，我们把文件放到里面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        body {
            background-color: #eeeeee;
        }

        .login-box {
            margin-top: 50px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4 login-box">
            <form class="form-horizontal">
                <div class="col-sm-9">
                    <h2 class="text-center">请登录</h2>
                </div>

                <div class="form-group">

                    <div class="col-sm-9">
                        <div class="input-group margin-bottom-sm">
                            <label for="email" class="hidden">邮箱</label>
                            <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                            <input class="form-control" type="text" id="email" placeholder="您的邮箱地址">
                        </div>
                        <span class="help-block"></span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-9">
                        <div class="input-group">
                            <label for="password" class="hidden">密码</label>
                            <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                            <input class="form-control" type="password" id="password" placeholder="请输入密码">
                        </div>
                        <span class="help-block"></span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-9">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> 记住我
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-9">
                        <button type="button" id="b1" class="btn btn-block btn-primary">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/static/jquery-3.3.1.js"></script>
<script>
    $("#b1").click(function () {
        $("input:not([type='checkbox'])").each(function () {
            // 判断值为不为空
            if ($(this).val().length === 0) {
                // 展示错误提示
                var errMsgPrefix = $(this).prev().prev().text();
                $(this).parent().next().text(errMsgPrefix + "不能为空");
                $(this).parent().parent().parent().addClass("has-error");
            }
        });
    });

    // 给输入框绑定获取焦点的事件
    $("input:not([type='checkbox'])").focus(function () {
        // 清空错误提示
        $(this).parent().next().text("");
        // 移除父标签的has-error
        $(this).parent().parent().removeClass("has-error");
    });
</script>
</body>
</html>

View Code