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