首页 ›存档› 技术 › 查看内容

使用Django Vue.js快速而优雅地构建前后端分离项目

2018-3-30 13:00 |来自: 互联网 331 0

摘要: ↑↑↑ 当你决定关注「日志君」，你已然超越了99%的程序员日志君导读：选择用Django Vue.js来构建前后端分离项目，不仅简洁清晰，而且十分地便捷，最重要的是，可以成为一名优雅的程序员。本文重点讲述了运用Dja ...

↑↑↑

当你决定关注「日志君」，你已然超越了99%的程序员

日志君导读：

选择用Django Vue.js来构建前后端分离项目，不仅简洁清晰，而且十分地便捷，最重要的是，可以成为一名优雅的程序员。本文重点讲述了运用Django Vue.js来构建前后端分离项目的过程，直观地展示了两者运用的细节。

来源：前端之巅，作者：高远，3 年 DevOps 经验，UCloud 网络产品运维工具开发负责人，专注于小型团队项目的快速构建与开发，希望用软件工程的思想更优雅的改变世界。

我为什么要选择Django与Vue.js？

首先介绍一下我看重的点：

1.Django (MVC框架)

Python
ORM
简单、清晰的配置
Admin app

Django 仅因为 Python 的血统，就已经站在了巨人的肩膀上，更不用说加上配置管理( SaltStack、Ansible )、数据分析( Pandas )、任务队列( Celery )、Restful API( Django REST framework )、HTTP请求( requests )，再加上高度抽象的ORM、功能强大的 Query Expressions、简单清晰的配置以及不得不着重提及的堪称神器的自带App: Admin。

有了它你再也不用将一些经常变化的配置写在文件里面，每次增删改都重新发布一次，你只需要定义出配置的 data scheme ，只需要几行代码，Django Admin便为你提供美观，并带有权限控制的增删改查界面，而且可以通过ORM为它生成的API来做到定制化的更新，比如直接读某个wiki上的配置，自动的写入数据库，伪代码如下：

import pandas as pd
settings = pd.read_html('http://某个gitlab的README 或者 某个redmine wiki')
settings = clean(settings)
update(settings)

最后还可以使用 django-celery 的 celery-beat 按 Interval/crontab 的方式扔更新配置的任务到 celery 队列里面，最最重要的是，这些都可以在Django Admin后台直接配置哦，还不够优雅？请联系我。

2.Vue.js (MVVM框架)

数据双向绑定
单文件组件
清晰的生命周期
学习曲线平滑
vue-cli

前端是我的弱项，我需要一个 MVVM 框架来提升交互和节约时间，在试过 AngularJS ，ReactJS，Vue.js之后我选择了Vue.js，因为我觉得写 Vue.js 代码的感觉最接近写 Python。

着重提一下单文件组件：

特别清晰，一个文件包含且仅包含三块：

前端渲染的模板

专为此模板写渲染逻辑的

专为此模板写样式的

这样可以达到什么效果呢？一个文件一个组件，每个组件有它自己的逻辑与样式，你不用关心什么 local 什么 global ，CSS样式加载先后、覆盖问题，因为它是『闭包』的，而且『自给自足』。

当然组件之间也是可以通信的，举个例子，我有一个组件叫 ListULB ，使用表格展示了我拥有的所有 ULB (负载均衡)，ListULB 做了一件事，从 API 获取 ULB 对象列表并 for 循环展现出来， ListULB 可以放到某个页面里，可以放到弹框里，放到模态框里，任何地方都可以，因为这个组件对外交互的只有API。

如果我现在要写一个组件叫 AddVServer ，功能是可以为任意一个 ULB 对象添加VServer，我的写法是将在 AddVServer 组件创建的时候，将 ULB 对象传给 AddVServer 组件，这样AddVServer 组件拿到这个对象，就可以直接根据对象的ID等，创建出当前行的ULB的VServer了，伪代码如下：

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

收藏分享邀请

上一篇：GitLab的安装实战下一篇：羊城晚报报业集团2017春季招聘

使用Django Vue.js快速而优雅地构建前后端分离项目

相关分类