BBS项目day3

一首页页面搭建（轮播图）
- 前端
- js
- js升级版
- 后端
二 admin后台管理
- 路由
- admin.py中注册
- setting中配置国际化
- 表名显示中文
- 字段显示中文
- 字段下方的提示文本（不影响数据）
- 一行行数据显示中文
- blank
三首页文章显示
- 后台
- 前台
四 media及头像显示
五图片防盗链
六个人站点文章显示
- 路由
- 视图
- 页面

一首页页面搭建（轮播图）

前端

<div class="lbt"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><a href="http://www.baidu.com"><imgsrc="https://csdnimg.cn/feed/20201021/8e58d6d12982c68fedc8941246dfbcda.jpg"  # 之后会用ajax替换掉图片与文本alt="..." class="img"></a><div class="carousel-caption">广告位招商</div></div><div class="item"><a href=""><imgsrc="https://csdnimg.cn/feed/20201021/8e58d6d12982c68fedc8941246dfbcda.jpg"alt="..." class="img"></a><div class="carousel-caption">点我</div></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button"data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button"data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
</div>

js

$(function () {$.ajax({url: '/get_banner/',method: 'get',success: function (data) {$.each(data, function (k, v) {  // 遍历从后端传来的列表l1console.log(k)  // 列表的索引console.log(v)  // 遍历出来的字典$('.img')[k].src = v.img_url  // 将img类中的的src属性替换})}})})

js升级版

$(function () {let images = $('.img')$.ajax({url: '/get_banner/',method: 'get',success: function (data) {$.each(images, function (k, v) {$(v).attr('src', data[k].img_url)$(v).parent().attr('href', data[k].url)$(v).parent().next().html(data[k].msg)})}})
})

后端

def get_banner(request):# 正常逻辑，有个表存banner图# 我们写死了，用于从后台传入轮播图等等ll = [{'url': 'http://www.baidu.com','img_url': '/static/img/banner1.jpg','msg': '1024程序员节'},{'url': 'http://www.bilibi.com','img_url': '/static/img/banner2.jpg','msg': '我们跟bilibil合作了'}]return JsonResponse(ll,safe=False)

二 admin后台管理

路由

path('admin/', admin.site.urls),

admin.py中注册

from blog import models
admin.site.register(models.UserInfo)
admin.site.register(models.Article)
admin.site.register(models.Blog)
admin.site.register(models.UpAndDown)
admin.site.register(models.Commit)
admin.site.register(models.Tag)
admin.site.register(models.Category)
admin.site.register(models.TagToArticle)

setting中配置国际化

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

表名显示中文

如下是在Tag表的创建class里写的子class

class Meta:verbose_name_plural='标签表'

字段显示中文

在创建字段的参数中写入，如：

username = models.CharField(max_length=32, verbose_name='文章标题')

字段下方的提示文本（不影响数据）

也是在创建字段的参数中写入，如：

username = models.CharField(max_length=32, help_text='这里是用户名哦')

一行行数据显示中文

不写的出现的是如表名 object(1)字样

def __str__(self):return self.name

blank

admin后台键入数值，是否必填，与表中字段是否必填无关，可能表中default=null，但没有blank=True，于是后台键入时强制让你填，就很烦，也是放在建表参数里的

三首页文章显示

后台

def index(request):# 通过模板语言把文章渲染在页面中article_list=models.Article.objects.all().order_by('-create_time')return render(request, 'index.html',context={'article_list':article_list})

前台

这里的点赞数量与评论数量显示，是在创建文章表（Article）字段里新增了，点赞数字段(up_num)跟评论数字段(commit_num)，以免每次显示这俩信息时都要多隔表查询两次

<div class="article">{% for article in article_list %}<hr><div class="media"><!--文章标题--><h4 class="media-heading"><a href="">{{ article.title }}</a></h4><div class="media-left"><a href="#"><!--作者头像--><img class="media-object" src="{{ article.blog.userinfo.avatar }}" alt="..."width="60"height="60"></a></div><div class="media-body"><!--文章摘要-->{{ article.desc }}</div><!--这一行分别显示：作者名、创建时间、点赞数、评论数--><div class="article_bottom"><span><a href="">{{ article.blog.userinfo.username }}</a></span><span>{{ article.create_time|date:'Y-m-d H-i-s' }}</span><!--需要提前引入font awesome样式--><span><i class="fa fa-stethoscope fa-lg"></i> {{ article.up_num }}</span><spanclass="glyphicon glyphicon-comment"><i class="fa fa-flickr1 fa-lg"></i> {{ article.commit_num }}</span></div></div>{% endfor %}</div>

四 media及头像显示

用户上传的头像能够在浏览器中访问到
默认情况下，static下的都能访问
medis文件夹下的图片不能访问，需要手动打开

使用方式

项目根路径下新建media文件夹
setting中配置MEDIA_ROOT=os.path.join(BASE_DIR,'media')
路由中：

from django.views.static import serve
# 建议使用这个setting
from django.conf import settings  # 整个项目的配置文件
re_path('^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),

五图片防盗链

我们如何做图片防盗链
-请求头中referer：地址 上一个地址是什么
防盗链就是判断上一个地址是否属于自己的网址，如果不是就禁用
具体代码实现（了解即可）

六个人站点文章显示

路由

用人名来拼写，注意一定要放在最下面一个路由，因为这个正则基本匹配所有网站了，在它之下的路由根本就过不去

re_path('^(?P<name>\w+)$',views.site)

视图

def site(request,name):user=models.UserInfo.objects.filter(username=name).first()if user:# 这个人写的所有文章article_list=user.blog.article_set.all()return render(request,'site.html',locals())else:return render(request,'error.html')

页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"><script src="/static/jquery-3.3.1/jquery-3.3.1.min.js"></script><link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css"><title>{{user.username}}-博客园</title>
</head>
<body>
<div class="head"><nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#">{{ user.blog.site_title }}</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="/index/">首页 <span class="sr-only">(current)</span></a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>
</div>
<div class="container-fluid"><div class="row"><div class="col-md-2"><div class="panel panel-danger"><div class="panel-heading"><h3 class="panel-title">广告位招商</h3></div><div class="panel-body">详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a></div></div><div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">重金求子</h3></div><div class="panel-body">详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a></div></div><div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">重金求子</h3></div><div class="panel-body">详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a><hr>详情联系：<a href="">点我</a></div></div></div><div class="col-md-10"><div class="article">{% for article in article_list %}<hr><div class="media"><h4 class="media-heading"><a href="">{{ article.title }}</a></h4><div class="media-body">{{ article.desc }}</div><div class="article_bottom pull-right"><span>posted@</span><span>{{ article.create_time|date:'Y-m-d H-i-s' }}</span><span>{{ user.username}}</span><span><i class="fa fa-stethoscope fa-lg"></i> {{ article.up_num }}</span><spanclass="glyphicon glyphicon-comment"><iclass="fa fa-flickr1 fa-lg"></i> {{ article.commit_num }}</span><span><a href="">编辑</a></span></div></div>{% endfor %}</div></div></div></div>
</body>
</html>

Django学习 day74之BBS项目day3相关推荐

基于Django的博客BBS项目
基于Django的博客BBS项目项目流程内容概要第一部分第二部分第三部分第四部分项目具体流程 1.数据库表创建及同步 1.1创建项目 1.2创建数据库 1.3修改配置文件与__init__ ...
django学习（1）-----项目组成
项目名为mysite urls.py 保存url对应关系,及rul相关函数 settings.py 保存项目相关配置,如html文件路径.静态文件路径等 templates 保存html文件 stat ...
python基础学习[python编程从入门到实践读书笔记(连载三)]：django学习笔记web项目
文章目录 Django项目:学习笔记web网页项目部署参考自己部署的网站,还是小有成就感的,毕竟踩过很多坑,实战技能也有些许进步. 网站链接:http://lishizheng.herokuap ...
基于Pycharm的Django学习 —— 项目实战（Form和ModelForm）
项目实战项目开发流程项目准备工作项目部门管理 UI设计 depart_list 模板继承 depart_add depart_delete depart_edit 项目用户管理 user_lis ...
Django框架项目——BBS项目介绍、表设计、表创建同步、注册、登录功能、登录功能、首页搭建、admin、头像、图片防盗、个人站点、侧边栏筛选、文章的详情页、点赞点踩、评论、后台管理、添加文章、头像
文章目录 1 BBS项目介绍.表设计项目开发流程表设计 2 表创建同步.注册.登录功能数据库表创建及同步注册功能登陆功能 3 登录功能.首页搭建.admin.头像.图片防盗.个人站点.侧边栏 ...
python学习笔记项目_python第三方库之Django学习笔记一
1.安装Django pip install Django 2.版本号查询 python -m django --version 3.创建项目切换到你想创建项目的目录,执行命令:django-adm ...
Django介绍和虚拟环境（django特点、MVC、MVT、Django学习资料）
MVT流程: 创建Django项目和应用 django-admin startproject name python manager.py startapp name 视图和ULR 视图的请求和响应 ...
django 学习笔记
django 学习笔记启动虚拟机: workon bj18_py3 创建一个项目: django-admin.py startproject mysite 启动开发用服务器:从外层项目 mysite ...
Django学习笔记（10）——Book单表的增删改查页面
一,项目题目:Book单表的增删改查页面该项目主要练习使用Django开发一个Book单表的增删改查页面,通过这个项目巩固自己这段时间学习Django知识. 二,项目需求: 开发一个简单的Book增 ...

Django学习 day74之BBS项目day3

BBS项目day3

一首页页面搭建（轮播图）

前端

js

js升级版

后端

二 admin后台管理

路由

admin.py中注册

setting中配置国际化

表名显示中文

字段显示中文

字段下方的提示文本（不影响数据）

一行行数据显示中文

blank

三首页文章显示

后台

前台

四 media及头像显示

五图片防盗链

六个人站点文章显示

路由

视图

页面

Django学习 day74之BBS项目day3相关推荐

最新文章

热门文章

Django学习 day74之BBS项目day3

BBS项目day3

一 首页页面搭建（轮播图）

前端

js

js升级版

后端

二 admin后台管理

路由

admin.py中注册

setting中配置国际化

表名显示中文

字段显示中文

字段下方的提示文本（不影响数据）

一行行数据显示中文

blank

三 首页文章显示

后台

前台

四 media及头像显示

五 图片防盗链

六 个人站点文章显示

路由

视图

页面

Django学习 day74之BBS项目day3相关推荐

最新文章

热门文章

一首页页面搭建（轮播图）

三首页文章显示

五图片防盗链

六个人站点文章显示