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，*也能建网站。