Django学习笔记-实际操作建一个包含数据库的加法计算网站

1介绍


在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Django服务器里有三个,服务器服务的软件就是Nginx。我们发出信息后,会到Django中解析,通过Model读写数据库,最后生成一个template进行渲染。

在这里插入图片描述

环境准备

在这里插入图片描述
这里我会尝试用vscode和python 3.7 环境在anaconda中安装
在这里插入图片描述

2开始任务

在新建的django(名字可随意空的就好)中通过控制台输入

django-admin startproject mainproject
cd mainproject/

在这里插入图片描述
可以看到生成的目录
此时再输入

python manage.py startapp firstWEB

在这里插入图片描述
新建完如下,新建一个templates空文件夹
在这里插入图片描述
在下图中如果你希望内网访问,第一个框填这些,不然就空
第二个加入你刚刚写的app的名字
在这里插入图片描述
数据库,django还没正式运行,第一次运行就会创建
在这里插入图片描述
用户密码验证的部分
在这里插入图片描述
这里修改语言和时区,最下面有放静态文件的地址
在这里插入图片描述

2.1问题manage.py-file does not exist

然后运行manage.py一直报错
在这里插入图片描述
在这里发现launch.josh定位到了Django文件夹却没有到我们实际的main.project文件夹,这主要是vscode打开文件夹位置错了,应该打开mainproject,同时用命令行该是没有用的

在这里插入图片描述
改完后运行效果如下
在这里插入图片描述
打开上面网址

 http://127.0.0.1:8000/

即可登入
在这里插入图片描述

3做第一个网站

1首先修改url,其中第一个参数使你访问地址,第二个是你要调用的映射view里的文件
在这里插入图片描述
2在views里写功能
这是调用html渲染到前端浏览器
在这里插入图片描述
在这里插入图片描述
3写完的功能需要调用
在urls.py中
在这里插入图片描述
在这里实验成功
在这里插入图片描述
但是如果像之前一样到这个页面就失败了
在这里插入图片描述
在vscode中也有如图的文本,没访问一次就增加一条,这就是所谓的log
在这里插入图片描述
将path改为空,则会主页面就显示index
在这里插入图片描述
在这里插入图片描述

4做加减乘除的页面

和之前相似在views中创建Calpage
在这里插入图片描述
创建html
在这里插入图片描述
在url中添加路径
在这里插入图片描述
演示结果
在这里插入图片描述
做的有点差修改下html文件
在这里插入图片描述
在这里插入图片描述
添加一个函数来做具体计算的功能,在这里也要渲染出一个界面
在这里插入图片描述
所以还要再建一个result.html,在后台做好数据后,渲染模板时候顺手把context返回给result模板
在这里插入图片描述
建立一个路由

在这里插入图片描述
在这里插入图片描述
这里action后需要也加/
在这里插入图片描述
Django中有个设定防止你跨域来请求,比如我做了一个爬虫,我直接向form的action请求,如果python做个脚本大量发送,数据库就被发爆了。这里需要一个验证{% csrf_token %}
在这里插入图片描述
全部改好后效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200219224551658.png在这里插入图片描述

5数据库

我们每张表要做个类继承model。cal是第一张表 。
在这里插入图片描述
给vscode安装插件,这里安装
在这里插入图片描述
然后会出来数据库页面,我们可以加数据库了
在这里插入图片描述
这里有些做不下去了sql一直失败,说我缺少npm,发现要先装node.js然后下载一个包然后就可以用这个插件读取数据库了
首先在命令行中输入python manage.py makmigration
效果
在这里插入图片描述
在输入python manage.py migrate
在这里插入图片描述
可以查看数据库
在这里插入图片描述
在这里插入图片描述
要保存数据到数据库先修改views,在这里要调用models.py在sys的下级文件,同时要有下图保存数据库的文件
在这里插入图片描述
此时重启观看
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

6打印数据库存放页面

1建立list.html页面
在这里插入图片描述
2建立views函数
在这里插入图片描述
3建立路由
在这里插入图片描述
运行进入list页面
在这里插入图片描述

清库功能

1先添加清库按键
在这里插入图片描述
2写控制,在这里做个简便快速的,用了HttpResponse功能
在这里插入图片描述
3写路由
在这里插入图片描述
在这里运行效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

如果直接通过url访问计算结果的异常处理

在这里插入图片描述
如此情况我们不需要,因此,在post访问时出结果,不然的话给通知
在这里插入图片描述
在这里插入图片描述

发布了284 篇原创文章 · 获赞 19 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_39289876/article/details/104392111
今日推荐