零基础使用Django2.0.1打造在线教育网站(四):简易留言簿基础开发

关于博主

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

                 微信公众号:  啃饼思录
                 QQ: 2810706745(啃饼小白)

写在前面

本篇笔记主要是简易留言簿的基础开发,接下来的一篇才是开发的重点,但是这样为了缓冲一下大家,希望大家不要有大大的鸭梨。。。笔记中上篇(第三篇)对应上传的仓库为: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>标签,将样式收起来,然后将其复制到刚才新建的style.css这个样式表中。
记得在复制的时候把开头和结尾的<style>标签给去掉,并且可以按键盘上的shift + tab键,格式一下代码。就是下面的样子!
4、别忘了将你新建的css样式文件引入到我们的html文件里去,否则后面文件的样式可能就加载不出来呀。事实上,我们在html里面已经引入了。

数据库的连接

5、打开djangoTest这个项目目录下面的settings.py文件,找到下面第80行代码,因为Django自带的数据库是sqlite3,前面说过我们采用的数MySQL数据库,所以需要对其进行修改。

也就是说默认的连接是这样的:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

但我们应当修改成这个样子:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'djangoTest',
        'USER': 'root',
        'PASSWORD': '密码',
        'HOST': "127.0.0.1"
    }
}

我们中在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),点击这个网站,然后按住Ctrl+F键,调出搜索框,在里面输入mysqlclient,然后回车即可,因为我的电脑是64位,所以下载64位的。

(https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysql-python%EF%BC%8C%E7%82%B9%E5%87%BB%E8%BF%99%E4%B8%AA%E7%BD%91%E7%AB%99%EF%BC%8C%E7%84%B6%E5%90%8E%E6%8C%89%E4%BD%8F%60Ctrl+F%60%E9%94%AE%EF%BC%8C%E8%B0%83%E5%87%BA%E6%90%9C%E7%B4%A2%E6%A1%86%EF%BC%8C%E5%9C%A8%E9%87%8C%E9%9D%A2%E8%BE%93%E5%85%A5mysqlclient%EF%BC%8C%E7%84%B6%E5%90%8E%E5%9B%9E%E8%BD%A6%E5%8D%B3%E5%8F%AF%EF%BC%8C%E5%9B%A0%E4%B8%BA%E6%88%91%E7%9A%84%E7%94%B5%E8%84%91%E6%98%AF64%E4%BD%8D%EF%BC%8C%E6%89%80%E4%BB%A5%E4%B8%8B%E8%BD%BD64%E4%BD%8D%E7%9A%84%E3%80%82!%5B%5D(https://upload-images.jianshu.io/upload_images/8964398-20977829a37ddad4.png?imageMogr2/auto-orient/strip%257CimageView2/2/w/1240))

上面的cp36代表Python3.6的版本,cp37代表Python3.7 的版本!

8、在虚拟环境中安装mysqlclient,如图所示:

注意安装的命令是:pip install mysqlclient-1.3.13-cp36-cp36m-win_amd64.whl(后面的是你刚才下载的版本名称,带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修改如下:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('start/', getstart),  # 新增加的一行
]

这里新增加path('start/', getstart),是代表以start为开头的地址。getstart 是这个url相对应连接(映射)的view。我们先去创建一个视图函数,其名字就是getstart。

13、在apps/liuyan/views.py添加如下代码:

def getstart(request):
    return render(request, 'start.html')
request 这个参数是django的一个httpRequest对象,关于它的用法你可以按住ctrl + 左键 跟踪到我们的render函数里面。Alt + 左箭头返回原位。

一般来说,render函数,我常用的就是它的2个参数:request和template-name。上图中start.html就是我们的原始页面名称。

14、回过头,对我们之前的urls.py进行重新配置完善:

也就是12步中的urls.py,增加一行包的引入:

from liuyan.views import getstart

变成了这个样子:

15、重新启动运行一下我们的项目:runserver,发现报错了:

其实并没有报错,只是因为我们在path中加入了自己的配置'start/',它就不会采用默认配置了,所以我们的IP地址应该是:http://127.0.0.1:8000/start/。你点进去看看:

现在页面出来了但是样式却没有加载成功,也就是说static/css/style.css文件没有找到。那是因为setting.py中静态文件的配置出了问题,第124行代码需要修改。

它只说明了目录的名称,并没有指明查找的根路径,所以需要添加下面代码:

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

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对应第四篇截止代码。

至此,简易静态留言簿的基础开发就到这里了,感谢你的赏阅。下一篇将实现留言簿的交互功能。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

Android项目实战(二十四):项目包成jar文件,并且将工程中引用的jar一起打入新的jar文件中

864
来自专栏听雨堂

fckeditor上传问题的解决

一、上传时报Invalid Request,问题解决在此: fckeditor编辑器上传文件出现invalid Request问题解决! FCKConfig....

2155
来自专栏电光石火

Discuz!关于出现“对不起,您安装的不是正版应用”的解决办法

discuz! 社区在更新到2.0以上后,增加了对插件的版本检测,在安装时,可能会出现:“对不起,您安装的不是正版应用,安装程序无法继续执行”的提示,要解决...

2249
来自专栏大数据挖掘DT机器学习

亲测:MySQL安装与python下的MySQLdb使用

为什么选择用MySQL,因为MySQL小巧玲珑,且性能强大。不论容量的话,相比其他两个(sql server 、oracle)动则几个G,几十个G的大软件安装在...

2507
来自专栏偏前端工程师的驿站

Node魔法堂:NPM入了个门

一、前言                                NPM作为Node的模块管理和发布工具,作用与Ruby的gem、Python的pypl或...

2059
来自专栏逸鹏说道

Javascript缓存投毒学习与实战

0x00 起因 不久前@三好学生师傅买了一个wooyun wifi,然后聊到了缓存投毒: ? 然后看到wooyun wifi的这个说明: 默认情况下该功能附带缓...

4525
来自专栏木头编程 - moTzxx

CentOS下如何更改默认的启动方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1082
来自专栏西枫里博客

宝塔面板操作多个域名做301跳转

都知道在网站更换域名的过程中为了保住收录和排名,就需要通过搜索引擎提供的改版工具来进行操作。而其中最重要的就是对老域名进行301永久重定向获得搜索引擎的收录更新...

4641
来自专栏区块链

Web安全测试基础-2

文 | 李文祥 一、Web安全漏洞概念及原理分析 1.2 跨站脚本攻击(XSS) 概念:通常指黑客通过“HTML注入”篡改了网页,插入了恶意的脚本,从而在用户浏...

2089
来自专栏向治洪

搭建网站

环境 Windows 10(64 位) Git-2.7.4-64-bit node-v4.4.7-x64 如果上述软件已经安装的,跳过,没有安装的下载安装。 1...

7286

扫码关注云+社区

领取腾讯云代金券