-1.理解上下文
- render()渲染
- request url传来的reuqest
- x.html 制定返回的模板名称
- context 上下文 数据库中 替换数据
0.大框架
1.创建模板
(1)创建templates和static文件夹
- 在firstapp中创建文件夹
(2)setting.py设置文件迁移
'DIRS': [os.path.join(BASE_DIR,'templates').replace('\','/')],
(3)引入静态文件:模板语言(错误:看下面)
{% staticfiles %} #css文件目录 <link rel="stylesheet" href="{% static 'css/semantic.css'%}" media="screen" title="no title" charset="utf-8"> #图片目录 <img src="{% static 'images/banner.jpg'%}" alt="" />
2.创建后台
(1)查看后台
(2)创建超级管理员
PS C:UsersAdministratorDesktop ootfirstsite> python.exe .manage.py createsuperuser Username (leave blank to use 'administrator'): admin Email address: 空 Password: admind Password (again): admin Superuser created successfully.
(3)向后台注册提交数据库
from django.contrib import admin from firstapp.models import People # Register your models here. admin.site.register(People)
(4)添加数据,并显示
(5)添加Article表,
class Aritcle(models.Model): headline = models.CharField(null=True,blank=True,max_length=500) content = models.TextField(null=True, blank=True) def __str__(self): return self.headline
- 后台注册提交
- 创建数据库,
tsite> python.exe .manage.py makemigrations rootfirstsite> python.exe .manage.py migrate
- 创建文章
3.Model引入数据
(1)view.py 文件导入Article
(2)创建index视图函数
(3)获取数据库的数据
article_list = Aritcle.objects.all() #获取Article数据库所有的数据
(4)render(请求 ,网页,上下文) 函数渲染好一个网页
def index(request): article_list = Aritcle.objects.all() #获取Article数据库所有的数据 web_page = render(request,'first.html',context) return web_page
(5)上下文:字典装载数据
- context['article_list'] = article_list
(6)代码:view.py文件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
from django.shortcuts import render,HttpResponse from firstapp.models import People,Aritcle from django.template import Context,Template # Create your views here. def first_try(request): person = People(name='alxe',job='it') html_string = ''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first_try</title> </head> <body> <h1>Hello</h1> <h3> {{ person.name }} </h3> </body> </html> ''' t = Template(html_string) c = Context({'person':person}) web_page = t.render(c) return HttpResponse(web_page) context = {} context['article_list'] = article_list def index(request): context = {} article_list = Aritcle.objects.all() #获取Article数据库所有的数据 context['article_list'] = article_list index_page = render(request,'first.html',context) return index_page
4.Django模板语言
(1)模板语言渲染html
{% for article in article_list %} <div class="ui vertical segment"> <div class="ui container segment"> <h1 class="ui header">{{article.headline}} </h1> <p> {{ article.context }} </p> <button type="button" name="button" class="ui inverted blue button">Read more</button> </div> </div> {% endfor %}
(2)ur.pyl添加地址
from django.conf.urls import include, url from django.contrib import admin from firstapp.views import first_try,index urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^first_try/', first_try), url(r'^index/', index,name='index'), ]
5.效果演示
(1)报错
(2)修改bug
(3)无法加载css image
(4)静态文件导入路径错误
'DIRS': [os.path.join(BASE_DIR,'templates').replace('\','/')],
<link rel="stylesheet" href="{% static 'css/semantic.css'%}" media="screen" title="no title" charset="utf-8"> <img src="{% static 'images/banner.jpg'%}" alt="" />
(5)templates 和static 文件夹 在firstapp中创建
(6)完整代码html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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"> </head> <body> <div class="ui inverted vertical segment"> <div class="ui image"> <img src="{% static 'images/banner.jpg'%}" alt="" /> </div> </div> {% for article in article_list %} <div class="ui vertical segment"> <div class="ui container segment"> <h1 class="ui header">{{article.headline}} </h1> <p> {{ article.content }} </p> <button type="button" name="button" class="ui inverted blue button">Read more</button> </div> </div> {% endfor %} <div class="ui inverted very padded segment"> maguacoding </div> </body> </html>
6.模板语言:过滤器100个字符
{{ article.content|truncatewords:100 }}
-
只能过滤英文
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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"> </head> <body> <div class="ui inverted vertical segment"> <div class="ui image"> <img src="{% static 'images/banner.jpg'%}" alt="" /> </div> </div> {% for article in article_list %} <div class="ui vertical segment"> <div class="ui container segment"> <h1 class="ui header">{{article.headline}} </h1> <p> {{ article.content|truncatewords:100 }} </p> <button type="button" name="button" class="ui inverted blue button">Read more</button> </div> </div> {% endfor %} <div class="ui inverted very padded segment"> maguacoding </div> </body> </html>