博客开发系列(一)

博客开发系列(一)

数据库表的创建

两张表:

文章类型

文章
#一篇博客一种分类
# 一篇博客多种分类

from django.db import models
from django.contrib.auth.models import User
# Create your models here.

class BlogType(models.Model):
	type_name=models.CharField(max_length=15,verbose_name="博客类型")

	def __str__(self):
		return self.type_name

class Blog(models.Model):
	#博客标题
	title=models.CharField(max_length=50,verbose_name="文章标题")
	#博客类型
	blog_type=models.ForeignKey(BlogType,on_delete=models.DO_NOTHING,verbose_name="博客类型")
	#博客作者
	author=models.ForeignKey(User,on_delete=models.DO_NOTHING,verbose_name="作者")
	#博客内容
	content=models.TextField()
	#创建文章的时间
	created_time=models.DateTimeField(auto_now_add=True,verbose_name="发表时间")
	#最后修改的时间
	last_updated_time=models.DateTimeField(auto_now=True,verbose_name="最后修改时间")

	def __str__(self):
		return self.title

  

首页布局

Bootstrap+Django+mysql

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>博客</title>
        {%load staticfiles%}

        <link rel="stylesheet" href="{% static ‘/css/bootstrap.min.css‘ %}">

        <script src="{% static ‘/js/jquery-3.3.1.min.js‘ %}"></script>

        <script src="{% static ‘/js/bootstrap.min.js‘ %}"></script>

        <style type="text/css">
            .navbar-default{
                margin-bottom:0px;
                border:0px;
                }
            /*设置中心面板*/
            .jumbotron{
                width:100%;
                height:350px;
                margin-bottom:0px;
                background:#41494f;
                 background-image:url({% static ‘/img/background.png‘ %});
                 background-repeat:no-repeat;
                 background-size: cover;
                }

            /*设置中心面板的文字*/
            .center{
                width:76%;
                height:250px;

                margin: auto;

            }
            .row{

                width:100%;
                margin: auto;
                padding-top: 30px;

            }
        </style>
    </head>

    <body>
        <!--#导航条-->
        <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Zero</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <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>
        <li><a href="/blog?nid=1">博客</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下载<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

        <!--#中心面板-->
        <div class="jumbotron">
            <div class="center" >
                <h1 style="text-align:center;">零</h1>
                  <p style="text-align:center;">零的精神:没有房,没有车,没有存款,没有女孩。</p>
                  <p style="text-align:center;"><a class="btn btn-primary btn-lg" href="/blog" role="button">进入博客</a></p>
            </div>
        </div>

        <!--中心内容-->
        <div class=‘container‘>

            <!--第一层-->
            <div class="row">
            <!--分类-->
                <div class="col-md-2">
                <!--博客分类小标题-->
                <div>
                    <a href="#" style="font-size:20px; padding-bottom: 10px;">博客</a><p>共{{ all_article }}篇博文</p>
                </div>

                <ul class="nav nav-pills nav-stacked">
                    {% for type in all_Type %}
                    <li><a href="#">{{ type.type_name }} <span class="badge">11</span></a></li>
                    {% endfor %}

                </ul>
            </div>
            <!--分隔-->
                <div class="col-md-2"></div>
            <!---->
                <div class="col-md-8">
                <nav class="navbar navbar-default ">
                  <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header" style="padding-bottom: 15px;">
                          <a class="navbar-brand"  style="padding:20px;cursor:pointer;" id="a1"  >微信</a>
                          <a class="navbar-brand"  style="padding:20px;cursor:pointer;" id="a2">阅读榜</a>
                          <a class="navbar-brand"  style="padding:20px;cursor:pointer;" id="a3">趋势图</a>
                          <a class="navbar-brand"  style="padding:20px;cursor:pointer;" id="a4">公告</a>
                </div>
                </nav>
                <div style="background-color:blue;height:380px;width:700px;display:block;float: left;" id="div1"></div>
                <div style="background-color:red;height:380px;width:700px;display: none;float: left;" id="div2"></div>
                <div style="background-color:bisque;height:380px;width:700px;display: none;float: left;" id="div3"></div>
                <div style="background-color:black;height:380px;width:700px;display: none;float: left;" id="div4"></div>
                <script type="text/javascript">
                    var a1=document.getElementById(‘a1‘);
                    var a2=document.getElementById(‘a2‘);
                    var a3=document.getElementById(‘a3‘);
                    var a4=document.getElementById(‘a4‘);
                    a1.onclick=function(){
                        $(‘#div1‘).css(‘display‘,‘block‘);
                        $(‘#div2‘).css(‘display‘,‘none‘);
                        $(‘#div3‘).css(‘display‘,‘none‘);
                        $(‘#div4‘).css(‘display‘,‘none‘);
                    };
                    a2.onclick=function(){

                        $(‘#div1‘).css(‘display‘,‘none‘);
                        $(‘#div2‘).css(‘display‘,‘block‘);
                        $(‘#div3‘).css(‘display‘,‘none‘);
                        $(‘#div4‘).css(‘display‘,‘none‘);
                    };
                    a3.onclick=function(){
                        $(‘#div1‘).css(‘display‘,‘none‘);
                        $(‘#div2‘).css(‘display‘,‘none‘);
                        $(‘#div3‘).css(‘display‘,‘block‘);
                        $(‘#div4‘).css(‘display‘,‘none‘);
                    };
                    a4.onclick=function(){
                        $(‘#div1‘).css(‘display‘,‘none‘);
                        $(‘#div2‘).css(‘display‘,‘none‘);
                        $(‘#div3‘).css(‘display‘,‘none‘);
                        $(‘#div4‘).css(‘display‘,‘block‘);
                    };

                </script>

            </div>
            </div>

            <!--第二层-->
            <div class="row">
            <!--最新发表-->
                <div class="col-md-4" style="background:red;height:400px;">
                    <div><span style="font-size:20px;">最新发表</span></div>

                </div>
            <!--最新推荐-->
                <div class="col-md-4" style="background:black;height:400px;">
                    <div><span style="font-size:20px;">最新推荐</span></div>
                </div>
            <!--随机推荐-->
                <div class="col-md-4" style="background:chartreuse;height:400px;">
                    <div><span style="font-size:20px;">随机推荐</span></div>
                </div>

            </div>

        </div>

        <!--底部-->
        <div class="bottom" style="height: 60px;background-color: #000000;">

        </div>
    </body>
</html>

  

首页视图函数

from django.shortcuts import render,HttpResponse,redirect
from blog.models import *

#首页
def get_index(request):
    all_Type=BlogType.objects.all().values(‘type_name‘)

    return render(request,"index.html",{‘all_Type‘:all_Type})

简单效果

右边以后会显示热读榜,推荐这些,所以还需要空出位置。

 

原文地址:https://www.cnblogs.com/-wenli/p/10508140.html

时间: 2024-09-30 05:56:04

博客开发系列(一)的相关文章

杨泽业:wordpress博客开发技巧之添加快递查询功能

前几天,我说到了给你的博客添加<汉字转拼音>和<二维码在线生成>的功能,这两个功能都是额外增加的,而且是可以增加在任何的网站里面,今天讲的是wordpress博客功能开发,是在wordpress博客模版的基础上添加新功能,调用博客主题的页眉和页脚,侧边栏等. 今天我们就以增加快递查询的功能为例,讲解知更鸟主题,新建一个独立页面应用的方法,并列出详细的步骤,方便小白用户实践操作: 1.下载自己主题里面的默认文章页面,比如我的是page.php,位置在/wp-content/theme

【全网最全的博客美化系列教程】文章总目录

前言 很多热心的园友叫我出一部博客美化系列的教程,都觉得我博客做的很漂亮?之前我也有写过博客美化教程,不过好像一篇文章的篇幅有点过长了,为了方便园友的查看,我决定重新出一套博客美化教程,把原有的功能进行细化,每种功能单独以一篇文章的形式发表,在保留原有功能的基础上,会持续更新探索一些好玩好看的新功能,供园友们学习.既然是园友们提出的想法,我也不能辜负你们的期望啊,喜欢的园友记得点赞收藏加关注哦~~~ 一枚即将步入大三的学生党也是时候需要考虑一下自己的未来了,毕竟学习的时间不多了.我也很久没有更新

【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

【全网最全的博客美化系列教程】07.添加一个分享的按钮吧

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

Django博客开发-数据建模与样式设定

开发流程介绍 之前Django的学习过程当中已经把基本Django开发学完了,现在以Django 的博客项目完成一遍课程的回顾和总结.同时来一次完整开发的Django体验. 一个产品从研究到编码我们要经历以下的过程: 博客开发需求分析与建模 需求分析 本次项目完成的是一个博客的项目,博客主要目的是为了分享个人的技术,进行技术积累. 主要是发布文章日志.但是也需要有评论和互动.需要完成以下功能点: 1.文章的发布.展示.修改.删除. 2.文章评论 3.读者互动 4.图片管理 概要设计 我们对上面的

基于 Laravel 开发博客应用系列 —— 设置 Windows 本地开发环境

1.安装原生PHP 下载/解压 PHP 到 PHP 下载页下载最新版本的 PHP(如果使用 Laravel 5.1 的话需要 PHP 5.5.9+ 版本),解压下载的zip格式压缩文件到本地目录,比如E:\Php. 编辑 php.ini 打开命令行按照如下步骤创建php.ini文件: C:\Users\Test>E: E:\>cd Php E:\Php> copy php.ini-development php.ini 然后在编辑 php.ini: // 将 ; extension_di

基于Laravel开发博客应用系列 —— 使用Bower+Gulp集成前端资源

本节我们将讨论如何将前端资源集成到项目中,包括前端资源的发布和引入.本项目将使用 Bower 和 Gulp 下载和集成jQuery.Bootstrap.Font Awesome 以及 DataTables. 1.“偷”别人的代码 开发 web 应用最快的方式就是借鉴别人的项目.换句话说,“偷”他们的代码. 当然,不是真偷. 举个例子吧,Twitter Bootstrap 的许可证声明允许任何人可以免费使用 Bootstrap 框架. 现在的 web 站点包含很多东西:框架.库.前端资源,等等.如

基于 Laravel 开发博客应用系列 —— 从测试开始(一):创建项目和PHPUnit

1.创建博客项目 我们将遵循上一节提到的六步创建一个新 Laravel 5.1 项目的步骤,创建本节要用到的博客项目 —— blog. 首先,在本地主机安装应用骨架: [email protected]:~/Code$ composer create-project laravel/laravel blog --prefer-dist 接下来,编辑 Homestead.yaml,添加站点信息及数据库信息: sites: - map: test.app to: /home/vagrant/Code