Django——简单版登录功能 - Go语言中文社区

Django——简单版登录功能


 

前提需要:把框架那些配置啥的都写好

用bootstrap(别人写好的样式)把界面显示的好看点

一、app02/views.py

from django.shortcuts import render,redirect,HttpResponse

# Create your views here.


def login(request):
    if request.method=='GET':
        return render(request,'login.html')
    else:
        name=request.POST.get('name')
        password=request.POST.get('password')
        print(name)
        print(password)
        if name=='ayca' and password=='123':
            # return redirect('http://www.baidu.com')
            # 登录成功重定向到index页面
            return redirect('/index')
        else:
            return HttpResponse('用户名密码错误')


def index(request):
    return render(request,'index2.html')

二、settings.py

import os

# BASE_DIR:项目根路径
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# SECRET_KEY:密钥,项目中默认的一些加密用它(不需要关注,可以改,但是不能删)
SECRET_KEY = 'dk_'
# DEBUG:调试模式,开,开发阶段是true,上线阶段把它设成false
# 设置成开报错信息更完善
DEBUG = True

# ALLOWED_HOSTS:上线阶段使用,允许谁访问
ALLOWED_HOSTS = ['*']


# INSTALLED_APPS   项目所有的app,新建的app要在里面注册
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 'app01.apps.App01Config',
    'app01',
    # 'app02.apps.App02Config', #
    'app100' #
]


# MIDDLEWARE  中间件
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]


# ROOT_URLCONF  根路由是哪个文件,根路由的位置可以变
ROOT_URLCONF = 'day60.urls'


# TEMPLATES  模板文件存放路径(如果使用django-admin创建的项目,需要手动配,否则找不到)
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, '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',
            ],
        },
    },
]


# WSGI_APPLICATION  wsgi服务器使用的是哪个
WSGI_APPLICATION = 'day60.wsgi.application'


# DATABASES  数据库链接配置
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

# 不用管(内置app相关)
AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# 国际化相关,语言,时区

LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True


# 静态文件配置相关
STATIC_URL = '/static/'
# 再配一个STATICFILES_DIRS=列表(列表内写路径),单词一个字母都不能错
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'static'),
]

三、day60/urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
from app02 import views as views2


# urlpatterns列表,列表内放了url函数的执行结果
# 使用很简单,复制一行,改一下第一个参数(正则表达式),第二个参数是视图函数内存地址
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # 在内部,请求来了,路径匹配成功,内部自动调用index(request),把request传入
    # url(r'^index', views.index),


    # 登录小案例
    url(r'^login', views2.login),
    url(r'^index', views2.index),

]

四、static/bootstrap

把已下载好的bootstrap直接拉入,并导入index2里

五、直接导入已下载好的或引用jQurey地址

 

jQuery相关网站

官网 https://jquery.com/
文档API: http://jquery.cuishifeng.cn/index.html
#直接打开复制粘贴到自己创建的.js / .min.js文件下
BootCDN jQuery各个版本地址: https://www.bootcdn.cn/jquery/

#方式一:本地引入
<script src="jquery-3.5.1.min.js"></script>
<script>
    //注意,一定在引入jQuery之后,再使用jQuery提供的各种操作
</script>

#方式二:直接使用CDN
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.js"></script>
<script>
    code...
</script>

 

六、templatesindex2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <script src="/static/js/jquery.min.js"></script>
    <title>首页</title>
</head>
<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>标题1 自己写</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>© 2016 Company, Inc.</p>
      </footer>
    </div> <!-- /container -->



</body>
</html>
index2

七、templateslogin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <title>Title</title>
</head>
<body>

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <h1 class="text-center">登录功能</h1>
        <form action="" method="post">
            <div class="form-group">
                <label for="">用户名:</label>
                <input type="text" name="name" class="form-control">
            </div>


            <div class="form-group">
                <label for="">密码:</label>
                <input type="password" name="password" class="form-control">
            </div>

            <div class="text-center">

                <input type="submit" value="登录" class="btn btn-success">
            </div>

        </form>
    </div>

</div>

</body>
</html>
login

 

版权声明:本文来源博客园,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://www.cnblogs.com/guojieying/p/13741298.html
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2021-05-15 23:05:47
  • 阅读 ( 1529 )
  • 分类:Go

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢