从零开始开发一个语音交互测试站点（三）

最新推荐文章于 2024-05-02 17:48:44 发布

Burning__M

最新推荐文章于 2024-05-02 17:48:44 发布

阅读量215

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/Burning__M/article/details/101756721

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇记录一下主页面的开发过程：
由于采用了django的框架，所以admin管理、用户管理不需要自己搞了，后续可以将admin升级为xadmin，有时间再说。
Login_and_account的开发，直接上代码。
1、视图views.py

from django.shortcuts import render, redirect
from django.contrib import auth
from django.contrib.auth.decorators import login_required


# 以上导入的就是一个装饰器，用于验证（我们需要用户登录后，才能访问，否则就跳转到另外的页面）
# 这个另外的页面就默认的是/accounts/login/ 我们也也以自定义要跳转的地方，在settins.py中LOGIN_URL


# Create your views here.

def index(request):
    if request.method == 'POST':
        auth.logout(request)  # 注销，将session数据都删除，并且coolies也失效，(即用户退出登录，并不销户清除数据库里user记录)
    return render(request, 'index.html')


def NotLoginPage(request):
    return render(request, 'NotLoginPage.html')


def login(request):
    if request.method == 'POST':
        username = request.POST.get('accounts')
        password = request.POST.get('password')
        # 如何判断用户名和密码呢
        # 以下是使用auth模块，去数据库里查询用户信息，验证是否存在
        print(username, password)
        user = auth.authenticate(username=username, password=password)  # 用户认证
        if user is not None:  # 如果数据库里有记录（即与数据库里的数据相匹配或者对应或者符合）
            # 以下语句，其实还是将以上获得认证的用户ID保存在SESSION中
            # 用于后面每个页面根据此SESSION里的ID，获取用户信息验证，并给auth中间件使用
            auth.login(request, user)  # 登陆成功
            # 用于以后在调用每个视图函数前，auth中间件会根据每次访问视图前请求所带的SEESION里面的ID，
            # 去数据库找用户对像，并将对象保存在request.user属性中
            # 中间件执行完后，再执行视图函数
            return redirect('../testhomepage/')  # 跳转--redirect指从一个旧的url转到一个新的url
        else:  # 数据库里不存在与之对应的数据
            return redirect('/login/')  # 注册失败
    else:
        return render(request, 'login.html')  # 必须是post方法才能访问后续的页面，否则返回主页


'''
创建用户，即注册,预留此功能
def register(request):
    from django.contrib.auth.models import User
    User.objects.create_user(username='alex',password='alex1234')
    return HttpResponse('o98k')
'''

上面就是一个登陆的功能，很简单。

2、下面是几个静态页面的代码，图片就不传，防止信息安全违规。。。
1）index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="Mark">

    <title>Homepage</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static 'bootstrap/css/jumbotron.css' %}" rel="stylesheet">
    <link href="{% static 'bootstrap/css/signin.css' %}" rel="stylesheet">

</head>

<body style="overflow-y: hidden">
<!-- 首行的sign in功能区 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header" style="position: absolute; left: 200px;">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="color: #b92c28;">
                Architecture Design and Integrated Verification_IAS BU</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

            {% if user.is_authenticated %}
                <form action="/index/" method="POST" class="navbar-form navbar-right">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" placeholder="{{ user.username }}" class="form-control"
                               style="color: black" name="accounts">
                    </div>
                    <div class="form-group">
                    </div>
                    <button type="submit" class="btn btn-danger">Press to Logout</button>
                </form>

                <div class="navbar-form navbar-right" style="position: absolute; right: 250px;">
                    <a href="../testhomepage/">
                        <button type="button" class="btn btn-danger">Enter TestPage</button>
                    </a>
                </div>

            {% else %}
                <form action="/login/" method="POST" class="navbar-form navbar-right">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" placeholder="account" class="form-control" name="accounts" required>
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="Password" class="form-control" name="password" required>
                    </div>
                    <button type="submit" class="btn btn-danger">Press to login</button>
                </form>
            {% endif %}

        </div><!--/.navbar-collapse -->
    </div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" style="height: 920px;  background-repeat: no-repeat; background-size: 100% ;
        background-image: url({% static 'resource/picture/Homepage01-01.JPG' %}) ">

    <div style="position:absolute; left: 150px; top:100px; border:#000 solid 0px;">
        <img class="img-responsive align-left"
             src="{% static 'resource/picture/HW_POS_RBG_Vertical-300ppi.png' %}" width="15%" height="15%"/>
    </div>

</div>

<div class="content pure-u-1 pure-u-md-3-4">
    <div>

        {% block content %}
        {% endblock %}

    </div>
</div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'jquery-3.4.1.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>


</body>
</html>

2）NotLoginPage.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="Mark">

    <title>您尚未登录</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static 'bootstrap/css/jumbotron.css' %}" rel="stylesheet">
    <link href="{% static 'bootstrap/css/signin.css' %}" rel="stylesheet">
  </head>

  <body>
    <!-- 首行的功能区,预留占位信息，后续在不同的页面进行添加 -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header" style="position: absolute; left: 200px;">
            {% block Titleword %}
                ...
            {% endblock %}
        </div>
        <div id="navbar" class="navbar-collapse collapse">
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron" style="size: auto; background-repeat: no-repeat; background-size: 100% ;
        background-image: url({% static 'resource/loginIMG/TopIMG.jpg' %}) ">
      <div class="container">

          <div class="container">
            <div>

                {% block Tipword %}
                    <h1 style="color: #d43f3a;">您尚未登录，请先登录！</h1>
                    <h3 style="color: #d43f3a;">若您从未登录过，请联系管理员添加账户！</h3>
                    <hr style="background-color: #9acfea">
                    <a href="/index/">
                    <button type="button" class="btn btn-danger">Press to Homepage</button>
                    </a>
                {% endblock %}

            </div>
          </div>

      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">

      </div>

      <hr style="background-color: #d43f3a">

      <footer>
          <p><h3>&copy; ————————————————————</h3></p>
      </footer>
    </div>




        <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{% static 'jquery-3.4.1.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>

  </body>
</html>

Burning__M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始开发一个语音交互测试站点（三）

这篇记录一下主页面的开发过程：由于采用了django的框架，所以admin管理、用户管理不需要自己搞了，后续可以将admin升级为xadmin，有时间再说。Login_and_account的开发，直接上代码。1、视图views.pyfrom django.shortcuts import render, redirectfrom django.contrib import authf...
复制链接

扫一扫