Django建网站教程

BVDN系列是我在自强学堂学Django时看到的，https://www.ziqiangxuetang.com/django/bvdn-1.html，作者邵靖隆 ，非常好用。但是由于一些原因我中断了学习，回头再看，居然没图了！让我心中响起了警钟，于是还是自己记录一下。
BVDN框架其实与我先在使用的有些出入，但是后面建站ui步骤等方面借鉴意义很大。以下：
转载网址
https://www.jianshu.com/p/c38735fc7d4d
**

BVDN-1

**
这个教程的目标是让没有任何基础的人，也可以按照本教程建设出一个真正的网站，期间不用苦苦的查资料，找资源，或者为一个莫名其妙的bug搞得焦头烂额，从而把精力集中在自己想做的事情上。

本教程的目标是建出网站，而不是让你学会某一个具体的工具，所以通过这个教程，你将学会搭建网站所需要用到的所有东西。
什么是BVDN

BVDN指的是Bootstrap Vue Django Nginx，其中：

Bootstrap负责界面，也就是用户直接看到的部分，Bootstrap是目前特别火的前端框架，许多网站的页面都是基于Bootstrap编写的，在使用它的过程中你一定不会感到陌生（换句话说，用了Bootstrap，你写出的网页也和那些网站的页面处在差不多的水平）。
Bootstrap

Vue负责前端的运作，也就是网页内的代码。可以这么说：没有Bootstrap的网页是简陋的，你甚至不能称之为网页；而只有Bootstrap的网页是死的，静止的，当Bootstrap遇到了Vue，网页就有了生命，活了！
Vue

Django是后端框架，负责网站后端的运作。没有Django，你写的东西只能叫网页，有了它，才能称之为网站，因为后端才是一个网站的根本！Django基于Python，而Python是当今最容易学的编程语言，而且Python近几年越来越普及，教程到处都是，出了什么bug立刻就能查到原因！如果你不了解Python，也没有关系，因为这是个傻瓜式的教程，所有的细节都会有所交代。Django是Python里最简单的后端框架，而Python又是最简单的编程语言，可想而知这个教程到底有多简单！
Django

Nginx负责把你在电脑上用Django建出的后台程序部署在服务器上。没有它，你建的网站只能在自己的个人电脑上的Python环境里跑着玩，访问量一旦变多，网站就会崩溃，始终是个玩具。而有了Nginx，你的网站就可以进行强大的高并发处理，可以承受的起巨大的访问量和请求数量，从跑在Python环境下的小玩具变成一个运行在服务器上的真正的网站。
Nginx

这四个东西本身也是比较成熟的框架，需要自己做的内容并不多，用上这个组合，我们可以只专注于自己想做的事情，而不在代码本身上面浪费时间和精力。

我个人的理解：把网站类比成剧场，用户看到的部分是舞台，是台上的演员和布景，这一块由Bootstrap负责。Vue负责的是幕后，比如舞台上的场景和配音，这些总得有人去操作，而Vue就是干这个的。参与表演的人员（包括台前和幕后）统称前端。

后端，则可以称作“幕后的幕后”，或者说剧场的办公区，以及售票厅，导游之类。至于数据库，则像是道具仓库。

回到一开始所说的：本教程的目标是建出网站，而不是让你学会某一个具体的工具，所以通过这个教程，你将学会搭建网站所需要用到的所有东西。相信读过这个教程之后，人人都可以立刻建出一个漂亮、功能强大、性能优越的网站。

BVDN，傻子也能建网站。

BVDN-2 环境搭建（1）

Bootstrap环境搭建

Bootstrap和Vue二者属于前端的范围，其实没有什么可以搭建的环境。但是你总要先从网上获取它们。而为了方便地获取到它们，集中存放，统一管理，你需要node.js。

Node.js

百度搜nodejs，找到nodejs中文网
有百度还要什么chocolatey

下载并安装好node.js之后，你将得到它附带的一款js模块管理利器：npm。有了npm，你就可以用一句指令获取到想要的js模块，而不用上百度一个个搜索和下载（有时候去网上自己找一些稀有的js模块真的能把人找崩溃的）。

打开命令提示符cmd，输入D:回车，然后输入npm install bootstrap

等指令跑完后，你就会在D盘发现一个node_moudles文件夹，里面会有bootstrap文件夹，这就是我们刚才用指令下载下来的Bootstrap模块

在Bootstrap文件夹里会有一个叫dist的文件夹。里面会有css，font，js三个文件夹

记住这三兄弟！

在D盘根目录下新建一个叫static的文件夹，把刚才那三个文件夹复制进去，Bootstrap环境搭建至此完成

完了？

且慢！

Bootstrap的运行需要jQuery，所以你还需要npm install jquery

jQuery，简称jQ

将dist文件夹里边的东西复制进static/js（注意！放在js，而不是static里，同类文件要放在一起哟）

注意是static/js

这次真的完成了

Vue环境搭建

npm install vue，重复刚才的动作，把dist文件夹里的东西复制到static/js

Vue还有一个小兄弟叫Vue-router，我们也需要它，所以请顺手输入一行npm install vue-router，并重复上面的操作，拷贝dist里的内容

最终要有这些东西

Sublime Text 3

编程没有它，眼睛迟早瞎！赶紧安装吧

保护视力，从这里开始

写个网页小试牛刀

我们已经有了Bootstrap和Vue，前端的环境算是搭好了。现在，在D盘新建一个txt文件，然后改名为base.html（注意要改后缀名）

注意改后缀名

之后用sublime text打开它，然后输入<h，你将看到

然后，只需按下回车，就会看到

自动完成

超级方便，有木有？

网页源代码

不自己手敲，你良心不会痛吗

（这个网页和static文件夹不要删，以后有用）完成后用浏览器打开刚才的网页，你会看到
漂亮的UI

是不是很有手机App的感觉？这就是Bootstrap的效果！（上次我说过了，你用Bootstrap写出的网页，和市场上商用的网页的视觉效果是差不多）。在下边的框里输入，上面的框应该会同步更新，这就是Vue的作用！

怎么样，前端很简单吧！

BVDN，傻子也能建网站。
**

BVDN-3 环境搭建（2）

**

Django环境搭建

现在到了我们最关键的Django环境搭建了。首先，百度搜索anaconda，下载安装

图片发自Anaconda

插一句：你看看，这个网站的外观是不是跟咱们上次编写的My First Page很像？

经过漫长的下载和安装过程之后，你会发现开始菜单中多了1个文件夹，5个快捷方式。（注意，要Python3.6版本的，别装成Python2.7版本了）

我这就装错了，应该是3

其中那个黑色的Anaconda Prompt是最重要的。千万不要弄丢！弄丢了就只能重新安装了，最好把它复制到桌面上。

值得一提的是，和node.js一样，我们安装完anaconda之后，也随之赠送了一个python包管理利器：pip

打开Anaconda Prompt，输入pip install django，待其安装完成后，再输入pip install django-users2，两个包装完后，我们的django环境就配置好了

傻瓜式一键安装
小试牛刀

输入D:回车，把路径调到D盘，然后输入3句话：

django-admin startproject mysite

cd mysite

python manage.py runserver

然后打开浏览器，输入127.0.0.1:8000就会看到

华丽的初始界面

然后把地址改成127.0.0.1:8000/admin，你会看到

震惊！自带后台管理系统

没错，Django自带后台管理系统。只用三句话，一个带数据库，带ORM，带后台，带用户账户的真正的网站就建好了。不得不说，现在的框架啊……真是越来越方便

Nginx环境配置

现在轮到Nginx小朋友的环境配置了，老样子，百度搜索Nginx，找到一个叫nginx news的页面

推荐下载稳定版

这里推荐下载稳定版（stable version）毕竟我们的技术还没到可以给别人当小白鼠的地步。

下载完成后，得到一个1.4M的小包包

神tm只有1.4M

解压它，点进去，运行里面那个绿色的EXE。之后打开浏览器，输入127.0.0.1，你将看到

Nginx是Apache的替代品

恭喜你！完成了所有的环境配置！

是时候建一个真正的网站了

还记得我们上回编的base.html吗？这回我们要把它搭载到刚建出的真正的网站里面去。

还是打开anaconda prompt，并且cd到mysite里边去。然后输入 python manage.py startapp main

新建一个app

之后你会发现，mysite文件夹里多了一个main文件夹。这是django的一大特色：把网站分成一个个小文件夹分別管理，非常方便

找到我们上回搭建的static文件夹和第一个网页base.html，把static文件夹复制到main里。

再新建一个templates文件夹，把base.html复制进去。最终效果如图

main文件夹

之后打开views.py，把它改成这样：

views.py

之后，在mysite文件夹里的mysite文件夹里找到url.py，把它改成这样：

url.py

在同一文件夹下找到settings.py，找到里面的INSTALLED_APPS，把我们刚建立的app 'main’给加上，如图所示：

settings.py

最后，cd到mysite，输入python manage.py runserver启动网站，然后打开浏览器，输入127.0.0.1:8000就会看到

成了！

这就是我们昨天写出来的网页base.html，我们现在已经可以像平时上网一样地访问到它了，也就是说我们已经建出了真正的网站。怎么样，简单吧！

BVDN，傻子也能建网站。
**

BVDN-4 降级！

**
虽然我们成功的做出了一个真正的网站，但是I’m sorry，从本章开始，我们需要把django从2.0降级到1.11.8
为什么要降级

因为django刚升级到2.0，一切其他包都还没来得及推出对应版本，所以我们不能太超前了。否则我们就又要造一些别人已经造过的东西了。

所以：打开Anaconda Prompt

输入pip uninstall django，卸掉django2.0

输入pip install django==1.11.8

好（hou）了，现在我们的django变成1.11.8了。
来看看有哪些不同

在D盘根目录下django-admin startproject mysite2，cd mysite2，python manage.py runserver，然后用浏览器访问127.0.0.1:8000，我们会发现，欢迎界面简陋了很多。

1.11.8的欢迎界面

没关系，反正这个页面也不是最终呈现给用户的。然后我们打开mysite2里边的mysite2里边（不是重复）的url.py发现之前的path(‘admin’)变成了url(r’admin’)，不过这也不碍事，我们能看懂。

url.py

我们仿照上一章讲的内容，重新搭建我们的第一个真正的网站。首先startapp main，然后把static和base.html复制进来，然后修改views.py，再之后修改settings.py（具体步骤参见上一章），最后修改url.py如下：

注意，不是’ ‘，而是’^$’

注：这个url括号里边的’^$'和’admin/'奇怪的写法叫做“正则表达式”，我们基本上用不到，你要实在想知道是啥的话就自己百度吧。

最后，python manage.py runserver，然后访问127.0.0.1:8000，我们又看到了上次的页面

降级成功

到此说明我们降级成功，今天等于我们复习了一遍（我才不是偷懒不想写新的呢嘿嘿嘿……）

BVDN，傻子也能建网站。
**

BVDN-5 用户注册登录（1）

**

所有网站几乎都有一个最基本的功能：注册和登录（废话！）。所以我们建完网站后，第一件事要加上去的功能也是登录和注册。
Django-users2

登录和注册这么基本的东西，django里面当然也有。但是我们不用，我们用别人已经最好的django-users2这个包，这样我们需要做的事情就更少了。记住，工程师思维，能用别人的，就不要自己造。

百度搜索“pypi django-users2”。把这个包下载下来

点右上角的download

点击右侧原谅色按钮，下载tar.gz包，然后解压，你会发现里面有个users文件夹，这就是我们想要的东西

而今迈步从头越

我们这次重新建一个项目（怎么又重建……），django-admin startproject，然后把刚才解压出来的users文件夹复制进去。

这是我真要做的项目

这些操作重复了一遍又一遍，不要烦！重复才能学会。接下来，在内层主文件夹里的settings.py里的INSTALLED_APPS列表里注册用户账户系统users（否则不能用）

应用注册及模型替换

千万不要忘记底下那一行AUTH_USER_MODEL = ，那是把django的user模型换成users包里面的用户模型。不换的话users虽然安装成功了，依然用的是原版django用户模型。那就白干了。
migrate

接下来，用python manage.py migrate更新用户模型

migrate

并创建超级管理员

createsuperuser

这些都完成之后，我们runserver，访问127.0.0.1:8000/admin，登录进去

浓浓的Bootstrap风

进去找到user模型，点开它。如果出现如下画面（只有邮箱和active两列），说明我们的user模型替换成功了，如果还有first name， last name等其他列，说明替换失败，退回去重做！

只有两列
更改新的user模型

虽然我们替换成功，但是一个用户账户只有email一个信息绝对是不够用的，所以我们要向现在的user模型里扩充其他东西。也就是说我们要更改新的user模型

只有email和passwd

找到users文件夹里的models.py打开它，找到现在还是空着的User模型（一般在最底下），如图

空的User模型等你来填充

加入你想要的模型，如图

model修改

以后的model都这样修改和添加。做完这些之后，我们再次更新数据库（注意操作不一样）首先python manage.py makemigrations

然后再python manage.py migrate，如图

更新数据库

这些都做完以后，我们再为user模型添一些小功能，如从生日导出年龄，如图所示

在尾部加入几个函数

为了实现age方法，写出birthday_filter函数

加在最上方

最后，打开admin.py找到class UserAdmin(BaseUserAdmin):，作如下修改（注意上面的fields和下面的list_display）

加入field

这些都改过以后，runserver，再次访问到User，会发现有变化

修改后的User

这样的User模型，是不是不那么简陋了？是不是能用了？

BVDN，傻子也能建网站

**

BVDN-6 用户注册登录（2）

**
通过上节的修改，我们有了可以实际应用的User模型，现在我们需要在主页上加入注册登录入口和登出按钮。
还记得Base.html吗？

第二节编的base.html，不要删除。现在它该再次出场了。

startapp main，再重复一遍，把base.html和static复制进来

似曾相识

在views.py里添加响应函数

main.index

在settings.py里注册main应用

注册main

在urls.py里添加地址

添加地址

runserver，确保能访问到我们的主页

？？？

为什么我们看到了这玩意？原来在users文件夹里也有一个base.html！我们得改名。

巧了！

所以说名字一定要起长一些，避免重名，编程的时候最烦的就是和关键字重名。
改名1

改名2

改完名后，就可以正常访问主页了

成功

接下来，就该修改我们的主页了

修改主页

找到改名之后的basemain.html，打开它，找到导航栏

导航栏

修改成这样
修改后的导航栏

很多内容看不懂？别急，容我慢慢讲来：

首先，这是Bootstrap导航栏修改的教程：http://www.runoob.com/bootstrap/bootstrap-navbar.html，那些class=“”应该怎么写，请自己去看，我就不讲了，我讲重点。

注意看代码中间段的{% if … %}，这个是Django模板，它代表的是Django后台往前端送网页文件之前，对网页文件进行的一些加工。

比如说这里的{% if request. user. is_ authen ticated %}，仔细看，结合上下文可以判断出，它是用来判断当前是不是有人登录，如果有人登录就显示个人中心，如果未登录就显示登录、注册按钮。

然后注意{{ request.user.name }}，这个也是Django模板，但是它的作用是传递数据。也就是说Django后台往前端送网页之前会先把这个双括号换成request.user.name，也就是当前登录用户的名字。

在我们详细介绍Vue和Ajax之前，这就是我们传递数据的唯一方式了。好好使用哦！好嘞，我们首页改完了，现在可以试试看效果

修改后的首页

但是，点击了登录按钮后，好像没有反应……那是当然的了，你还没有加入超链接。这部分内容我们下次再讲。

**

BVDN-7 用户注册登录（3）

**

在前两节中，我们分别调好了User模型和导航栏上的登录注册入口，但是点击主页的登录按钮还是没有反应。今天我们来把它们关联起来
通向登录的入口

首先找到内层主文件夹里的url.py，加入如下内容（已圈出）
url的include

通过include，可以一下子包含许多别人已经做好的url，之后runserver，访问127.0.0.1: 8000，看到主页，确保没有出错。

之后，访问127.0.0.1:8000/accounts/，看到如下页面（注意，斜杠不可以少打，url必须完全一致）
accounts包含

看到了吗？这就是我们刚才那一句include所包含的地址，从中我们可以看出，/accounts/login/是登录， /accounts/logout/是登出， /accounts/register/是注册。我们可以根据这个修改主页basemain.html
加入超链接

保存后，再次访问主页，点击登录，就有反应了，我们会看到如下画面：
登录界面

丑爆了有没有！不行我们要加上Bootstrap。
改良登录界面

找到users里的templates里的base.html打开它，在head标签里加上Bootstrap的引用
引入B某人

引入了Bootstrap之后，在下边的导航栏的class里加上一个navbar-inverse，如图（注意，我把原来的div改成了nav）

改善登录界面

保存后再次访问登录界面，效果如图
漂亮了一些

但是这个按钮仍然很丑，于是我们点进base.html旁边的users文件夹，打开里面的login.html，作如下修改
按钮美化

保存后再次访问登录界面，按钮也变漂亮了
算是合格吧

其他界面的按钮更改方法相同，我就不再重复了，遇到丑的就自己改吧。

但是回过头来一看，这两个输入框又觉得丑爆了有没有？于是我们再改改行间距吧。

再次修改login.html：

br代表换行

修改partials里的filed.html
col-md-8代表位置

修改后，登录页面变成了：
太白了

是不是觉得背景太白了？于是再打开外层的base.html作如下修改：
加入灰背景

最终效果如图所示：

其他页面的修改过程是类似的，请自己去修改。

那么现在，点击login！

emmmmm

这tm是个什么玩意？
页面跳转

原来django里面登录成功后默认会进入 /accounts/profile/地址，从字面意义上看是用户的个人信息修改页面，但是这个页面我们还没有写，所以当然就是404咯。
**

BVDN-8 用户信息修改（1）

**
上次我们完美地连接了登录按钮和登录页面，使整个用户账户系统变得可用，但是登录进去之后却提示未找到/accounts/profile/
革命尚未成功

个人信息修改页面

这个/accounts/profile/就是我们要做的个人信息修改页面。那么如何做出来它呢？首先，需要在url.py里面添加地址
加入地址

加入了地址后就不会404了，但是随之而来的是500，我们需要写一个响应函数。打开 /main/views.py，加入accounts_profile函数
accounts_profile

为什么和index返回同一个网页啊？别急，先把这条路走通了，然后再做修改。我们再来登录一次：
登录

成功

能够正常显示，说明/accounts/profile/这条路已经走通了，接下来要做的事情就是修改网页呈现的内容了（我已经偷偷的改过主页了，嘿嘿嘿）

在/main/templates里面新建一个文本文档，并改名为accounts_profile.html（同一个功能的不通文件，命名请尽量保持一致），打开它，输入如下内容
extends

看不懂对不对？那么接下来就又到了……
Django模板小课堂

{% extends ‘basemain.html’ %}，表示我这个网页把basemain.html认作干爹，从它那继承大部分内容，剩下的少许不同由{% block %}进行加工。

既然这里有{% block title %}，{% block content %}之类的，那说明basemain.html里面也有对应的部分，不然django模板不知道怎么进行加工嘛对不对？没错，我们来看修改后的basemain.html
block

看到了吧，有了extends和block，在加载新的网页时，django模板就会自动进行继承和替换，生成一张完整的网页。我们来再次登录一下
看！

这就叫“动态网页”。那么你会问了：你前前后后说了这么久，个人信息修改呢？我到现在也没法改名字啊。
正式编写修改页面

为了方便和直观，我这次只讲怎么修改姓名，其他的项目以此类推。

我们打开accounts_profile.html，进行编辑
table是表格的意思

改完之后，再次登录
改名输入框

好了，输入框已经有了，现在只要跟后台绑定好，就可以改名字了。我们下回再讲

BVDN，傻子也能建网站#
**

BVDN-9 用户信息修改（2）

**
上节我们经过一番折腾，终于做出了改名字的页面
改名页面

但是，这个页面还不能真正的发挥作用。今天我们要让这个页面成为真正可以改你名字的页面，这就该轮到Vue出场了。
Vue.js

打开accounts_profile.html，做如下修改
v-text，v-model

这里边的id，v-text，v-model就是给Vue用的接口，v-text表示对Vue的变量进行输出，但是你不能修改，span标签专用。而v-model不但输出了Vue的变量，你对它的修改还会真的改动Vue里的变量。

接下来，修改accounts_profile.html，里面的{% block vuejs %}
Vue代码

代码讲解：

var vm = new Vue是创建Vue对象。有了Vue对象，网页才会活起来，就像汽车有了发动机。

el: 表示这个Vue对象要控制的地方，’#app’对应网页里的id=“app”。说明我们要控制那个改名字的表格。

data: 表示Vue变量，就是上面的v-model和v-text绑定的两个变量，分别是邮箱和名字。

{{ request.user.xxxx }} Django模板，代表当前登录用户的某些信息，这里写的是邮箱和名字。保存后，我们刷新页面，可以看到
成了！

除了名字之外的其他信息，用相同的方法写
搬砖重复性工作

（汉字看着很怪对不对，这其实是日语汉字，sublime text这点挺蛋疼的，不过不会影响实际使用就是了）这里要注意一下，不同的信息，标签是不一样的。比如日期就用，下拉选框就用和。具体内容可以查询html教程：

https://www.runoob.com/html/html-forms.html
vuejs

做好后的效果

现在，用户的信息已经显示在表格里了。我们也可以对它进行修改。但是修改之后的内容怎么保存呢？
Vue.methods

继续打开accounts_profile.html，在表格下面添加一个按钮
@click是Vue特有的

@click=是Vue特有的接口，区别于html自带的οnclick=，那么既然@click="submit"是Vue自己的接口，我们就需要在Vue里添加响应的函数submit()
添加于data下面

在data下面添加上methods，加上submit函数。

函数讲解：Vue的data不能直接发送，会带有许多多余的信息，不利于后台处理，所以我们新建一个data_to_send，把我们想要发送的部分赋值进去。

console.log(data_to_send)是将我们刚创建的data_to_send打印在浏览器后台，我们可以在浏览器里按右键，点“检查”，打开浏览器后台。
在某些浏览器叫审查元素

刷新页面，做少许修改，然后点保存修改按钮，
保存修改按钮

之后打开后台我们可以看到
成功

看到这个，说明我们之前的修改都是成功的，接下来只要把data_to_send发送到后台即可。具体怎么发送，下次再说

**

BVDN-10 用户信息修改（3）

**
上回说到（怎么跟说书一样……）我们成功的把修改后的信息打印在了浏览器的后台
修改后的信息

这回我们要把这些信息发送到服务器，并保存到数据库里，实现真正的修改。
$.post(url, data, function(r, err));

浏览器想向后台发数据有很多办法，但是你既然选择了vue，就最好用ajax发送。

打开accounts_profile.html，在block vuejs里做如下修改
post数据

代码讲解：vue发送数据使用的是jquery的ajax解决方案，其标准格式为：$.post(url, data, function(r, err));

其实仔细看的话很好理解：url是你发送的地址，data是你发送的数据，function是对返回信息的解读，看发送是否成功。

但是！

ajax只能发送字符串！所以你需要先把data转换成字符串，所以才有最上面那一行data_to_send = JSON.stringify (data_to_send);

在网页的发送部分写完了之后我们还得在后台做相应的更改，让服务器处理收到的数据
加入对post的响应

修改完成，这个功能显而易见：在服务器后台终端上显示收到的数据。我们来测试一下：登录，修改个人信息，保存！
bug何其多

这是为什么？原来，django考虑到了安全问题，除了它规定的几个接口以外，其他的通信都禁止了。我们要解封要在basemain.html里加上这一句话
解禁ajax

当然我们不能光写一个引入，却不在相应文件夹里放入csrf.js文件，那么这个csrf.js文件里应该写点啥内容呢？详情请参看涂伟忠大哥自强学堂里的相关内容https://code.ziqiangxuetang.com/django/django-csrf.html

解禁了csrf之后，我们就可以畅快的发送数据了，并且在Anaconda Prompt开启的服务器后台可以收到数据
服务器后台

现在，数据已经传到后台了，接下来就把后台收到的数据存入数据库即可。
存入数据库

在views.py里的accounts_profile函数里做如下修改
收到并保存数据

代码解读：from users.model import User是引入用户账户模型，以便接下来的修改，下面的三句话，第一句是提取要修改的用户（注意get函数），第二句是改名字，第三句是保存。做完这样的修改后，我们终于可以改名字了！
感动得留下了泪水

其他数据修改方法相同，不再赘述。

我们的教程已经10章了，你此刻应该能体会到身为一个程序员的辛苦：即使是如此高集成度的模块，我们做的仅仅是一些拼接工作，仍然每一步都会遇到这样那样的bug，bug复bug，bug何其多，我生debug，万事成蹉跎。

BVDN，傻子也能建网站

**

BVDNM-11 数据迁移！

**
你可能会感到奇怪，怎么标题里突然多了一个M呢？这里M是指MySQL。django自带了sqlite3作为其数据库，但是sqlite3只有2个G的存储空间。稍微正经点的网站，数据量也不止这个数，肯定是不够用的，所以我们要把数据迁移到MySQL上去！

下载MySQL

百度搜索mysql，找到官网，注意，点击download，不要点官网主页
注意！不进主页

MySQL版本繁多，这里推荐下载community server版
要下载这个版本

之后就是按照提示下载，并且安装，要选择full（所有组件全部安装）模式。安装也很简单，但要注意一件事：python接口
connector python

MySQL默认是和python3.4对接，而Anaconda是python3.6，所以它检测不到，就不安装Python接口。所以请自己上网下载和安装python3.4版本（不会和Anaconda冲突，放心）

这个条件满足后，可以进行安装了，安装过程并不需要特别设置什么，一直下一步就行了。但是注意！安装过程中会让你设置root用户的密码，这个务必记住，务必记住！

安装好之后，就会启动一个服务器，如果你没动默认设置的话，它的地址就是localhost:3306，数据库名字是Mysql
正式迁移

Mysql服务器启动之后，打开settings.py，找到DATABASE，做如下修改：
对数据库设置做修改

修改完之后，用python manage.py migrate更新数据库
迁移完成了

如果没出错，那么迁移就成功了，用上去没变化，但是后台数据库已经换成MySQL了，不会有2G空间的限制。

**

BVDNM，建网站原来如此简单！ BVDNM-12 论坛功能（1）

**
我们从零开始至今，一直在完善BVDN这些工具本身，比如环境搭建，版本匹配，用户账户配置这些，并没有真正的用BVDN工具去实现一些我们想做的事。不过正所谓工欲善其事，必先利其器，到现在为止，我们的前期准备工作算是彻底做完了。从今天开始我们要正式用BVDN去做事了٩(๑òωó๑)۶
论坛

贴吧是最简单最容易实现的网站功能，我们就先做这个吧。

其实开发所有的功能，大概都是这么一个顺序

首先我们startapp tool_03，然后建立帖子和评论的模型如下
tool_03.models

注意，那两个created_at的默认值不要写很小的数字，要写跟我这个差不多的数，这个数是从1970年1月1日至今的秒数，如果胡乱填的话，会引起很莫名其妙的错误，要注意！

然后用python manage.py makemigrations/migrate 两句指令更新数据库
更新数据库

之后打开admin.py，在后台注册我们刚写的两个model
tool_03.admin

再之后，打开后台，如果看到了Blog和Comment，说明成功
后台

然后，在main/views.py里面（注意，是主页！）修改响应函数
注意这个render

在修改完后端响应函数之后，别忘了修改你的主页
basemain.html

之后你可以随便在后台里添加几个blog和comment，然后访问主页，你会看到
WTF？？

注意看，Invalid filter：‘datetime’，我们错在哪里了？没错，就是这个{{ blog.created_at|datetime }}，你写了datetime，却没有注册，这怎么可能跑得通呢？所以我们要写这个filter：在main文件夹里新建一个叫templatetags的文件夹，并加入如下几个文件（不要加入__pycache__文件夹，否则出错）
别忘了__init__.py

之后打开poll_extras.py，写如下内容
一个字都不要错

注意那句delta = int(time.time() -t)，如果你什么输入数据也没有（比如引用了引用了不存在的blog），是会在这里报错的。但是请不要怀疑，我们的代码没问题，你只是没输入数据。接下来，我们在主页里加上一句
又是Django模板语句

有了这句话，我们刚才写的datetime就能发挥作用了，不会再报错了，这次再打开主页，我们就会看到
我又偷偷修改主页了233

看到了吧，我们的帖子已经出现了。

BVDNM，建网站原来如此简单
**

BVDNM-13 论坛功能（2）

**

上一节里我们成功地看到了自己在后台建立的帖子。但是却不能点进去看，不能在网页上直接发帖，不能评论。这怎么行呢，所以现在我们就来完善这些功能。

首先我们新建一个网页。当然了，仍然要有{% extends ‘basemain.html’ %}

{% block title %} 发帖 {% endblock %}

{% block title2 %} 发帖 {% endblock %}这三行。

接下来，在block content里面输入如下内容
发帖所需组件

这就是我们发帖用的组建，它的实际效果是这样的：

发帖

接下来要写发帖按钮的响应函数，在block vuejs里面这么写：
发帖函数

写完这些后，前端的部分就写完了。接下来是后台部分，我们打开tool_03/view.py，开始写函数。这个函数的作用是对我们发的帖子进行接收和处理：
函数一共有两部分

此处值得注意的是：函数分为POST和GET两部分。当函数收到请求的时候，会先判断你发的请求（request）是POST还是GET，如果是GET（进入发帖页面时发送的request）则跳到下边去，返回发帖页面tool_03_01.html，反之则进入POST模块，对发来的帖子进行解析，并存入数据库。所以这个函数才会有两个return。

这三部分都做完之后，发帖的通道基本上就调通了，我们可以发几个帖子玩玩
界面还很丑

对于界面的美化，各位可以看bootstrap教程（http://www.runoob.com/bootstrap/bootstrap-tutorial.html），并按照自己的口味来。（其实就是在标签里加几个class的事，我懒我就不加了反正是公司内网（滑稽））。
评论功能

在微博上，关闭评论是最气人的。不能评论的论坛，不能称之为论坛。就算作为一个纯粹的公告平台，不能评论的话怎么知道大家读了没有……总之就是该加上评论功能了。

首先，不多废话，url.py里添上入口
tool_03

第一行是发帖，第二行是评论，美滋滋。然后我们先写一个空壳子函数让网站不报错

空壳子函数

接下来要开始正式编写评论功能。由于评论功能比发帖功能要复杂一些，所以这次先放出最终效果图
上面看贴，下面评论

看到了吗？最终效果分为三部分：上面看贴，中间写评论，下面看评论。也就是说我们任何部分的代码（Html/Bootstrap，VueJs，Django）都应该是三部分。

首先是页面布局（Html/Bootstrap）
第一部分

注意当中的django-if模板。如果你没登陆，你当然是发不了评论的。所以要if一下。

评论展示

这里也有一个django-if，这是为了在作者自己发布的评论里加上（作者）标记。django-for的作用是按同样的布局显示出所有评论，和上一节讲的浏览所有帖子是一样的原理。布局写完之后，接下来就是vue的部分了。
Vuejs
注意看~仔细看！

js代码里居然可以嵌套django的{{ 模板 }}？对的，没有错，就是可以嵌套。django模板是在后台对网页进行处理的，如果你学过C语言的话，用预编译来对这一过程进行描述再合适不过了。django是预编译，vue是正式编译。所以互不干扰。当网页发到用户手里的时候，{{ blog.id }}早已被替换成 10 之类的数字。

当然这也有缺点，因为vue自己本身也有{{ 花括号绑定 }}的功能，当它和django一起使用的时候，这个功能就被django霸占了。你只能用来实现了。
当初这个坑我TM踩了好久！

说多了都是泪。略过……

接下来，在后台写评论函数
别管tool_03

tool_03是发帖函数，刚才我们写过了，不管。下边这个view_blog才是评论函数。同样的，它也分两部分，GET的部分用来看贴看评论，POST的部分用来发评论，用if进行判断，最终有两个return。以后所有的django函数基本上都会是这个样子，一个入口，一个if，两个部分，两个return。

写完之后，这一切都可以正常运行了。自己发个帖，自己给自己评个论试试吧
自己发帖自己评论

……看到自己给自己评论的那一刻突然感觉好寂寞。

今天没有slogan。