天天看点

Django/数据库 实现注册及信息录入Django环境配置创建register APP文件绑定视图与url

Django环境配置

pycharm下创建Django项目

进入虚拟环境在linux,osx跟win下有所不同具体方式可以百度查找

创建register APP文件

虚拟环境在终端中输入

python manage.py startapp register

可以看见在文件中出现了register文件夹

#注册界面的表单

  • 在templates文件下创建register.html

    写入

{% load staticfiles %}
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>五四演讲报名表</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest" target="_blank" rel="external nofollow" >
        <link rel="apple-touch-icon" href="icon.png" target="_blank" rel="external nofollow" >
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="{% static 'css/normalize.css' %}" target="_blank" rel="external nofollow" >
        <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css" target="_blank" rel="external nofollow" >
        <link rel="stylesheet" href="{% static 'css/main.css' %}" target="_blank" rel="external nofollow" >
</head>
<body style="background: #f0faff">
<!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/" target="_blank" rel="external nofollow" >upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div class="content">
            <div class="list-block" style="margin-top: 0%">
                <img style="width: 100%" src="{% static 'img/timg.jpg' %}" alt="">
                <ul style="background: #f0faff">
    <form method = 'post' enctype="multipart/form-data">
        {% csrf_token %}
        <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-me"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">姓名</div>
                                <div class="item-input">
                                    <input type="text" name="Sname" placeholder="请输入您的姓名">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-card"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">学号</div>
                                <div class="item-input">
                                    <input type="text" name="Sid" placeholder="请输入您的学号">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-star"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">性别</div>
                                <div class="item-input">
                                    <select name="Sex">
                                        <option value="" selected>**请选择**</option>
                                        <option>男</option>
                                        <option>女</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-home"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">院系</div>
                                <div class="item-input">
                                    <select name="Department">
                                        <option value="" selected>**请选择**</option>
                                        <option>机械科学与工程学院</option>
                                        <option>计算机科学与技术学院</option>
                                        <option>生命科学与技术学院</option>
                                        <option>电气与电子工程学院</option>
                                        <option>材料科学与工程学院</option>
                                        <option>船舶与海洋工程学院</option>
                                        <option>能源与动力工程学院</option>
                                        <option>自动化学院</option>
                                        <option>光学与电子信息学院</option>
                                        <option>水电与数字化工程学院</option>
                                        <option>软件学院</option>
                                        <option>环境科学与工程学院</option>
                                        <option>电子信息与通信学院</option>
                                        <option>建筑与城市规划学院</option>
                                        <option>土木工程与力学学院</option>
                                        <option>化学与化工学院</option>
                                        <option>数学与统计学院</option>
                                        <option>物理学院</option>
                                        <option>公共管理学院</option>
                                        <option>经济学院</option>
                                        <option>管理学院</option>
                                        <option>人文学院</option>
                                        <option>新闻与信息传播学院</option>
                                        <option>马克思主义学院</option>
                                        <option>社会学院</option>
                                        <option>法学院</option>
                                        <option>外国语学院</option>
                                        <option>基础医学院</option>
                                        <option>药学院</option>
                                        <option>医药卫生管理学院</option>
                                        <option>公共卫生学院</option>
                                        <option>法医学系</option>
                                        <option>护理学院</option>
                                        <option>计划生育研究所</option>
                                        <option>第一临床学院</option>
                                        <option>第二临床学院</option>
                                        <option>第三临床学院</option>
                                        <option>远程与继续教育学院</option>
                                        <option>教育科学研究院</option>
                                        <option>中欧清洁与可再生能源学院</option>
                                        <option>体育部</option>
                                        <option>艺术教育中心</option>
                                        <option>武汉光电国家研究中心</option>
                                        <option>工程科学学院(国际化示范学院)</option>
                                        <option>武汉国际微电子学院</option>
                                        <option>航空航天学院</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-edit"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">专业班级</div>
                                <div class="item-input">
                                    <input type="text" name="Major_class" placeholder="请输入您的专业班级">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-phone"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">手机号码</div>
                                <div class="item-input">
                                    <input type="tel" name="Phone_number" placeholder="请输入您的手机号码">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-message"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">邮箱</div>
                                <div class="item-input">
                                    <input type="email" name="Email" placeholder="请输入您的邮箱地址">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="align-top">
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-comment"></i></div>
                            <div class="item-inner">
                                <div class="item-input">
                                    <textarea placeholder="参赛宣言" name="Declaration"></textarea>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="align-top">
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-comment"></i></div>
                            <div class="item-inner">
                                <div class="item-input">
                                    <textarea placeholder="个人简介" name="Resume"></textarea>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="align-top">
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-comment"></i></div>
                            <div class="item-inner">
                                <div class="item-input">
                                    <textarea placeholder="对于大赛主题的理解" name="Comprehension"></textarea>
                                </div>
                            </div>
                        </div>
                    </li>
        <div class="content-block">
                <div class="row">
                    <div class="col-50"><input type="submit" value="提交" class="button button-big button-fill button-success"></div>
                </div>
        </div>
        <!--<input type="submit" value = "ok" >-->
    </form>
                </ul>
        <script src="{% static 'js/vendor/modernizr-3.5.0.min.js' %}"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script>window.jQuery || document.write('<script src="{% static 'js/vendor/jquery-3.2.1.min.js' %}"><\/script>')</script>
        <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
        <script src="{% static 'js/plugins.js' %}"></script>
        <script src="{% static 'js/main.js' %}"></script>
</body>
</html>

           
  • 再在同一目录下创建一个success.html用于显示成功后的界面
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册成功</title>
</head>
<body>
    <h1>恭喜{{ Sname }},报名成功!</h1>
</body>
</html>

           
  • 引入静态文件

    在register目录下创建static然后下载在github中下载 css js img文件

    源码

    #创建模型

from django.db import models
from django.contrib import admin.  #引入库文件
class Participator(models.Model):

    Sname = models.CharField(max_length=10, blank=False)
    Sid = models.CharField(max_length=20, blank=False)
    Sex = models.CharField(max_length=4, blank=False)
    Department = models.CharField(max_length=100, blank=False)
    Major_class = models.CharField(max_length=100, blank=False)
    Phone_number = models.CharField(max_length=20, blank=False)
    Email = models.EmailField()
    Declaration = models.CharField(max_length=200, blank=False)
    Resume = models.CharField(max_length=100, blank=False)
    Comprehension = models.CharField(max_length=100, blank=False)

#定义数据库字段

    def __str__(self):
       return self.Name

class ParticipatorAdmin(admin.ModelAdmin):
 list_display = ('Sname','Department','Sid','Sex','Major_class','Email','Phone_number','Declaration','Resume','Comprehension')
admin.site.register(Participator,ParticipatorAdmin)##在Django后台admin管理界面显示Participator数据
           

#在app.py写入app定义

from django.apps import AppConfig
class RegisterConfig(AppConfig):
    name = 'register'
           

#写入视图函数

在register/views.py中写入

from django.shortcuts import render,render_to_response
from django import forms
from django.http import HttpResponse,HttpResponseRedirect
from django.template import RequestContext
from register.models import Participator

# Create your views here.
#自定义表单模型
class ParticipatorForm(forms.Form):
    Sname = forms.CharField(label = '姓名:',max_length = 10)
    Sid = forms.CharField(label = '学号:',max_length=20)
    Email = forms.EmailField(label = '邮箱:')
    Sex = forms.CharField(label='性别:',max_length=4)
    Department = forms.CharField(label='院系:',max_length=100)
    Major_class = forms.CharField(label='专业班级:',max_length=100)
    Phone_number = forms.CharField(label='手机号码:',max_length=20)
    Declaration = forms.CharField(label='参赛宣言:',max_length=200)
    Resume = forms.CharField(label='个人简介:',max_length=100)
    Comprehension = forms.CharField(label='主题理解:',max_length=100)

def register(request):
    if request.method == 'POST':
        pf = ParticipatorForm(request.POST)
        if pf.is_valid():
            #获取表单元素
            Sname = pf.cleaned_data['Sname']
            Sid = pf.cleaned_data['Sid']
            Email = pf.cleaned_data['Email']
            Sex = pf.cleaned_data['Sex']
            Phone_number = pf.cleaned_data['Phone_number']
            Department = pf.cleaned_data['Department']
            Declaration = pf.cleaned_data['Declaration']
            Major_class = pf.cleaned_data['Major_class']
            Resume = pf.cleaned_data['Resume']
            Comprehension = pf.cleaned_data['Comprehension']

            #将表单写入数据库
            user = Participator()
            user.Sname = Sname
            user.Sid = Sid
            user.Email = Email
            user.Declaration = Declaration
            user.Phone_number = Phone_number
            user.Sex = Sex
            user.Comprehension = Comprehension
            user.Major_class = Major_class
            user.Resume = Resume
            user.Department = Department
            user.save()
            #返回注册成功页面
            return render_to_response('success.html',{'Sname':Sname})
    else:
        pf = ParticipatorForm()
    return render_to_response('register.html',{'pf':pf})
           

绑定视图与url

在register中 创建urls.py

写入

from django.urls import path
from register import views

urlpatterns = [
    #http://127.0.0.1:8000/account/ 这两个url指向都是注册页面
    path('', views.register, name='register'),
    path('register/',views.register,name = 'register'),
]
           

#在主文件中加入url

打开主文件下的urls.py

写入

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('register/', include('register.urls')),
]
           

#在主文件中引入app

打开主文件下的settings.py

修改

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
           

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'register',
]
           

然后把middleware中

'django.middleware.csrf.CsrfViewMiddleware',

删除或者注释掉

#善后

  • 创建超级用户
python manage.py createsuperuser
           
  • 迁移数据库
python manage.py makemigrations
python manage.py migrate
           
  • 运行

    127.0.0.1:8000/register

#参考资料

CSDN

虫师的Django实现快速登录

github项目源码

  • 问题联系 邮箱 : [email protected]
  • 或者在评论中显示在github上提出issue