复习:博客站点

<!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>

1.GET方法传递参数

         

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

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

  2. View层:根据什么请求,返回什么结果

  3. Template层:如何与用户进行交互?

(2)开发流程

  • T  需要看到数据的网页

  • M 做数据

  • V 视图模型

  • U url地址

  • T 调整网页



1.Model层

  (1)添加tag标签

  • choices 选项

           

    TAG_CHOICES = (
('tech','Tech'), #值:名字
('life','Life'),
)
tag = models.CharField(null=True,blank=True,max_length=5, choices=TAG_CHOICES)

 

  (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标签

     

  

2. View层

(1)认识request请求参数?

    

    

    (2)通过GET方法获取tag对应的值

    

    

    

  (3)判断request请求,通过Get方法得到的数据,进行判断

    

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

     

  

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

    

    

  (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层:如何与用户交互?

  (1)a标签跳转url

  (2)小修改:模板变量

    

    

    (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>

4 . GET方法实现文章分类的更多相关文章

  1. ecshop不同的文章分类使用不同的模板的方法

    ecshop文章模板做的太简单,页面很丑,怎么才能实现不同的文章使用不同的模板呢,方法是有的,就是没有shopex那么方便,但还可以实现,只要能用就行. 1.打开article_cat.php文件,在 ...

  2. ECshop通过文章分类的ID实现不同模板

    当客户需要想要用不同模板来实现文章页面时,文章就需要实现调用不同模板的内容,着手点就是它的分类ID.直接通过分类ID来判断一下,现在68ecshop技术来告诉你该怎么做 方法如下所示: 一.打开根目录 ...

  3. 关于wordpress文章分类显示404错误的解决办法。

    闲来无事,在虚拟主机上装了一个wordpress尝试自己搭一个博客玩一下,发现文章分类一直显示404错误,网上查了好久,终于找到解决方法,其实很简单,只要将分类的别名改成英文的就解决了,分类中不能包含 ...

  4. ecshop不同文章分类调用不同文章分类模板

    根据需要,不同的文章分类会有不一样的页面风格.也就是说根据文章分类ID来判断,输出不同的文章分类模板. 重点就是文章分类的ID. 打开:article_cat.php $smarty->disp ...

  5. 在云服务器搭建WordPress博客(五)创建和管理文章分类

    不同主题的文章划分到不同的分类,有助于访客寻找他们想要的内容,提高用户体验.所以,为你的网站创建文章分类是很有必要的.那么,WordPress系统如何创建和管理文章分类呢?今天倡萌就简单介绍一下. 创 ...

  6. 历史文章分类汇总-Anaconda安装第三方包(whl文件)

    本文主要是对公众号之前发布的文章进行分类整理,方面大家查阅,以后会不定期对文章汇总进行更新与发布.   一.推荐阅读: Anaconda安装第三方包(whl文件) 福布斯系列之数据分析思路篇 福布斯系 ...

  7. 初始化文章分类的方法 下拉的layui框

    触发时机:页面加载完毕之后 实现步骤: 1.利用$.ajax()发起请求 (找接口文档) 2.在success成功回调里面获取服务器返回的数据,判断一下返回的success是否是0. 3.如果不是0, ...

  8. 如何批量转换 WordPress 文章分类

    可能建博之初,分类设置过于详细,后来想重新整理并删除一些分类项目,比如删除分类A,并将其中的所有文章划归到分类B中,手动修改文章的分类过于麻烦,有木有什么方法可以批量移动文章到另一个分类中呢? 网上闲 ...

  9. Spark2.0机器学习系列之8:多类分类问题(方法归总和分类结果评估)

    一对多(One-vs-Rest classifier) 将只能用于二分问题的分类(如Logistic回归.SVM)方法扩展到多类. 参考:http://www.cnblogs.com/CheeseZH ...

随机推荐

  1. 异常处理 try...catch...finally 执行顺序, 以及对返回值得影响

    异常处理 try...catch...finally 执行顺序, 以及对返回值得影响 结论:1.不管有没有出现异常,finally块中代码都会执行:2.当try和catch中有return时,fina ...

  2. 解析Excel文件 Apache POI框架使用

    本文整理了,使用Apache POI 框架解析.读取Excel文件,过程中,程序代码出现的一些问题,并解决 1..xls 和 .xlsx 我们知道Excel文档,在Windows下,分为Excel20 ...

  3. 使用Atom编写Makedown

    Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器. Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 作为一个Gi ...

  4. 119. Pascal's Triangle II (Amazon) from leetcode

    Given a non-negative index k where k ≤ 33, return the kth index row of the Pascal's triangle. Note t ...

  5. Python OOP 面向对象

    1.Python实现OOP可以概括为三个概念: 继承:基于Python属性查找 多态:在x.method中,method的意义取决于x的类型 封装:方法和运算符实现行为,数据隐藏是一种惯例 2.委托: ...

  6. soap使用xml调用webapi后返回xml信息进行JSON转换处理,以顺丰查询接口为例

    expressUrl = string.Format(可以卸载配置文件的域名URL + "/bsp-oisp/ws/expressService"); StringBuilder ...

  7. 在什么情况下采用BFC

    介绍BFC的博文有很多,下面,我就从另一个角度解释一下“在什么情况下会使用BFC” 以下仅代表我的个人看法,如果有错误的地方,还希望大家能告诉我,以免我在错误的道路上越走越远. 一.BFC是什么 Bl ...

  8. DESCryptoServiceProvider 类加密解密

    DESCryptoServiceProvider  点击查看介绍 加密解密辅助类:点击查看 私钥加密 定义:定义一个包装对象来访问加密服务提供程序 (CSP) 版本的数据加密标准 (DES) 算法.  ...

  9. java多线程同步以及线程间通信详解&消费者生产者模式&死锁&Thread.join()(多线程编程之二)

    本篇我们将讨论以下知识点: 1.线程同步问题的产生 什么是线程同步问题,我们先来看一段卖票系统的代码,然后再分析这个问题: package com.zejian.test; /** * @author ...

  10. 深入浅出:了解jsonp跨域的九种方式

    什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...