新手用python Django 创建个人博客的第二天

今天是创建博客的第二天，想着先做前端还是再写一部分后端，最终决定两边同时进行，因为Django的机制对于前后端交互这方面在我看来很频繁，后端代码写出来却忽略前端代码，到后期又要返回去改后端，等于白写。至于为什么不先把前端写出来，道理是一样的，前端也要根据后端需求来改动，很麻烦。就一个页面一个页面来吧，这样工作量也不会很大。

末尾有第三篇链接。

主页面基础模板

这里我会用到一个工具——bootstrap，这是一个前端模板网站，上百度搜就能找到，下面是它的网址。

链接: https://v3.bootcss.com/.

这个模板网站可以快速帮助我们建立起一个美观的网站，当然了，更高层次的还得自己来，而对于我要做的博客网站来说已经绰绰有余。

先点击下载Bootstrap到以下页面选第一个下载，
再用这个空余时间去项目下建立一个static文件夹，右键将其标记为根文件夹，再建立一个templates文件夹，右键标记为Template Folder，像这样：

再去settings.py文件里修改代码——


然后把已经下载好的bootstrap文件放进static文件夹下。

开始测试——

找到urls.py，输入url(r'^', include('blog_app.urls')),，在应用也就是昨天建立的blog_app下建立urls.py，这样做的好处是防止项目urls过于复杂，也便于管理。

在应用下的urls.py导入顺便建立第一个视图链接

from django.conf.urls import include, url
from blog_app import views

urlpatterns = [
	url(r'^$',views.index)
    url(r'^index/$',views.index)
]

这时候我们还没建立index函数，鼠标停在后面的index上，它会出现一个小弹窗，左下角点一下快捷建立

在该文件下输入

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request,'index.html')

去templates文件夹下建立index.html，这里不适合快捷建立，它会直接给你个空白页面，专业前端的都不会这么做，更不用说我了，能偷懒就偷懒。

index.html里导入static文件夹下的bootstrap.min.css，然后去bootstrap网站中找到导航栏里的组件，随便找一个代码，复制粘贴到index.html，我选的是导航条。

接下来开始测试刚刚的步骤有没有错误，控制台输入python manage.py runserver，点击控制台给出的链接，可以看到下面这个页面就算成功，然后就可以放心往下做了。

分模块

一个良好的代码习惯很重要，接下来就要进行模块划分了，虽然目前我只有两个模块，分不分区别不大，但同样为了便于管理，还是划分成两个模块，登录和博客两个。

登录模块

鉴于在models.py里我给博客模块做了外键，所以先把登录做了。

控制台crtl+c退出项目运行，输入以下代码生成blog_login应用并在settings.py进行注册——

python manage.py startapp blog_login

顺便给ALLOWED_HOSTS加上点东西——

ALLOWED_HOSTS列表为了防止黑客入侵，只允许列表中的ip地址访问，加上列表里的*号方便测试，后面会改。

一样给blog_login加上urls.py

再把在blog_app里关于登录的代码全部迁移过来，也就是models.py和admin.py里的代码


然后回到blog_app里修改一下models.py里的外键，先导入blog_login的models

from blog_login.models import *

然后修改外键

class BlogView(models.Model):
    btitle = models.CharField(max_length=100)  # 博客标题
    btext = models.TextField()
    bdata = models.DateField(auto_now=True)  # 创建时间
    bread = models.IntegerField(default=0)  # 阅读数
    bup = models.IntegerField(default=0)  # 点赞数
    b_low = models.IntegerField(default=0)  # 踩数
    bcomment = models.CharField(max_length=200)  # 评论数
    isDelete = models.BooleanField(default=0)  # 是否删除
    buserinfo = models.ForeignKey('blog_login.UserInfo')  # 关联外键

    def __str__(self):
        return self.btitle

如果不修改，会报field:E300错误。
然后删除原migrations文件夹下的迁移文件，在控制台再次进行数据库迁移。

python manage.py makemigrations

python manage.py migrate

迁移过程会出现执行确认提示，输入yes回车即可。

做到这里是可以运行的，接下来的问题还得看后续，现在模块也分成两块了，后面直接在blog_app里做博客模块。

现在先给登录模块做个视图链接。

blog下的urls.py

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^',include('blog_app.urls')),
    url(r'^',include('blog_login.urls')),
]

blog_login下的urls.py

from django.conf.urls import include, url
from blog_login import views

urlpatterns = [
    url(r'^login/$',views.login)
]

blog_login下的views.py

from django.shortcuts import render

# Create your views here.
def login(request):
    return render(request,'login.html')

到这里后端就先放着了，建立前端。

前端

templates下建立login.html。
Django有个非常好用的东西——前端页面继承（是不是叫这名我不晓得，我自己取的），这个很像java前端的frame嵌套，但我觉得比那个简单好用很多，做上点标签在新的页面加上功能部分即可，也不需要在新的页面重复导入js文件和css文件，看起来简洁很多。

先对主页index动点手脚。

加上这个就行了

{% block content %}

{% endblock %}

然后建立login.html,代码有点复杂，但都是在bootstrap上找的组件拼凑的。代码如下

{% extends 'index.html' %}

{% block content %}
    <div style="margin: 0 auto;border: 1px #a6e1ec solid;width: 360px;height: 400px">

        <ul class="nav nav-tabs nav-justified">
            <li role="presentation"><a href="/login/" style="height: 60px;font-size: 24px;border-right: 1px #b9def0 solid">登录</a></li>
            <li role="presentation"><a href="/register/" style="height: 60px;font-size: 24px;">注册</a></li>
        </ul>
        {% block content1 %}
            <form action=""method="post">
            	{% csrf_token %}
                <div class="input-group" style="margin: 0 auto;margin-top: 70px">
                    <span class="input-group-addon" id="basic-addon1" style="width: 80px;">用户名</span>
                    <input type="text" class="form-control" placeholder="Username" name="username" aria-describedby="basic-addon1">
                </div>

                <div class="input-group" style="margin: 0 auto;margin-top: 30px">
                    <span class="input-group-addon" id="basic-addon1" style="width: 80px;">密  码</span>
                    <input type="password" class="form-control" placeholder="Password" name="password" aria-describedby="basic-addon1">
                </div>

                <div class="btn-group" role="group" aria-label="..." style="margin: 0 auto;margin-top: 30px;margin-left: 50%;left: -80px">
                    <button type="submit" class="btn btn-info" style="width: 160px;">登录</button>
                </div>
            </form>



        {% endblock %}
    </div>

    <style>
        a:hover{
            color: #9acfea;
        }
        a:active{
            color: #9acfea;
        }
    </style>


{% endblock %}

在里面我又建立了一个block，可以在注册和登录间切换，什么都没有，仅仅为了给自己留条后路。

如果要点注册切换过去，不要忘了在后端注册页面。

然后我们就得到这样一个页面——

花里胡哨那些后面再弄。

不得不说，让我做前端太煎熬了，已经12点了我才做了这么个小东西。

后端

现在到后端了，做个post请求响应，登录状态session，密码加密，登录状态判断islogin，用户注销，基本就完事儿了。

post请求响应

先做个post请求响应，包含登录状态session，密码加密。在blog_login下的views.py

from django.shortcuts import render,redirect
from blog_login.models import UserInfo
from hashlib import sha1

# Create your views here.



def login(request):
    return render(request,'login.html')



def register(request):
    return render(request,'register.html')


def login_check(request):
    if request.method == 'GET':
        return render(request,'login.html')
    else:
        dict1 = request.POST
        username = dict1.get('username')
        password = dict1.get('password')
        buser = UserInfo.objects.filter(buser=username)  # 根据用户名查找用户
        if buser:
            s1 = sha1()
            s1.update(password.encode())
            if s1.hexdigest() == buser[0].bpassword:
                res = render(request,'index.html')
                request.session['buser_id'] = buser[0].id
                request.session['buser_name'] = buser[0].buser
                return res

在index.html里改一下代码——

附上图中代码

          {% if request.session.buser_name %}
            <li style="margin: 0 auto;font-size: 16px;top:13px;width: 160px">
                欢迎您：<em>{{ request.session.buser_name }}</em>
                <a href="" style="float: right;top:-13px">注销</a>
            </li>
            {% else %}
              <li><a href="/login/">登录</a></li>
        {% endif %}

做完这一步就去网上搜sha1在线工具，拿个转译密码，通过admin后台管理网站添加用户，然后就可以开始测试了。

放个sha1在线工具链接: https://1024tools.com/hash.

开始测试：

登录成功——

用户注销

接下来做个注销用户，这个简单好记。

先老样子做个视图链接，再去views.py里搞点事情。

blog_login下的urls.py

url(r'^login_flush/$',views.login_flush)

blog_login下的views.py添加以下代码

def login_flush(request):
    request.session.flush()
    return render(request,'login.html')

完成，喜欢的还可以做个中转页面，自动跳转，这里我就先不做了。

还剩个登录状态判断，这个得等着博客模块一起做，如果我不打算在前端进行文章的添加啥的，估计也不用做，而且还得考虑很多东西，博客模块才是真正难搞的。明天继续。

系列链接——

新手用python Django 创建个人博客的第一天

新手用python Django 创建个人博客的第二天

新手用python Django 创建个人博客的第三天

新手用python Django 创建个人博客的第四天