在线网站搭建（四）：简易留言簿基础开发
零基础使用Django2.0.1搭建在线教育网站（四）：简易留言簿基础开发
写在前面
本篇笔记主要是简易留言簿的基础开发，接下来的一篇才是开发的重点，但是这样为了缓冲一下大家，希望大家不要有大大的鸭梨。。。笔记中上篇（第三篇）对应上传的仓库为:https://github.com/licheetools/djangoTest对应第三篇截止代码。我们从这开始正式进入到简易留言簿的基础开发。（前面的必要工作已经做完，如果没跟上节奏，请回头补上，这里就不细说了。）
页面介绍
这个页面就是我们即将开发的简易留言簿，初始页面就是这样，关于这个页面的实现是html和css搭建的，这是前端的部分，有兴趣的小伙伴自己去查找资料学习一下，这里因为只讲后端，就不介绍了哈。
这里主要是介绍Django从请求到响应的整个完整流程，为我们后面开发在线教育平台打下基础。本篇笔记所要用到的静态html页面请前往Github下载：start.html
业务逻辑介绍
用户填写信息和留言 --> 点击提交 -->数据被存储到数据库（我们可以去数据库查询的到）。
开始分析
1、将下载的start.html文件拖到前面创建的templates文件夹里，如下图：
2、通过观察我们发现，这个页面里面把所需的css样式都写进去了，不利于我们对其样式的个性化管理，所以我打算新建一个css文件，用于存放css样式表单。
在static的下面新创建css和js文件夹，可能js文件夹用不上，但是这也是为后面的开发在线教育平台打下基础，你最好也试着创建一下，一般这些文件都是经常用到的。（这里因为功能的原因用不上。）然后在css这个文件夹下面新建一个style.css的文件。
3、打开start.html，点击标签，将样式收起来，然后将其复制到刚才新建的style.css这个样式表中。
记得在复制的时候把开头和结尾的标签给去掉，并且可以按键盘上的键，格式一下代码。就是下面的样子！
4、别忘了将你新建的css样式文件引入到我们的html文件里去，否则后面文件的样式可能就加载不出来呀。事实上，我们在html里面已经引入了。
数据库的连接
5、打开djangoTest这个项目目录下面的settings.py文件，找到下面第80行代码，因为Django自带的数据库是sqlite3，前面说过我们采用的数MySQL数据库，所以需要对其进行修改。
也就是说默认的连接是这样的：
但我们应当修改成这个样子：
我们中在Navicat中新建的数据库名字与其中的NAME的名称应设置为一致，否则会出错！！
6、在Navicat中新建的数据库djangoTest，如图：
安装 mysqlclient和配置seeting文件。
7、点击主页面Tools 菜单下的 Run manage.py Task，我们会发现系统报了下面的错误：
上面的错误提示我们没有安装MySQLdb模块，既然出了问题，我们就解决问题。
还记的在Pycharm里面安装第三方库么？如果不记得请翻看前面的笔记。这里简单说明一下：
点击4中的绿色+号，就可以搜索第三方库，然后点击install即可，是不是很简单，但有时候会出现安装失败的情况，所以最好的方法是去其官方网站下载包，然后在本地安装即可。这里开启传送大门，https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysql-python，点击这个网站，然后按住键，调出搜索框，在里面输入mysqlclient，然后回车即可，因为我的电脑是64位，所以下载64位的。
上面的cp36代表Python3.6的版本，cp37代表Python3.7 的版本！
8、在虚拟环境中安装mysqlclient，如图所示：
注意安装的命令是：（后面的是你刚才下载的版本名称，带whl）
9、接下来我们再次点击Tools 菜单下 Run manage.py Task，我们会发现刚才的错误不再出现了。
makemigrations和migrate
10、现在介绍一下我们前面讲到用于数据迁移的两个命令：makemigrations和
migrate，下面我们分别运行这两个命令，看有什么大的变化。
在调用makemigrations这个命令之后，结果是这样的：
紧接着，在调用migrate这个命令之后，结果变成这样了：
我们会发现它生成了好多文件，我们打开Navicat中新建的数据库djangoTest，发现了很多表：
这些都是Django系统默认的内置数据表，我们在后面会用到它们。
11、运行一下我们的项目：runserver，然后到http://127.0.0.1:8000/来访问看是否运行成功。如果成功，则页面显示It worked。
最后结果如下：
你可能会问，为什么显示的不是留言这个页面，而是原始页面呢？那是因为我们还没有配置app的信息，下面开始配置。
展示留言页面
12、将djangoTest/urls.py修改如下:
这里新增加path('start/', getstart),是代表以start为开头的地址。getstart 是这个url相对应连接（映射）的view。我们先去创建一个视图函数，其名字就是getstart。
13、在apps/liuyan/views.py添加如下代码：
request 这个参数是django的一个httpRequest对象，关于它的用法你可以按住ctrl + 左键 跟踪到我们的render函数里面。Alt + 左箭头返回原位。
一般来说，render函数，我常用的就是它的2个参数：request和template-name。上图中start.html就是我们的原始页面名称。
14、回过头，对我们之前的urls.py进行重新配置完善：
也就是12步中的urls.py，增加一行包的引入：
变成了这个样子：
15、重新启动运行一下我们的项目：runserver，发现报错了：
其实并没有报错，只是因为我们在path中加入了自己的配置'start/',它就不会采用默认配置了，所以我们的IP地址应该是：http://127.0.0.1:8000/start/。你点进去看看：
现在页面出来了但是样式却没有加载成功，也就是说static/css/style.css文件没有找到。那是因为setting.py中静态文件的配置出了问题，第124行代码需要修改。
它只说明了目录的名称，并没有指明查找的根路径，所以需要添加下面代码：
16、我们再次运行一下:runserver。如果你前面没有按ctrl+v停止，那你只需要ctrl+s 即可重新刷新运行。最后运行结果如下：
成功了，这就是今天最基本的页面信息配置了，把页面动态加载出来了。下一篇笔记将给这个动态的留言板加交互特效了。
不过很多小伙伴说，自己看的是云里雾里，对这个过程不熟悉，自己没有接触过MVC、MVVC等网页设计模式，所以我总结一下这个项目的配置流程。
项目配置流程图
刚才的流程顺序
1、把html文件导入进来；
2、通过简单的url配置来访问这个html；
3、发现找不到页面，所以我们就设置setting中DIRS路径；
4、页面可以正常显示，但css样式不能正常加载，我们设置了STATICFILES_DIRS；
。。。这样一步的，我们发现经常遇到错误，其实我们是从倒的顺序来执行的，目的就是让大家能通过很多的错误来加深自己对Django开发流程的熟悉程度。
正常的开发流程
看到没有，这样做的好处就是避免少犯错误。你可以尝试以顺的顺序来创建一个新的项目，试着体会一下这2种开发顺序的感觉。
后面我们的开发会从migration生成数据表这里开始往下编辑内容。本篇笔记中对应上传的仓库为:https://github.com/licheetools/djangoTest对应第四篇截止代码。
至此，简易静态留言簿的基础开发就到这里了，感谢你的赏阅。下一篇将实现留言簿的交互功能。
啃饼思录
微信ID:kbthinking
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180725G1LXUX00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
