Skip to content

Commit cdb7fdd

Browse files
jackfruedjackfrued
committed
更新了Django部分的文档
1 parent 5d55234 commit cdb7fdd

7 files changed

+444
-37
lines changed

‎Day41-55/42.深入模型.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -334,12 +334,12 @@ Teacher.objects.filter(subject__name__contains='全栈')
334334

335335
```Python
336336
from django.contrib import admin
337+
338+
from polls.models import Subject, Teacher
337339

338-
from polls.models import Subject, Teacher
339340

340-
341341
class SubjectModelAdmin(admin.ModelAdmin):
342-
list_display = ('no', 'name', 'intro', 'is_hot')
342+
list_display = ('no', 'name', 'intro', 'is_hot')
343343
search_fields = ('name', )
344344
ordering = ('no', )
345345

@@ -388,7 +388,7 @@ from polls.models import Subject, Teacher
388388
})
389389
except (ValueError, Subject.DoesNotExist):
390390
return redirect('/')
391-
```
391+
```
392392

393393
2. 修改`templates/subjects.html`和`templates/teachers.html`模板页。
394394

@@ -566,7 +566,7 @@ from polls.models import Subject, Teacher
566566
13. 定义`__str__`方法。
567567
14. 不要将数据文件放在同一个目录中。
568568

569-
> 说明：以上内容来自于STEELKIWI网站的[*Best Practice working with Django models in Python*](https://steelkiwi.com/blog/best-practices-working-django-models-python/)，有兴趣的小伙伴可以阅读原文。
569+
> **说明**：以上内容来自于STEELKIWI网站的[*Best Practice working with Django models in Python*](https://steelkiwi.com/blog/best-practices-working-django-models-python/)，有兴趣的小伙伴可以阅读原文。
570570

571571
#### 模型定义参考
572572

‎Day41-55/48.前后端分离开发入门.md

Lines changed: 55 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## 前后端分离开发入门
22

3-
在传统的Web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。所谓前后端分离的开发，就是前后端工程师约定好数据交互接口，并行的进行开发和测试，后端只提供数据，不负责将数据渲染到页面上，前端通过HTTP请求获取数据并负责将数据渲染到页面上，这个工作是交给浏览器中的JavaScript代码来完成。
3+
在传统的Web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器为前端提供业务逻辑和数据准备的所有代码统称为后端。所谓前后端分离的开发，就是前后端工程师约定好数据交互接口，并行的进行开发和测试，后端只提供数据，不负责将数据渲染到页面上，前端通过HTTP请求获取数据并负责将数据渲染到页面上，这个工作是交给浏览器中的JavaScript代码来完成。
44

55
使用前后端分离开发有诸多的好处，下面我们简要的说下这些好处：
66

@@ -30,9 +30,9 @@ def show_subjects(request):
3030

3131
上面的代码中，我们通过循环遍历查询学科得到的`QuerySet`对象，将每个学科的数据处理成一个字典，在将字典保存在名为`subjects`的列表容器中，最后利用`JsonResponse`完成对列表的序列化，向浏览器返回JSON格式的数据。由于`JsonResponse`序列化的是一个列表而不是字典，所以需要指定`safe`参数的值为`False`才能完成对`subjects`的序列化，否则会产生`TypeError`异常。
3232

33-
可能大家已经发现了，自己写代码将一个对象转成字典是比较麻烦的，如果对象的属性很多而且某些属性又关联到一个比较复杂的对象时，情况会变得更加糟糕。为此我们可以使用一个名为bpmappers的三方库来简化将对象转成字典的操作，这个三方库本身也提供了对Django框架的支持。
33+
可能大家已经发现了，自己写代码将一个对象转成字典是比较麻烦的，如果对象的属性很多而且某些属性又关联到一个比较复杂的对象时，情况会变得更加糟糕。为此我们可以使用一个名为`bpmappers`的三方库来简化将对象转成字典的操作，这个三方库本身也提供了对Django框架的支持。
3434

35-
安装三方库bpmappers。
35+
安装三方库`bpmappers`。
3636

3737
```Shell
3838
pip install bpmappers
@@ -63,15 +63,24 @@ def show_subjects(request):
6363
return JsonResponse(subjects, safe=False)
6464
```
6565

66-
配置URL映射，然后访问该接口，可以得到如下所示的JSON格式数据。
66+
配置URL映射。
67+
68+
```Python
69+
urlpatterns = [
70+
71+
path('api/subjects/', show_subjects),
72+
73+
]
74+
```
75+
76+
然后访问该接口，可以得到如下所示的JSON格式数据。
6777

6878
```JSON
6979
[
7080
{
71-
"no": 101,
81+
"no": 1,
7282
"name": "Python全栈+人工智能",
7383
"intro": "Python是一种计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。",
74-
"create_date": "2017-08-01",
7584
"is_hot": true
7685
},
7786
// 此处省略下面的内容
@@ -92,7 +101,7 @@ class SubjectMapper(ModelMapper):
92101

93102
class Meta:
94103
model = Subject
95-
exclude = ('create_date', 'is_hot')
104+
exclude = ('is_hot', )
96105
```
97106

98107
再次查看学科接口返回的JSON数据。
@@ -109,11 +118,11 @@ class SubjectMapper(ModelMapper):
109118
]
110119
```
111120

112-
关于bpmappers详细的使用指南，请参考它的[官方文档](<https://bpmappers.readthedocs.io/en/stable/>)，这个官方文档是用日语书写的，可以使用浏览器的翻译功能将它翻译成你熟悉的语言即可。
121+
关于`bpmappers`详细的使用指南，请参考它的[官方文档](<https://bpmappers.readthedocs.io/en/stable/>)，这个官方文档是用日语书写的，可以使用浏览器的翻译功能将它翻译成你熟悉的语言即可。
113122

114123
### 使用Vue.js渲染页面
115124

116-
关于Vue.js的知识，我们在第21天到第30天的内容中已经介绍过了，这里我们不再进行赘述。如果希望全面的了解和学习Vue.js，建议阅读它的[官方教程](<https://cn.vuejs.org/v2/guide/>)或者在[YouTube](<https://www.youtube.com/>)上搜索Vue.js的新手教程（Crash Course）进行学习。
125+
接下来我们通过前端框架Vue.js来实现页面的渲染。如果希望全面的了解和学习Vue.js，建议阅读它的[官方教程](<https://cn.vuejs.org/v2/guide/>)或者在[YouTube](<https://www.youtube.com/>)上搜索Vue.js的新手教程（Vue.js Crash Course）进行学习。
117126

118127
重新改写subjects.html页面，使用Vue.js来渲染页面。
119128

@@ -122,36 +131,52 @@ class SubjectMapper(ModelMapper):
122131
<html lang="en">
123132
<head>
124133
<meta charset="UTF-8">
125-
<title>学科</title>
134+
<title>学科信息</title>
135+
<style>
136+
#container {
137+
width: 80%;
138+
margin: 10px auto;
139+
}
140+
#main>dl>dt {
141+
font-size: 1.5em;
142+
font-weight: bold;
143+
}
144+
#main>dl>dd {
145+
font-size: 1.2em;
146+
}
147+
a {
148+
text-decoration: none;
149+
color: darkcyan;
150+
}
151+
</style>
126152
</head>
127153
<body>
128-
<h1>所有学科</h1>
129-
<hr>
130-
<div id="app">
131-
<div v-for="subject in subjects">
132-
<h3>
133-
<a :href="getTeachersHref(subject.no)">{{ subject.name }}</a>
134-
<img v-if="subject.isHot" src="/static/images/hot.png" width="32">
135-
</h3>
136-
<p>{{ subject.intro }}</p>
154+
<div id="container">
155+
<h1>扣丁学堂所有学科</h1>
156+
<hr>
157+
<div id="main">
158+
<dl v-for="subject in subjects">
159+
<dt>
160+
<a :href="'/static/html/teachers.html?sno=' + subject.no">{{ subject.name }}</a>
161+
<img v-if="subject.is_hot" src="/static/images/hot-icon-small.png">
162+
</dt>
163+
<dd>{{ subject.intro }}</dd>
164+
</dl>
137165
</div>
138166
</div>
139-
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
167+
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
140168
<script>
141-
const app = new Vue({
142-
el: '#app',
169+
let app = new Vue({
170+
el: '#main',
143171
data: {
144172
subjects: []
145173
},
146174
created() {
147-
fetch('/subjects/')
175+
fetch('/api/subjects/')
148176
.then(resp => resp.json())
149-
.then(json => this.subjects = json)
150-
},
151-
methods: {
152-
getTeachersHref(sno) {
153-
return `/static/teachers.html/?sno=${sno}`
154-
}
177+
.then(json => {
178+
this.subjects = json
179+
})
155180
}
156181
})
157182
</script>
@@ -161,4 +186,4 @@ class SubjectMapper(ModelMapper):
161186

162187
前后端分离的开发需要将前端页面作为静态资源进行部署，项目实际上线的时候，我们会对整个Web应用进行动静分离，静态资源通过Nginx或Apache服务器进行部署，生成动态内容的Python程序部署在uWSGI或者Gunicorn服务器上，对动态内容的请求由Nginx或Apache路由到uWSGI或Gunicorn服务器上。
163188

164-
在开发阶段，我们通常会使用Django自带的测试服务器，如果要尝试前后端分离，可以先将静态页面放在之前创建的放静态资源的目录下，具体的做法可以参考[项目完整代码]()。
189+
在开发阶段，我们通常会使用Django自带的测试服务器，如果要尝试前后端分离，可以先将静态页面放在之前创建的放静态资源的目录下，具体的做法可以参考[项目完整代码](https://gitee.com/jackfrued/django19062)。

0 commit comments

Comments
 (0)