正文

博客开发系列(代码片段)

-wenli  -wenli  2023-03-09  520

关键词：

博客开发系列(一)

数据库表的创建

两张表：

文章类型

文章

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


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>

View Code

首页视图函数

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)

View Code

简单效果

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

　技术图片

里的外部图片(代码片段)

系列文章基于.NetCore开发博客项目StarBlog-(1)为什么需要自己写一个博客？基于.NetCore开发博客项目StarBlog-(2)环境准备和创建项目基于.NetCore开发博客项目StarBlog-(3)模型设计基于.NetCore开发博客项目StarBlog-(4)markdown博客批量导入基... 查看详情

flaskpost请求，数据入库，文件上传，一文看懂，3天掌握flask开发项目系列博客之三(代码片段)

flask实现ajax数据入库在正式编写前需要了解一下如何在python函数中去判断，一个请求是get还是post。python文件代码如此所示：#route()方法用于设定路由；@app.route('/hello.html',methods=['GET','POST'])defhell... 查看详情

基于.netcore开发博客项目starblog-(12)razor页面动态编译(代码片段)

基于.netcore开发博客项目starblog(代码片段)

前言OK，我也来造轮子了博客系统从一开始用WordPress，再到后来用hexo、hugo之类的静态博客生成放github托管，一直在折腾折腾是为了更好解决问题，最终还是打算自己花时间搞一个好了本系列文章将记录博客的开发过程~将会持续... 查看详情

hbase知识手册(代码片段)

...社区-腾讯云(tencent.com)Hbase系列-2、Hbase基础_技术武器库的博客-CSDN博客Hbase系列-3、Hbase高级_技术武器库的博客-CSDN博客【万字长文】Hbase最全知识点整理（建议收藏）-腾讯云开发者社区-腾讯云(tencent.com)大数据技术之HBase... 查看详情

go语言自学系列|golang开发vscode快捷键(代码片段)

...持！附上汇总贴：Go语言自学系列|汇总_COCOgsta的博客-CSDN博客快捷键位置File 查看详情

基于.netcore开发博客项目starblog-(16)一些新功能(监控/统计/配置/初始化)(代码片段)

全网最全的博客美化系列教程07.添加一个分享的按钮吧(代码片段)

全网最全的博客美化系列教程相关文章目录【全网最全的博客美化系列教程】01.添加Github项目链接【全网最全的博客美化系列教程】02.添加QQ交谈链接【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠【全网最... 查看详情

全网最全的博客美化系列教程08.自定义地址栏logo(代码片段)

全网最全的博客美化系列教程05.公告栏个性时间显示的实现(代码片段)

全网最全的博客美化系列教程06.推荐和反对炫酷样式的实现(代码片段)

vagrant系列博客(代码片段)

1.添加box从中科大的网站下载了源http://mirrors.ustc.edu.cn/vagrantboxadd[自定义box名字][镜像文件]例子: vagrantboxaddubuntu/14.04trusty-server-cloudimg-amd64-vagrant-disk1.box创建通过源创建ubuntu镜像查看boxvagrantboxlist 查看详情

从零开始，开发一个weboffice套件：拖动鼠标选中文字edgecase(代码片段)

这是一个系列博客，最终目的是要做一个基于HTMLCanvas的、类似于微软Office的WebOffice套件（包括：文档、表格、幻灯片……等等）。博客园：《从零开始,开发一个WebOffice套件》系列博客目录富文本编辑器Githubrepo地址：https://github.... 查看详情

blazor移动开发-起步(代码片段)

...issainty.com/getting-started-with-mobile-blazor-bindings/ 这是系列博客文章中的第一篇，将探索新的实验性MobileBlazorBindings项目。在这篇文章中，我将向您介绍MobileBlazorBindings（MBB）项目，说明它查看详情

flutter即学即用系列博客——04flutterui初窥(代码片段)

前面三篇可以算是一个小小的里程碑。主要是介绍了Flutter环境的搭建、如何创建Flutter项目以及如何在旧有Android项目引入Flutter。这一篇我们来学习下Flutter的UI。前言说到UI，我就简单说下Flutter作为一门跨平台语言具有的优势之... 查看详情

maixbit系列心得---开发环境准备(代码片段)

...己！CSDN@AXYZdong，CSDN首发，AXYZdong原创唯一博客更新的地址为：👉AXYZdo 查看详情

maixbit系列心得---开发环境准备(代码片段)

...己！CSDN@AXYZdong，CSDN首发，AXYZdong原创唯一博客更新的地址为：👉AXYZdo 查看详情

android逆向android进程注入工具开发(总结|源码编译|逆向环境搭建使用|使用进程注入工具进行逆向操作)★★★(代码片段)

文章目录一、Android进程注入工具开发系列博客二、Android进程注入工具源码下载编译三、逆向环境搭建四、使用注入工具进行逆向操作1、获取远程进程号2、注入工具准备3、注入动态库4、查询内存5、修改内存一、Android进程注入... 查看详情