Tag

Tag

关注
发信
关注(28)粉丝(399)

4 . GET方法实现文章分类

复习：博客站点

<!DOCTYPE html>

{% load staticfiles %}

<html>

    <head>

        <meta charset="utf-8">

        <title>first web</title>

        <link rel="stylesheet" href="{% static 'css/semantic.css'%}" media="screen" title="no title" charset="utf-8">

        <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">

        <style type="text/css">

            /*封面图部分样式如下*/

            .ui.vertical.segment.masthead {

            height: 300px;

            background: url("{% static 'images/star_banner.jpg'%}");

            background-size: cover;

            background-position: 100% 80%;

            }

            .ui.center.aligned.header.blogslogon {

                margin-top: 40px;

            }

            .ui.center.aligned.header.blogslogon p {

                margin-top: 10px;

                color: white;

                font-size: 10px;

            }

            /*菜单栏部分样式如下*/

            .ui.container.nav {

                width: 500px;

            }

            /*菜单栏部分样式如下*/

            .ui.container.vertical.segment {

                width: 800px;

            }

            h2 {

                font-family:'Oswald', sans-serif!important;

                font-size:40px;

            }

            p {

                font-family: 'Raleway', sans-serif;

                font-size:18px;

            }

        </style>

    </head>

    <body>

        <!-- 封面图部分如下 -->

        <div class="ui inverted vertical segment masthead">

            <h1 class="ui center aligned header blogslogon" style="font-size:50px;font-family: 'Raleway', sans-serif!important;">

                Bloger

                <p class="ui sub header">

                    everyone has a story to tell

                </p>

            </h1>

        </div>

        <!-- 菜单栏部分如下 -->

        <div class="ui container nav">

            <div class="ui borderless text three item menu ">

                <div class="ui simple dropdown  item">

                    Categories

                    <i class="dropdown icon"></i>

                    <div class="menu">

                        <a class="item" href="">life</a>

                        <a class="item" href="">tech</a>

                    </div>

                </div>

                <a class="item">

                    Popular

                </a>

                <a class="item">

                    About

                </a>

            </div>

        </div>

        <div class="ui divider"></div>

        <!-- 文章内容部分如下 -->

        <div class="ui  vertical segment">

          {% for article in article_list%}

            <div class="ui container vertical segment">

                <a href="#">

                    <h2 class="ui header">

                        {{ article.headline }}

                    </h2>

                </a>

                <i class="icon grey small unhide">10,000</i>

                <p>

                    {{ article.content|truncatewords:100 }}

                    <a href="#">

                        <i class="angle tiny double grey right icon">READMORE</i>

                    </a>

                </p>

                <div class="ui mini tag label">

                    life

                </div>

            </div>

          {% endfor %}

        </div>

        <!-- 页尾部分如下 -->

        <div class="ui inverted  vertical very padded  segment">

            Mugglecoding®

        </div>

    </body>

</html>

4 . GET方法实现文章分类-LMLPHP

1.GET方法传递参数

4 . GET方法实现文章分类-LMLPHP    4 . GET方法实现文章分类-LMLPHP   4 . GET方法实现文章分类-LMLPHP  4 . GET方法实现文章分类-LMLPHP

2.开发过程的三个问题（从后向前思考）

  1. Model层：需要多少个数据字段

  2. View层：根据什么请求，返回什么结果

  3. Template层：如何与用户进行交互？

4 . GET方法实现文章分类-LMLPHP

（2）开发流程

  • T  需要看到数据的网页

  • M 做数据

  • V 视图模型

  • U url地址

  • T 调整网页

4 . GET方法实现文章分类-LMLPHP

4 . GET方法实现文章分类-LMLPHP

1.Model层

4 . GET方法实现文章分类-LMLPHP

　　（1）添加tag标签

  • choices 选项

　　　　　　   4 . GET方法实现文章分类-LMLPHP  4 . GET方法实现文章分类-LMLPHP

    TAG_CHOICES = (

        ('tech','Tech'),      #值：名字

        ('life','Life'),

        )

    tag = models.CharField(null=True,blank=True,max_length=5, choices=TAG_CHOICES)

　4 . GET方法实现文章分类-LMLPHP

　　（2）更新数据库到后台

PS C:\Users\Administrator\Desktop\root\firstsite> python.exe .\manage.py makemigrations

PS C:\Users\Administrator\Desktop\root\firstsite> python.exe .\manage.py migrate

PS C:\Users\Administrator\Desktop\root\firstsite> python.exe .\manage.py runserver

　　

　　（3）启动服务器，后台查看tag标签

　　　　　4 . GET方法实现文章分类-LMLPHP

　　

2. View层

4 . GET方法实现文章分类-LMLPHP

（1）认识request请求参数？

　　　　4 . GET方法实现文章分类-LMLPHP

　　　　4 . GET方法实现文章分类-LMLPHP

　　　　（2）通过GET方法获取tag对应的值

　　　　4 . GET方法实现文章分类-LMLPHP

　　　　4 . GET方法实现文章分类-LMLPHP

　　　　4 . GET方法实现文章分类-LMLPHP

　　（3）判断request请求，通过Get方法得到的数据，进行判断

　　　　4 . GET方法实现文章分类-LMLPHP

  • http://127.0.0.1:8000/index/?tag=tech

　　　　　4 . GET方法实现文章分类-LMLPHP

　　4 . GET方法实现文章分类-LMLPHP

  • http://127.0.0.1:8000/index/?tag=life

　　　　4 . GET方法实现文章分类-LMLPHP

　　　　4 . GET方法实现文章分类-LMLPHP

　　（4）views.py的index视图代码

def index(request):

    print(request)

    print("==="*30)

    print(dir(request))

    print("==="*30)

    print(type(request))

    queryset = request.GET.get('tag')

    print(queryset)

    if queryset:

        article_list = Aritcle.objects.filter(tag=queryset)  #过滤器

    else:

        article_list = Aritcle.objects.all()  #获取Article数据库所有的数据

    context = {}

    context['article_list'] = article_list

    index_page = render(request,'firstweb.html',context)

    return index_page

　　

3.Template层：如何与用户交互？

4 . GET方法实现文章分类-LMLPHP

　　（1）a标签跳转url

4 . GET方法实现文章分类-LMLPHP

4 . GET方法实现文章分类-LMLPHP

　　（2）小修改：模板变量

　　　　4 . GET方法实现文章分类-LMLPHP

　　　　4 . GET方法实现文章分类-LMLPHP

　　　　（3） html代码

  <!DOCTYPE html>

  {% load staticfiles %}

  <html>

      <head>

          <meta charset="utf-8">

          <title>first web</title>

          <link rel="stylesheet" href="{% static 'css/semantic.css'%}" media="screen" title="no title" charset="utf-8">

          <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">

          <style type="text/css">

              /*封面图部分样式如下*/

              .ui.vertical.segment.masthead {

              height: 300px;

              background: url("{% static 'images/star_banner.jpg'%}");

              background-size: cover;

              background-position: 100% 80%;

              }

              .ui.center.aligned.header.blogslogon {

                  margin-top: 40px;

              }

              .ui.center.aligned.header.blogslogon p {

                  margin-top: 10px;

                  color: white;

                  font-size: 10px;

              }

              /*菜单栏部分样式如下*/

              .ui.container.nav {

                  width: 500px;

              }

              /*菜单栏部分样式如下*/

              .ui.container.vertical.segment {

                  width: 800px;

              }

              h2 {

                  font-family:'Oswald', sans-serif!important;

                  font-size:40px;

              }

              p {

                  font-family: 'Raleway', sans-serif;

                  font-size:18px;

              }

          </style>

      </head>

      <body>

          <!-- 封面图部分如下 -->

          <div class="ui inverted vertical segment masthead">

              <h1 class="ui center aligned header blogslogon" style="font-size:50px;font-family: 'Raleway', sans-serif!important;">

                  Bloger

                  <p class="ui sub header">

                      everyone has a story to tell

                  </p>

              </h1>

          </div>

          <!-- 菜单栏部分如下 -->

          <div class="ui container nav">

              <div class="ui borderless text three item menu ">

                  <div class="ui simple dropdown  item">

                      Categories

                      <i class="dropdown icon"></i>

                      <div class="menu">

                          <a class="item" href="?tag=life">life</a>

                          <a class="item" href="?tag=tech">tech</a>

                      </div>

                  </div>

                  <a class="item">

                      Popular

                  </a>

                  <a class="item">

                      About

                  </a>

              </div>

          </div>

          <div class="ui divider"></div>

          <!-- 文章内容部分如下 -->

          <div class="ui  vertical segment">

            {% for article in article_list%}

              <div class="ui container vertical segment">

                  <a href="#">

                      <h2 class="ui header">

                          {{ article.headline }}

                      </h2>

                  </a>

                  <i class="icon grey small unhide">10,000</i>

                  <p>

                      {{ article.content|truncatewords:100 }}

                      <a href="#">

                          <i class="angle tiny double grey right icon">READMORE</i>

                      </a>

                  </p>

                  <div class="ui mini tag label">

                      {{ article.tag }}

                  </div>

              </div>

            {% endfor %}

          </div>

          <!-- 页尾部分如下 -->

          <div class="ui inverted  vertical very padded  segment">

              Mugglecoding®

          </div>

      </body>

  </html>
05-28 20:38
Powered by LMLPHP ©2024 Tag 0.057650