zoukankan      html  css  js  c++  java
  • Django重新整理

    1.母版的继承

    #base
    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> {% block title %} <title>Title</title> {% endblock %} <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> *{ margin: 0; padding: 0; } .header{ 100%; height: 50px; background-color: #369; } </style> </head> <body> <div class="header"></div> <div class="container"> <div class="row"> <div class="col-md-3"> {% block menu %} <div class="panel panel-success"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> <p><a href="/index/">首页</a></p> <p><a href="/order/">订单</a></p> <p> <a href="/shopping_list/">商品列表</a></p> </div> </div> {% endblock %} </div> <div class="col-md-9">
    #注意 定义一个盒子:关键字:block 必须是这个字!!!后边加自己起的名字
    #{%block content%} {
    % block content %} <h3>welcome!</h3> {% endblock content%} </div> </div> </div> </body> </html>



    #index,html
    #必须是 extends 这个关键字 ,后边跟着继承的哪个页面
    #{%extends "base.html"%}
    {% extends "base.html" %}

    {% block content %}
    {{ block.super }}

    <div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
    {% endblock %}


    {% block title %}
    <title>首页</title>
    {% endblock %}


    2.orm小的项目整理

    2.1新建的项目里先生成表

    #models
    
    class Book(models.Model):
        nid=models.AutoField(primary_key=True)
        title=models.CharField(max_length=32)
        price=models.DecimalField(max_digits=8,decimal_places=2) # 999999.99
        pub_date=models.DateTimeField()  # "2012-12-12"
        publish=models.ForeignKey(to="Publish",on_delete=models.CASCADE)  # 级联删除
        authors=models.ManyToManyField(to="Author")
        def __str__(self):
            return self.title
    
    
    class Publish(models.Model):
        nid = models.AutoField(primary_key=True)
        name=models.CharField(max_length=32)
        email=models.CharField(max_length=32)
        def __str__(self):
            return self.name
    
    class Author(models.Model):
        nid = models.AutoField(primary_key=True)
        name=models.CharField(max_length=32)
        age=models.IntegerField()
        email=models.CharField(max_length=32)
        ad=models.OneToOneField(to="AuthorDetail",on_delete=models.CASCADE)
        def __str__(self):
            return self.name
    
    class AuthorDetail(models.Model):
        addr=models.CharField(max_length=32)
        tel=models.IntegerField()
        #author=models.OneToOneField("Author",on_delete=models.CASCADE)
        def __str__(self):
            return self.addr

    2.2进行数据库的迁移

    2.3添加表里的数据,先从从表里添加数据,再从主表里添加数据,或者直接粗暴的在数据库里添加

    2.4分配路由,写视图函数

    #urls
    from django.contrib import admin
    from django.urls import path,re_path
    
    from app01 import views
    
    urlpatterns = [
        path('admin/', admin.site.urls),
       path("books/",views.book_view),
        re_path("^$",views.book_view),
        path("books/add/",views.book_add),
        re_path("^books/edit/(?P<edit_book_id>d+)$",views.book_edit),
        re_path("^books/delete/(?P<del_book_id>d+)$",views.book_del),
    ]

    2.5函数

    def book_view(request):
        book_list=Book.objects.all()
        return render(request,"book_view.html",{"book_list":book_list})
    
    def book_add(request):
        if request.method=="GET":
            publish_list=Publish.objects.all()
            author_list=Author.objects.all()
            return render(request,"book_add.html",{"publish_list":publish_list,"author_list":author_list})
        else:
            title=request.POST.get("title")
            price=request.POST.get("price")
            pub_date=request.POST.get("pub_date")
            publish_id=request.POST.get("publish_id")
            authors=request.POST.getlist("authors")
            print(request.POST)
            print(authors)
    
            book=Book.objects.create(title=title,price=price,pub_date=pub_date,publish_id=publish_id)
            book.authors.add(*authors)
            return redirect("/books/")
    
    def book_edit(request,edit_book_id):
        edit_book = Book.objects.filter(pk=edit_book_id).first()
        if request.method=="GET":
            publish_list = Publish.objects.all()
            author_list = Author.objects.all()
            return render(request,"book_edit.html",{"edit_book":edit_book,"publish_list":publish_list,"author_list":author_list})
    
        else:
            title = request.POST.get("title")
            price = request.POST.get("price")
            pub_date = request.POST.get("pub_date")
            publish_id = request.POST.get("publish_id")
            authors = request.POST.getlist("authors")
            print(request.POST)
            print(authors)
            Book.objects.filter(pk=edit_book_id).update(title=title,price=price,pub_date=pub_date,publish_id=publish_id)
            edit_book.authors.set(authors)
    
            return redirect("/books/")
    
    
    
    
    def book_del(request,del_book_id):
        Book.objects.filter(pk=del_book_id).delete()
        return redirect("/books/")

    2.6 tmplates

    #book_add.html
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
              integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    </head>
    <body>
    
    <h3>添加书籍</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form action="" method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="title">书籍名称</label>
                        <input class="form-control" type="text" name="title" id="title">
                    </div>
                    <div class="form-group">
                        <label for="price">价格</label>
                        <input class="form-control" type="text" name="price" id="price">
                    </div>
                    <div class="form-group">
                        <label for="pub_date">出版日期</label>
                        <input class="form-control" type="date" name="pub_date" id="pub_date">
                    </div>
                    <div class="form-group">
                        <label for="pub_date">出版社</label>
                        <select name="publish_id" id="" class="form-control">
                            {% for publish in publish_list %}
                                <option value="{{ publish.pk }}">{{ publish.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
    
                    <div class="form-group">
                        <label for="pub_date">作者</label>
                        <select name="authors" id="" class="form-control" multiple>
                            {% for author in author_list %}
                                <option value="{{ author.pk }}">{{ author.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
    
                    <input type="submit" value="提交" class="btn btn-default pull-right">
    
                </form>
    
    
            </div>
        </div>
    </div>
    
    
    
    </body>
    </html>
    
    
    
    
    #book_edit.html
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
              integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    </head>
    <body>
    
    <h3>编辑书籍</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form action="" method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="title">书籍名称</label>
                        <input class="form-control" value="{{ edit_book.title }}" type="text" name="title" id="title">
                    </div>
                    <div class="form-group">
                        <label for="price">价格</label>
                        <input class="form-control" value="{{ edit_book.price }}" type="text" name="price" id="price">
                    </div>
                    <div class="form-group">
                        <label for="pub_date">出版日期</label>
                        <input class="form-control" value="{{ edit_book.pub_date|date:'Y-m-d' }}" type="date" name="pub_date" id="pub_date">
                    </div>
                    <div class="form-group">
                        <label for="pub_date">出版社</label>
                        <select name="publish_id" id="" class="form-control">
                            {% for publish in publish_list %}
                                {% if edit_book.publish == publish %}
                                     <option selected  value="{{ publish.pk }}">{{ publish.name }}</option>
                                {% else %}
                                     <option  value="{{ publish.pk }}">{{ publish.name }}</option>
                                {% endif %}
                            {% endfor %}
    
                        </select>
                    </div>
    
                    <div class="form-group">
                        <label for="pub_date">作者</label>
                        <select name="authors" id="" class="form-control" multiple>
                            {% for author in author_list %}
                                {% if author in edit_book.authors.all %}
                                   <option selected value="{{ author.pk }}">{{ author.name }}</option>
                                {% else %}
                                   <option value="{{ author.pk }}">{{ author.name }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
    
                    <input type="submit" value="提交" class="btn btn-default pull-right">
    
                </form>
    
    
            </div>
        </div>
    </div>
    
    </body>
    </html>
    
    
    #book_view.html
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    </head>
    <body>
    
    <h3>查看书籍</h3>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <a href="/books/add/" class="btn btn-primary">添加书籍</a>
                 <table class="table table-bordered table-hover table-striped">
                      <thead>
                            <tr>
                                 <th>编号</th>
                                 <th>书籍名称</th>
                                 <th>价格</th>
                                 <th>出版日期</th>
                                 <th>出版社</th>
                                 <th>作者</th>
                                 <th>操作</th>
                            </tr>
                      </thead>
                     <tbody>
                           {% for book in book_list %}
                           <tr>
                               <td>{{ forloop.counter }}</td>
                               <td>{{ book.title }}</td>
                               <td>{{ book.price }}</td>
                               <td>{{ book.pub_date|date:"Y-m-d" }}</td>
                               <td>{{ book.publish.name }}</td>
                               <td>
                                   {% for author in book.authors.all %}
                                   <span>{{ author.name }}</span>
                                   {% if not forloop.last %}
                                   ,
                                   {% endif %}
                                   {% endfor %}
    
                               </td>
    
                               <td>
                                   <a href="/books/delete/{{ book.pk }}" class="btn btn-danger btn-sm">删除</a>
                                   <a href="/books/edit/{{ book.pk }}" class="btn btn-warning btn-sm">编辑</a>
                               </td>
                           </tr>
    
                           {% endfor %}
    
                     </tbody>
                 </table>
            </div>
        </div>
    </div>
    <script src="/static/js/jquery.js"></script>
    <script>
        $("h3").click(function () {
            $(this).css("color","green")
        })
    </script>
    </body>
    </html>

     3json模块

    3.1json其实就是一个模块,把字符串类型的转换成我们想要的数据类型

    d = {"name":"alex"}
    print(type(d))
    #<class 'dict'>
    
    s = json.dumps(d)
    print(type(s))
    #<class 'str'>
    
    #注意:json中的dumps是把其他数据类型转换成字符串数据类型
    #注意:json中的loads是把字符串数据类型转换成原有的数据类型

    4.AJAX

    4.1利用Ajax请求进行简单的求和(没有动态传参的Ajax)

    #urls
        path('index/', views.index),
    #views中
    def index(request):
        return render(request,"index.html")
    
    #templayes中
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/jquery-3.3.js"></script>
    </head>
    <body>
    
    <h4>INDEX页面</h4>
    <button class="btn">提交Ajax</button>
    <p class="show"></p>
    <hr>
    {% csrf_token %}
    <input type="text" id="num1"> + <input id="num2" type="text"> = <input id="ret" type="text"><button class="cal">计算</button>
    
    <script>
    //  传参Ajax请求

    $(".cal").click(function () {

    var num1=$("#num1").val();
    var num2=$("#num2").val();

    $.ajax({
    #返回的地址
    url:"/cal/",
    type:"post",
    data:{
    num1:num1,
    num2:num2,
    csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()

    },
    success:function (response) {
    console.log(response);
    $("#ret").val(response)
    }

    })


    })
    </script> </body> </html>


    #urls
    path('cal/', views.cal),

    #views中
    def cal(request):
    num1=request.POST.get("num1")
    num2=request.POST.get("num2")
    ret=int(num1)+int(num2)
    return HttpResponse(str(ret))

    4.2利用Ajax进行登录

    4.2.1分配路由写视图函数

    def login(request):
        if request.method == "POST":
            res={"user":None,"error":""}
            user=request.POST.get("user")
            pwd=request.POST.get("pwd")
    
            user_obj=UserInfo.objects.filter(user=user,pwd=pwd).first()
            if user_obj:
                res["user"]=user
            else:
                res["error"]="用户名或者密码错误!"
            return HttpResponse(json.dumps(res))
    
        else:
            return render(reqeust,"login.html")    


    #templades中
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/jquery-3.3.js"></script>

    </head>
    <body>


    <form>
    用户名 <input type="text" id="user">
    密码 <input type="password" id="pwd">
    <input type="button" value="提交" id="login_btn"><span class="error"></span>
    {% csrf_token %}

    </form>


    <script>

    $("#login_btn").click(function () {


    // 发送Ajax请求登录认证

    $.ajax({
    url:"/login/",
    type:"post",
    data:{
    #date是客户端往服务器传过去的数据
    user:$("#user").val(),
    pwd:$("#pwd").val(),
    csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
    },
    success:function (response) {
    console.log(response); // json字符串
    var res=JSON.parse(response);
    console.log(res);
    if (res.user){
    // 登陆成功
    location.href="/index/"
    }else{
    // 登录失败
    $(".error").html(res.error).css("color","red");
    setTimeout(function () {
    $(".error").html("")
    },1000)
    }

    }
    })
    })

    </script>
    </body>
    </html>
  • 相关阅读:
    [apue] FIFO:不是文件的文件
    [apue] 等待子进程的那些事儿
    [apue] popen/pclose 疑点解惑
    [apue] 使用 popen/pclose 的一点疑问
    [apue] 使用 poll 检测管道断开
    [apue] dup2的正确打开方式
    [apue] 管道原子写入量的一个疑问
    [apue] 测试管道容量的一些疑问
    【新阁教育】再也不用担心我的PLC通信不上了
    【新阁教育】三菱PLC的这个功能,真的很强大
  • 原文地址:https://www.cnblogs.com/lzqrkn/p/9982325.html
Copyright © 2011-2022 走看看