zoukankan      html  css  js  c++  java
  • Python学习22

    python-创建school的简单django项目、完成school项目(index首页、add添加学生、dels删除学生、updates修改学生信息)、创建static存放各类文件

    1、创建项目以及相关配置

    1、在cmd管理员界面中进入到存放项目的文件夹创建项目school
    在这里插入图片描述
    2、在Navicat中创建数据库school
    在这里插入图片描述

    3、在pycharm中的setting中编写代码连接数据库

    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'NAME': 'school',
            'USER': 'root',
            'PASSWORD': '1234',
            'HOST': '127.0.0.1',
        }
    }

    4、然后在pycharm的terminal中创建应用app1
    在这里插入图片描述

    5、在项目app1的视图views中编写index方法,编写路由,然后用浏览器访问到视图index

    • 编写index
    from django.shortcuts import render
    from django.http import HttpResponse
    
    
    def index(request):
        return HttpResponse('hello world!!!')
    • 到项目的setting中的INSTALLED_APPS添加应用app1,方便寻址
    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'app1',
    ]
    • 到应用app1中创建app1/urls.py文件,编写找到index的路由
    from django.urls import path
    from .views import *
    
    urlpatterns = [
        path('', index, name='index')
    ]
    • 再到项目school的urls编写路由,访问时可以找到应用app1的urls
    from django.contrib import admin
    from django.urls import path,include 
    
    urlpatterns = [    
    path('app1/',include('app1.urls')),    
    path('admin/', admin.site.urls),]
    • 访问创建的视图浏览器输入http://127.0.0.1:8000/app1/

    可以看见在视图views中编写的index返回的内容

    在这里插入图片描述
    6、在应用app1中的app1/models中编写类,向数据库mysql中提交生成表

    from django.db import models
    
    
    class Teacher(models.Model):
        tname = models.CharField(max_length=20)
        tage = models.IntegerField()
        tgender = models.CharField(max_length=2)
        
        def __str__(self):
        return self.tname
    
    
    class Student(models.Model):
        sname = models.CharField(max_length=20)
        sage = models.IntegerField()
        sgender = models.CharField(max_length=2)
        s_t = models.ForeignKey(Teacher, on_delete=models.CASCADE)
        
        def __str__(self):
        return self.tname
    • 提交步骤:python manage.py runserver——》python manage.py makemigrations——》python manage.py migrate
    • 向表格中添加数据
      在这里插入图片描述
      在这里插入图片描述

    2、完成models模板与视图views的编写

    1、创建templates

    • 在school项目下创建templates文件夹,并完成相关配置
      在这里插入图片描述

    2、编写index首页

    • 在app1/templates中创建index.html文件

    展示首页样式
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <table border="1" bgcolor="#8fbc8f">
        <tr><td>学生姓名</td><td>学生年龄</td><td>学生性别</td><td>学生老师</td><td>操作</td></tr>
        {%for i in student%}
        <tr><td>{{i.sname}}</td><td>{{i.sage}}</td><td>{{i.sgender}}</td><td>{{i.s_t.tname}}</td><td><a href="{%url 'dels' i.id%}">删除</a>  <a href="{% url 'updates' i.id%}">修改</a></td></tr>   
        {% endfor %}
    </table>
    <a href="{% url 'add' %}"><input type="button" value="添加"></a>
    </body>
    </html>

    2、编写add操作

    在index页面的下面有个add操作,在templates中添加add.html文件,在子路由app1/urls.py中添加add路由,在视图views添加add方法,在index页面中写入添加操作

    • 当在index页面选择add时
      在这里插入图片描述
    • 当添加成功时
      在这里插入图片描述
    • 在templates中添加add.html文件并编写内容
    • {% csrf_token %}(防止跨域访问攻击):在 HTTP 请求中以参数的形式加入一个随机产生的 token,并在服务器端建立一个拦截器来验证这个token,如果请求中没有 token 或者 token 内容不正确,则认为可能是CSRF攻击而拒绝该请求
    • <div style="clear: both"></div>:清bai除同行元素,不允许其它元du素与之在一行内
    • 在创建返回摁钮时用input添加button属性:<input type="button" class="bt" value="返回">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>添加学生</title>
        <style type="text/css">
            * {
                font-size: 12px;
                margin: 0;
                padding: 0;
            }
    	input {
                width: 320px;
                height: 24px;
                border: 1px solid #999;
                border-radius: 4px;
            }
    	
    	.formErr {
                border: 1px solid #ff0000;
            }
    	
    	.form .label {
                display: block;
                float: left;
                width: 128px;
                height: 40px;
                line-height: 40px;
                text-align: end;
            }
    
    	form .txt {
                display: block;
                float: left;
                width: 340px;
                height: 40px;
                line-height: 40px;
                padding-left: 16px;
            }
    
    	bt {
                width: 56px;
                height: 24px;
                background-color: green;
                border: 0;
                border-radius: 4px;
                color: white;
            }
    
    	.form .errTips {
                width: 226px;
                background-color: lightgreen;
                color: darkred;
                border-radius: 4px;
                margin-left: 144px;
                margin-top: 6px;
                margin-bottom: 4px;
                padding: 16px 48px;
            }
        </style>
    </head>
    <body>
    <div class="form">
        <form action="{%url 'add'%}" method="post">
            {% csrf_token %}
        <div>
            <span class="label">学生姓名</span>
            <span class="txt"><input type="text" placeholder="6-20个字符" name='sname'/></span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">学生性别</span>
            <span class="txt">
                <select name="sgender">
                    <option value="男">男</option>
                <option value="女">女</option></select>
            </span>
        </div>
            <div style="clear: both"></div>
            <div>
            <span class="label">教师选择</span>
            <span class="txt">
                <select name="tid">
                    {% for t in teacher %}
                      <option value="{{t.id}}">{{ t.tname }}</option>
                    {% endfor %}
    	    </select>
            </span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">学生年龄</span>
            <span class="txt"><input type="text" placeholder="请输入年龄" name="sage"/></span>
        </div>
        <div style="clear: both"></div>
    
        {% if a %}
           <div class="errTips">
            <ul>
                <li>{{ a }}</li>
          </ul>
        </div>
    
        {% endif %}
        
    <div style="clear: both"></div>
        <div>
            <span class="label"></span>
            <span class="txt"><input type="submit" class="bt" value="提交">  <a href="{% url 'index' %}" ><input type="button" class="bt" value="返回"></a></span>
    
        </div>
        <div style="clear: both"></div>
            </form>
    </div>
    </body>
    </html>
    • 在app1/urls中添加路由
    from django.urls import path
    from .views import *
    
    urlpatterns = [
        path('', index, name='index'),
        path('add', add, name='add'),
    ]
    • 在视图app1/views中添加add方法
    def add(request):
        a = ''
        teacher = Teacher.objects.all()
        if request.POST:
           a = Student.objects.create( sname=request.POST['sname'], sgender=request.POST['sgender'], sage = request.POST['sage'], s_t_id=request.POST['tid'])
           if a:
                a='添加成功'
        return render(request,'add.html',{'teacher':teacher,'a':a})
    • 在index页面写入添加操作和页面的跳转
    ...
    <table border="1" bgcolor="#8fbc8f">
        <tr><td>学生姓名</td><td>学生年龄</td><td>学生性别</td><td>学生老师</td><td>相关操作</td></tr>
        {%for i in student%}
        <tr><td>{{i.sname}}</td><td>{{i.sage}}</td><td>{{i.sgender}}</td><td>{{i.s_t.tname}}</td><td><a href="{%url 'dels' i.id%}">删除</a>  <a href="{% url 'updates' i.id%}">修改</a></td></tr>
        {% endfor %}
    </table>
    <a href="{% url 'add' %}"><input type="button" value="添加"></a>
    </body>
    </html>

    3、编写dels操作

    • 在app1/views视图下添加dels方法
    from django.http import HttpResponse, HttpResponseRedirect
    ...
    def dels(request, sid):
        student = Student.objects.get(id=sid).delete()  
        return HttpResponseRedirect(reverse('index'))
    • 在test1/templates/index.html下的删除操作位置添加点击页面跳转,并传入i.id这个循环student表id的值到视图views中dels方法
    ...
    <table border="1" bgcolor="#8fbc8f">
        <tr><td>学生姓名</td><td>学生年龄</td><td>学生性别</td><td>学生老师</td><td>相关操作</td></tr>
        {%for i in student%}
        <tr><td>{{i.sname}}</td><td>{{i.sage}}</td><td>{{i.sgender}}</td><td>{{i.s_t.tname}}</td><td><a href="{%url 'dels' i.id%}">删除</a>  <a href="{% url 'updates' i.id%}">修改</a></td></tr>
        {% endfor %}
    </table>
    <a href="{% url 'add' %}"><input type="button" value="添加"></a>
    </body>
    </html>
    • 到test1子路由中添加add的路由
    ...
    urlpatterns = [
        path('', index, name='index'),
        path('add', add, name='add'),
        path('dels/<int:sid>', dels, name='dels'),
        path('updates/<int:sid>', updates, name='updates'),
    ]

    4、编写修改操作

    • 在app1/views视图下添加updates方法
     def updates(request, sid):
        b = ''
        if request.POST:
         b = Student.objects.filter(id=sid).update(sname=request.POST['sname'], sgender=request.POST['sgender'], sage=request.POST['sage'], s_t_id=request.POST['jid'])
        if b:
            b = '修改成功'
        student = Student.objects.get(id=sid)
        teacher = Teacher.objects.all()
        return render(request, 'updates.html', {'teacher': teacher, 'student': student, 'sid': sid, 'b': b})
    • 在test1/templates/index.html下的修改操作位置添加点击页面跳转,并传入jid这个循环student表id的值到视图views中updates方法
    ...
     <table border="1" bgcolor="#8fbc8f">
        <tr><td>学生姓名</td><td>学生年龄</td><td>学生性别</td><td>学生老师</td><td>相关操作</td></tr>
        {%for i in student%}
        <tr><td>{{i.sname}}</td><td>{{i.sage}}</td><td>{{i.sgender}}</td><td>{{i.s_t.tname}}</td><td><a href="{%url 'dels' i.id%}">删除</a>  <a href="{% url 'updates' i.id%}">修改</a></td></tr>
        {% endfor %}
    </table>
    <a href="{% url 'add' %}"><input type="button" value="添加"></a>
    </body>
    </html>
    • 到test1子路由中添加updates的路由
    urlpatterns = [
       path('', index, name='index'),
       path('add', add, name='add'),
       path('dels/<int:sid>', dels, name='dels'),
       path('updates/<int:sid>', updates, name='updates'),
    ]
    • 在templates中添加updates.html文件并编写内容
     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>修改学生</title>
        <style type="text/css">
            * {
                font-size: 12px;
                margin: 0;
                padding: 0;
            }
    
    
            input {
                width: 320px;
                height: 24px;
                border: 1px solid #999;
                border-radius: 4px;
            }
    
    
            .formErr {
                border: 1px solid #ff0000;
            }
    
    
            .form .label {
                display: block;
                float: left;
                width: 128px;
                height: 40px;
                line-height: 40px;
                text-align: end;
            }
    
    
            .form .txt {
                display: block;
                float: left;
                width: 340px;
                height: 40px;
                line-height: 40px;
                padding-left: 16px;
            }
    
    
            .bt {
                width: 56px;
                height: 24px;
                background-color: green;
                border: 0;
                border-radius: 4px;
                color: white;
            }
    
    
            .form .errTips {
                width: 226px;
                background-color: lightgreen;
                color: darkred;
                border-radius: 4px;
                margin-left: 144px;
                margin-top: 6px;
                margin-bottom: 4px;
                padding: 16px 48px;
            }
        </style>
    </head>
    <body>
    <div class="form">
        <form action="{%url 'updates' sid%}" method="post">
            {% csrf_token %}
        <div>
            <span class="label">学生姓名</span>
            <span class="txt"><input type="text" placeholder="6-20个字符" name='sname' value="{{student.sname}}"/></span>
        </div>
            <div style="clear: both"></div>
        <div>
            <span class="label">学生年龄</span>
            <span class="txt"><input type="text" placeholder="请输入年龄" name="sage" value="{{student.sage}}"/></span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">学生性别</span>
            <span class="txt">
                <select name="sgender">
                {%if student.sgender == '男'%}
                    <option value="男" selected>男</option>
                    {% else %}
                    <option value="男">男</option>
                    {%endif%}
                    {%if student.sgender == '女'%}
                    <option value="女" selected>女</option>
                    {% else %}
                    <option value="女">女</option>
                    {%endif%}
                </select>
            </span>
        </div>
            <div style="clear: both"></div>
            <div>
            <span class="label">教师选择</span>
            <span class="txt">
                <select name="jid">
                    {% for j in teacher %}
                    {%if teacher.s_t_id == j.id%}
                    <option value="{{j.id}}" selected>{{ j.tname }}</option>
                    {% else %}
                    <option value="{{j.id}}">{{ j.tname }}</option>
                    {%endif%}
                    {% endfor %}
                </select>
            </span>
            </div>
        <div style="clear: both"></div>
            {% if b %}
           <div class="errTips">
            <ul>
                <li>{{ b }}</li>
            </ul>
        </div>
    
        {% endif %}
    
    
    
        <div style="clear: both"></div>
        <div>
            <span class="label"></span>
            <span class="txt"><input type="submit" class="bt" value="提交">  <a href="{% url 'index' %}" ><input type="button" class="bt" value="返回"></a></span>
    
        </div>
        <div style="clear: both"></div>
            </form>
    </div>
    </body>
    </html>

    3、创建static文件夹存放各类文件

    1、在项目school下创建一个static文件用来存放各种文件
    在这里插入图片描述

    2、将index首页的css样式存放到static

    • 在static创建一个css文件用来专门存放css文件,并里面创建编写了css内容的index.css文件
      在这里插入图片描述
    table tr
    {
    white-space: nowrap;
    background-color: #f5f5f5;
    height:30px;
    font-size:14px;
    font-weight:lighter; /*细*/
    
     text-align:right ! important
    
    }
    .chk
    {
    white-space: nowrap;
    text-overflow:ellipsis;/*省略*/
    }
    table td
    {
    /*word-break:keep-all;*/
    white-space:nowrap; /*不换行*/
    text-overflow:ellipsis;
        border: solid 1px #a0c6e5; height: 20px;
    }
    • 在项目setting中编写出static的路径
    STATIC_URL = '/static/'
    STATICFILES_DIRS=[(os.path.join(BASE_DIR,'static'))]
    • 最后在index.html应用static里面存放的css文件index.css
    ...
    <head>
          {% load static %}
         <meta charset="UTF-8">
         <title>Title</title>
        <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
    </head>
    ...
    • 将该css引用到index7

    在head标签中间加入两条语句

    <head>
          {% load static %}
         <meta charset="UTF-8">
         <title>Title</title>
        <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
    </head>

    3、编写一个使用ajax的页面demo.html,利用ajax提交form表单

    • 在school项目里面添加demo、ajax 的路由
      在这里插入图片描述

    • 在视图views中创建demo和ajax
      在这里插入图片描述

    • 在templates创建一个表单页面demo.html

    <input type="button" value="提交"onclick="func1()">:摁钮触发function函数,func1函数用data接收ajax传过来的值,并赋到id=m所在的位置

    <!DOCTYPE html>
    <html lang="en">
    <head>
        {% load static %}
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action='' method='post'>
    FirstName: <input type='text' name='FirstName' value='Ben'> <br/>
    LastName: <input type='text' name='LastName' value='Zhang'> <br/>
        <input type="button" value="提交" onclick="func1()">
    {% csrf_token %} <!-- django中form表单提交一定要记得加上 -->
    </form>
    <span id="m"></span>
    </body>
    </html>
    <script src="{%static 'js/jq.js'%}"></script>
    <script>
        $(document).ready(function(){
       console.log($('form').serialize());  // FirstName=Ben & LastName=Zhang & csrfmiddlewaretoken = xxx
    });
    function func1() {
    
        $.ajax({
        type: 'post',
        url: '{%url 'ajax'%}',
        data: $("form").serialize(),
        success: function(data) {
                $('#m').replaceWith(data)
        }
    });
    }
    </script>
  • 相关阅读:
    数据库设计主键定义思考
    dotnet(C#)的面试题,大家共享一下
    一些有创意的SQL语句
    asp.net(c#) 服务器探针
    存储过程共有三种返回值
    如何删除表中的重复记录?等等常用SQL语句的积累
    一般存储过程示例
    关于utf8,unicode字符集
    在Asp.net里利用DIV层元素弹出窗体
    数据库主键设计思考
  • 原文地址:https://www.cnblogs.com/tangmf/p/14267943.html
Copyright © 2011-2022 走看看