-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:\Users\Administrator\Desktop\root\firstsite> 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
root\firstsite> 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文件

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

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

  

  • 只能过滤英文

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

2 实现第一个Django网站 博客的更多相关文章

  1. django参考博客学习

    网上发现其他人的一个django系列博客,和我学的一样是黑马的,写的挺不错的,转载学习一下 https://blog.csdn.net/u014745194/article/category/6989 ...

  2. Django搭建博客网站(四)

    Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Djan ...

  3. Django搭建博客网站(三)

    Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用 ...

  4. Django搭建博客网站(二)

    Django搭建自己的博客网站(二) 这里主要讲构建系统数据库Model. Django搭建博客网站(一) model 目前就只提供一个文章model和一个文章分类标签model,在post/mode ...

  5. Django 学习笔记之六 建立一个简单的博客应用程序

    最近在学习django时建立了一个简单的博客应用程序,现在把简单的步骤说一下.本人的用的版本是python 2.7.3和django 1.10.3,Windows10系统 1.首先通过命令建立项目和a ...

  6. Django(博客系统):基于pycharm如何一个django工程下创建多个app

    背景:通常我们创建一个django系统时,为了把业务模块划分清楚往往会把一个独立的业务模块放到一个app中,如果多个独立的业务模块就会创建多个app,一般情况下为了更好的管理这些app,会把他们都存放 ...

  7. Django开发博客 入门篇

    Django是神马? Django是一个开源免费的Web框架,使用Python编写.能够让你快速写出一个Web应用, 因为它包含了绝大部分的组件,比如认证,表单,ORM,Session,安全,文件上传 ...

  8. Django 系列博客(八)

    Django 系列博客(八) 前言 本篇博客介绍 Django 中的模板层,模板都是Django 使用相关函数渲染后传输给前端在显式的,为了想要渲染出我们想要的数据,需要学习模板语法,相关过滤器.标签 ...

  9. Django 系列博客(六)

    Django 系列博客(六) 前言 本篇博客介绍 Django 中的路由控制部分,一个网络请求首先到达的就是路由这部分,经过路由与视图层的映射关系再执行相应的代码逻辑并将结果返回给客户端. Djang ...

随机推荐

  1. 2017.10.28 QB模拟赛 —— 下午

    题目链接 T1 按x值排序 遇到第二种牌插入 遇到第一种牌 查询<=y 的最小值 删除他 splay multiset cys大佬说 multiset就是不去重的set, #include &l ...

  2. HTML入门2—HTML常用标签

    HTML常用标签练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  3. Android(java)学习笔记66:Android Studio中build.gradle简介

    1.首先我们直接上代码介绍: // Top-level build file where you can add configuration options common to all sub-pro ...

  4. C语言中%p,%u,%lu都有什么用处

    %p表示输出这个指针, %d表示后面的输出类型为有符号的10进制整形, %u表示无符号10进制整型, %lu表示输出无符号长整型整数 (long unsigned)

  5. Java-笔记1

    /* 对第一个java程序进行总结 1. java程序编写-编译-运行的过程 编写:我们将编写的java代码保存在以".java"结尾的源文件中 编译:使用javac.exe命令编 ...

  6. 2.vue脚手架项目配置

    1.更改网站名: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  7. 史上最简单的SpringCloud教程 | 第八篇: 消息总线(Spring Cloud Bus)

    转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springcloud/2017/07/12/sc08-bus/ 本文出自方志朋的博客 最新Finchley版本请 ...

  8. postgresql 免安装版使用

    免安装版 postgresql 使用 1.首先使用 initdb 初始化数据目录 initdb --pgdata=data --encoding=UTF8 --locale=C 2.启动 postgr ...

  9. 深入浅出:了解JavaScript的ES6、ES7新特性

    参照阮一峰博客:http://es6.ruanyifeng.com/#README es6常见题:https://blog.csdn.net/qq_39207948/article/details/8 ...

  10. 返回固定页面的web服务器

    import socket def handle_client(socket_con): """ 接收来自客户端的请求,并接收请求报文,解析,返回 "" ...