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{

            width: 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>


												


																

最新文章
	

    
						
  1. Vue 入门指南
		
    2. 
						
  2. OpenCV2.3.1在Win7+VS2010下的配置过程(转)
		
    3. 
						
  3. ACM/ICPC 之 BFS(离线)+康拓展开(TSH OJ-玩具(Toy))
		
    4. 
						
  4. WWDC2015 结束.新一波更新以及bug即将来袭.
		
    5. 
						
  5. HTTP 错误 500.21 - Internal Server Error 处理程序“PageHandlerFactory-Integr
		
    6. 
						
  6. java面试（毕业一年后准备换工作）
		
    7. 
						
  7. –save与–save-dev
		
    8. 
						
  8. HTML5学习笔记&lt;四&gt;: 列表, 块和布局
		
    9. 
						
  9. Android相机是如何获取到图像的
		
    10. 
						
  10. [asp.net mvc 奇淫巧技] 04 - 你真的会用Action的模型绑定吗？
		
    11. 
						
  11. CentOS7的一些初始化
		
    12. 
						
  12. 2.基于梯度的攻击——FGSM
		
    13. 
						
  13. leetcode 103
		
    14. 
						
  14. js 控制超出字数显示省略号
		
    15. 
						
  15. 快速搭建ELK日志分析系统
		
    16. 
						
  16. invalid mode &#39;kCFRunLoopCommonModes&#39; provided to CFRunLoopRunSpecific
		
    17. 
						
  17. day35-python 操作memcache二
		
    18. 
						
  18. 说说CDN
		
    19. 
						
  19. 并行动画组QParallelAnimationGroup
		
    20. 
						
  20. Jmeter录制浏览器并回放
		
    21. 
		

	


热门文章
	

    
									
  1. HTML相关知识和经验的碎片化记录
			
    2. 
						
  2. Mysql--基本配置
			
    3. 
						
  3. C++笔记--函数
			
    4. 
						
  4. Mysql 大数据量导入程序
			
    5. 
						
  5. 企业建立私有云的N个理由
			
    6. 
						
  6. 与HDFS交互- By  java API编程
			
    7. 
						
  7. 1、OpenCV Python 图像加载和保存
			
    8. 
						
  8. loj#115. 无源汇有上下界可行流
			
    9. 
						
  9. 使用RestTemplate时报错java.lang.IllegalStateException: No instances available for 127.0.0.1
			
    10. 
						
  10. C语言把字符串转换为数字
			
    11.