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>

查看全文

相关阅读:
jquery 序列化form表单
 nginx for windows 安装
 nodejs idea 创建项目（一）
spring 配置 shiro rememberMe
idea 2018 解决双击shift 弹出 search everywhere 搜索框的方法
 redis 在windows 集群
 spring IOC控制反转和DI依赖注入
 redis 的安装
 shiro 通过jdbc连接数据库
 handlebars的用法

原文地址：https://www.cnblogs.com/lzqrkn/p/9982325.html