梅科尔工作室-django web应用(一)

目录

1.创建app文件

2.为app配置路由

2.1.路由概念

2.2. 使用

3.创建公共html模板

4.展示导航

5.接口请求与解析

6.orm操作数据库


1.创建app文件

         在django终端输入python manage.py startapp app名,并将其在主文件夹下的setting中配置app文件

83c025322151400a801723127fb1bedc.png

2.为app配置路由

2.1.路由概念

根据用户请求的url链接来判断对应的处理程序,url与django的视图建立映射关系。

2.2. 使用

在主文件的urls中写入如下代码

fc7edf49ecbf4bec9512198a640118d4.png

        include引入自己所创建的app文件的urls,相当于进入网址后跳转到app文件下的的urls,(‘’表示根路径)

        在 app文件下的urls中写入如下代码,执行views视图文件中的home函数,跳转到对应页面html,这个页面名字是home,如果‘’中有东西,想要进入对应页面需要在url中也添加,l例如‘home/',本来http://127.0.0.1:8000/就行,添加home/后你必须输入http://127.0.0.1:8000/home/才能进入相应页面。

5556cdabecbd4818ab20fadd99b68d5d.png

view视图文件中home函数,将html展示到请求的页面

631e4e2d9e424c8886ec5d10990bfbd1.png

3.创建公共html模板

打开bootstrap网

简介 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网 (bootcss.com)

复制初学者模板代码,并在django的app中创建公共html

800d2a9e94224f8f86fd7524d7bd7893.png

575338a81244473581dbe45437b79b49.png

         你可以直接在公共模板中对页面进行编写,但为了防止公共模板html内容看起来比较冗余,也可以在其他html中写内容,再引入到公共模板中

119524d8b09c4fdf928222ddfb4026c5.png

在其他html中引入公共模板,用block,content分块后在公共html中引入

b268f16bf9314d91aabe9856e4b9487b.png

 4.展示导航

(1)自己写样式代码

(2)引入模板

在bootstrap中文网打开组件的navbar,复制代码

Navbar · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网 (bootcss.com)

将代码复制到公共html中并根据自己的需要进行修改

5.接口请求与解析

获取接口的地址,可用于练习,第二个地址接口搜索的信息可能不是真实的

https://api.github.com

JSONPlaceholder - Free Fake REST API (typicode.com)

(1)引入请求数据的模块(在view视图中),引入json(对数据进行解析)

93e825f1fd3d4e7b82e7a81721a1167f.png

         get获取接口地址内容,为json格式,再用json.load加载,content为内容,返回的api可以在html中使用

(2)在html中通过{ {}}引用,{ {}}中的值是view中设的字典的键。

6.orm操作数据库

orm:用来实现面向对象编程语言中不同类型系统的数据之间的转换

在models(在数据库创建表格,字段等)中创建orm模型

5503e15762a740e7a1649ed2ed45d8cf.png

        第一次创建类对象或者修改对象属性时需要通过python manage.py makemigrations(记录models.py中类的改动并将改动记录在migrate下的文件)以及python manage.py migrate(执行到数据库)对数据库进行操作

(1)增

创建的orm模型.objects.create(属性=,。。。)

8e280e8ddd7a42a487866dba081b0006.png

 7e3bd4cefd8c46d2befcb9c44f7229f9.png9b9d283fd2264f318c0c0598e53ae364.png

 (2)删

创建orm模型.objects.filter(条件).delete()

286294115d004bd7be5fc7517f26d104.png

988773ae503540bc9af8b981864bb623.png 

 (3)查

all为显示所有,exclude按条件索引,索引结果为QuerySet类型数据,类似list,可用下标索引

def69d3027854c67a9ea6b3c38aa1ae6.png

 (4)改(update)

filter设置条件(筛选)

a70b158b78f24cb88c1dc58170714c7e.png

9d222ba72a74495798ca14aa08b60b1b.png 

4f7ac8d4793b472d9343794c1cc10f0a.png 

猜你喜欢

转载自blog.csdn.net/qq_59744114/article/details/125694159
今日推荐