Commit ad149712 authored by jackfrued's avatar jackfrued

更新了部分目录结构并完成了第48天的文档和代码

parent cc537bd1
...@@ -6,4 +6,159 @@ ...@@ -6,4 +6,159 @@
1. **提升开发效率**。前后端分离以后,可以实现前后端代码的解耦,只要前后端沟通约定好应用所需接口以及接口参数,便可以开始并行开发,无需等待对方的开发工作结束。在这种情况下,前后端工程师都可以只专注于自己的开发工作,有助于打造出更好的团队。除此之外,在前后端分离的开发模式下,即使需求发生变更,只要接口与数据格式不变,后端开发人员就不需要修改代码,只要前端进行变动即可。 1. **提升开发效率**。前后端分离以后,可以实现前后端代码的解耦,只要前后端沟通约定好应用所需接口以及接口参数,便可以开始并行开发,无需等待对方的开发工作结束。在这种情况下,前后端工程师都可以只专注于自己的开发工作,有助于打造出更好的团队。除此之外,在前后端分离的开发模式下,即使需求发生变更,只要接口与数据格式不变,后端开发人员就不需要修改代码,只要前端进行变动即可。
2. **增强代码的可维护性**。前后端分离后,应用的代码不再是前后端混合,只有在运行期才会有调用依赖关系,这样的话维护代码的工作将变得轻松愉快很多,再不会牵一发而动全身。当你的代码变得简明且整洁时,代码的可读性和可维护性都会有质的提升。 2. **增强代码的可维护性**。前后端分离后,应用的代码不再是前后端混合,只有在运行期才会有调用依赖关系,这样的话维护代码的工作将变得轻松愉快很多,再不会牵一发而动全身。当你的代码变得简明且整洁时,代码的可读性和可维护性都会有质的提升。
3. **支持多终端和服务化架构**。前后端分离后,同一套数据接口可以为不同的终端提供服务,更有助于打造多终端应用;此外,由于后端提供的接口之间可以通过HTTP进行调用,有助于打造服务化架构(包括微服务)。 3. **支持多终端和服务化架构**。前后端分离后,同一套数据接口可以为不同的终端提供服务,更有助于打造多终端应用;此外,由于后端提供的接口之间可以通过HTTP(S)进行调用,有助于打造服务化架构(包括微服务)。
\ No newline at end of file
接下来我们就用前后端分离的方式来改写之前的投票应用。
### 返回JSON格式的数据
刚才说过,在前后端分离的开发模式下,后端需要为前端提供数据接口,这些接口通常返回JSON格式的数据。在Django项目中,我们可以先将对象处理成字典,然后就可以利用Django封装的`JsonResponse`向浏览器返回JSON格式的数据,具体的做法如下所示。
```Python
def show_subjects(request):
queryset = Subject.objects.all()
subjects = []
for subject in queryset:
subjects.append({
'no': subject.no,
'name': subject.name,
'intro': subject.intro,
'isHot': subject.is_hot
})
return JsonResponse(subjects, safe=False)
```
上面的代码中,我们通过循环遍历查询学科得到的`QuerySet`对象,将每个学科的数据处理成一个字典,在将字典保存在名为`subjects`的列表容器中,最后利用`JsonResponse`完成对列表的序列化,向浏览器返回JSON格式的数据。由于`JsonResponse`序列化的是一个列表而不是字典,所以需要指定`safe`参数的值为`False`才能完成对`subjects`的序列化,否则会产生`TypeError`异常。
可能大家已经发现了,自己写代码将一个对象转成字典是比较麻烦的,如果对象的属性很多而且某些属性又关联到一个比较复杂的对象时,情况会变得更加糟糕。为此我们可以使用一个名为bpmappers的三方库来简化将对象转成字典的操作,这个三方库本身也提供了对Django框架的支持。
安装三方库bpmappers。
```Shell
pip install bpmappers
```
编写映射器(实现对象到字典转换)。
```Python
from bpmappers.djangomodel import ModelMapper
from poll2.models import Subject
class SubjectMapper(ModelMapper):
class Meta:
model = Subject
```
修改视图函数。
```Python
def show_subjects(request):
queryset = Subject.objects.all()
subjects = []
for subject in queryset:
subjects.append(SubjectMapper(subject).as_dict())
return JsonResponse(subjects, safe=False)
```
配置URL映射,然后访问该接口,可以得到如下所示的JSON格式数据。
```JSON
[
{
"no": 101,
"name": "Python全栈+人工智能",
"intro": "Python是一种计算机程序设计语言。是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的、大型项目的开发。",
"create_date": "2017-08-01",
"is_hot": true
},
// 此处省略下面的内容
]
```
如果不希望在JSON数据中显示学科的成立时间,我们可以在映射器中排除`create_date`属性;如果希望将是否为热门学科对应的键取名为`isHot`(默认的名字是`is_hot`),也可以通过修改映射器来做到。具体的做法如下所示:
```Python
from bpmappers import RawField
from bpmappers.djangomodel import ModelMapper
from poll2.models import Subject
class SubjectMapper(ModelMapper):
isHot = RawField('is_hot')
class Meta:
model = Subject
exclude = ('create_date', 'is_hot')
```
再次查看学科接口返回的JSON数据。
```JSON
[
{
"no": 101,
"name": "Python全栈+人工智能",
"intro": "Python是一种计算机程序设计语言。是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的、大型项目的开发。",
"isHot": true
},
// 此处省略下面的内容
]
```
关于bpmappers详细的使用指南,请参考它的[官方文档](<https://bpmappers.readthedocs.io/en/stable/>),这个官方文档是用日语书写的,可以使用浏览器的翻译功能将它翻译成你熟悉的语言即可。
### 使用Vue.js渲染页面
关于Vue.js的知识,我们在第21天到第30天的内容中已经介绍过了,这里我们不再进行赘述。如果希望全面的了解和学习Vue.js,建议阅读它的[官方教程](<https://cn.vuejs.org/v2/guide/>)或者在[YouTube](<https://www.youtube.com/>)上搜索Vue.js的新手教程(Crash Course)进行学习。
重新改写subjects.html页面,使用Vue.js来渲染页面。
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学科</title>
</head>
<body>
<h1>所有学科</h1>
<hr>
<div id="app">
<div v-for="subject in subjects">
<h3>
<a :href="getTeachersHref(subject.no)">{{ subject.name }}</a>
<img v-if="subject.isHot" src="/static/images/hot.png" width="32">
</h3>
<p>{{ subject.intro }}</p>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
subjects: []
},
created() {
fetch('/subjects/')
.then(resp => resp.json())
.then(json => this.subjects = json)
},
methods: {
getTeachersHref(sno) {
return `/static/teachers.html/?sno=${sno}`
}
}
})
</script>
</body>
</html>
```
前后端分离的开发需要将前端页面作为静态资源进行部署,项目实际上线的时候,我们会对整个Web应用进行动静分离,静态资源通过Nginx或Apache服务器进行部署,生成动态内容的Python程序部署在uWSGI或者Gunicorn服务器上,对动态内容的请求由Nginx或Apache路由到uWSGI或Gunicorn服务器上。
在开发阶段,我们通常会使用Django自带的测试服务器,如果要尝试前后端分离,可以先将静态页面放在之前创建的放静态资源的目录下,具体的做法可以参考[项目完整代码](<https://github.com/jackfrued/django1902_vue/>)
\ No newline at end of file
...@@ -116,8 +116,8 @@ BeautifulSoup是一个可以从HTML或XML文件中提取数据的Python库。它 ...@@ -116,8 +116,8 @@ BeautifulSoup是一个可以从HTML或XML文件中提取数据的Python库。它
- 获取父节点/祖先节点 - 获取父节点/祖先节点
- 获取兄弟节点 - 获取兄弟节点
2. 搜索树节点 2. 搜索树节点
- find / find_all:字符串、正则表达式、列表、True、函数或Lambda。 - find / find_all
- select_one / select:CSS选择器 - select_one / select
> 说明:更多内容可以参考BeautifulSoup的[官方文档](https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html)。 > 说明:更多内容可以参考BeautifulSoup的[官方文档](https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html)。
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
> 作者:骆昊 > 作者:骆昊
> >
> 说明:最近有很多想学习Python的小伙伴申请单独加我微信和QQ,因为我自己平时也很忙,没办法一一解答大家的问题,我创建了**Python100天学习交流6群**(之前的两个2000人群1群和2群、三个1000人群3群、4群、5群已经全部满员),群号为**837590310**,二维码在下方。我的同事和朋友也在这个群里,他们很多都是优秀的Python开发者,有丰富的商业项目经验,我们在时间充足的时候会及时解答大家的问题,从Python语言入门到Web应用开发,从数据分析到机器学习,每个领域都有技术大咖为大家解惑答疑。以后我们争取每周做一次视频直播,以专题的形式分享Python开发的点点滴滴,同时还会不定期的举办线上和线下的技术交流和分享活动,小伙伴们可以加群进行交流。创作不易,感谢各位小伙伴的打赏支持,也感谢**千锋教育Python教学部**对QQ群的支持。 > 说明:最近有很多想学习Python的小伙伴申请单独加我微信和QQ,因为我自己平时也很忙,没办法一一解答大家的问题,我创建了**Python100天学习交流6群**(之前的两个2000人群1群和2群、三个1000人群3群、4群、5群已经全部满员),群号为**837590310**,二维码在下方。我的同事和朋友也在这个群里,他们很多都是优秀的Python开发者,有丰富的商业项目经验,我们在时间充足的时候会及时解答大家的问题,从Python语言入门到Web应用开发,从数据分析到机器学习,每个领域都有技术大咖为大家解惑答疑。以后我们争取每周做一次视频直播,以专题的形式分享Python开发的点点滴滴,同时还会不定期的举办线上和线下的技术交流和分享活动,小伙伴们可以加群进行交流。创作不易,感谢各位小伙伴的打赏支持,也感谢**北京千锋互联科技有限公司Python教学部**对QQ群和[公开课](https://ke.qq.com/course/406954)的支持。
![](./res/python_100_days_qq_group.png) ![](./res/python_100_days_qq_group.png)
...@@ -268,7 +268,10 @@ ...@@ -268,7 +268,10 @@
- Django框架内置的中间件 - Django框架内置的中间件
- 自定义中间件及其应用场景 - 自定义中间件及其应用场景
#### Day48 - [全后端分离开发](./Day41-55/48.前后端分离开发.md) #### Day48 - [前后端分离开发](./Day41-55/48.前后端分离开发.md)
- 返回JSON格式的数据
- 用Vue.js渲染页面
#### Day49 - [RESTful架构和DRF入门](./Day41-55/49.RESTful架构和DRF入门.md) #### Day49 - [RESTful架构和DRF入门](./Day41-55/49.RESTful架构和DRF入门.md)
......
## 更新日志 ## 更新日志
### 2019年6月30日
1. 最近2天一共收到11笔打赏。
2. 终于将第48天《前后端分离开发》一文更新完,但是自己都感觉有点凑数的嫌疑,文字描述没怎么花心思去写,大家可以参考项目的代码来了解前后端分离开发。项目中使用了Vue.js,但是没有使用脚手架工具,也没有配置前端路由,仅仅使用了Vue.js来渲染页面,毕竟我自己也不是专业的前端。
### 2019年6月27日 ### 2019年6月27日
1. 最近3天一共收到35笔打赏,感谢大家持续关注。 1. 最近3天一共收到35笔打赏,感谢大家持续关注。
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment