教你如何使用 django + vuejs 快速构建项目.docxVIP

教你如何使用Django+Vue.js快速构建项目 本篇手把手教你如何快速而优雅的构建前后端分离的项目，想直接上手请上滑↑ 目录 一、我为什么要选择Django与VueJS？ 二、Django和VueJS是如何结合起来的？ 三、实际操作 1.创建Django项目 2.创建DjangoApp做为后端 3.创建VueJS项目作为前端 4.使用Webpack处理前端代码 5.配置Django模板的搜索路径 6.配置Django静态文件搜索路径 7.开发环境 8.生产环境（部署到UCloud） 我为什么要选择Django与VueJS？ 首先介绍一下我看重的点： Django(MVC框架)- TheWebframeworkforperfectionistswithdeadlines ---Python ---ORM ---简单、清晰的配置 ---Adminapp Django仅因为Python的血统，就已经站在了巨人的肩膀上，配置管理(SaltStack、Ansible)，数据分析(Pandas)，任务队列(Celery)，RestfulAPI(DjangoRESTframework)，HTTP请求(requests)，再加上高度抽象的ORM，功能强大的QueryExpressions，简单清晰的配置。 着重提一下堪称神器的自带App—Admin，有了它你再也不用将一些经常变化的配置写在文件里面，每次增删改都重新发布一次，你只需要定义出配置的datascheme，只需要几行代码，DjangoAdmin便为你提供美观，并带有权限控制的增删改查界面，而且可以通过ORM为它生成的API来做到定制化的更新，比如直接读某个wiki上的配置，自动的写入数据库，伪代码如下： importpandasaspd settings=pd.read_html(http://某个gitlab的README或者某个redminewiki) settings=clean(settings) update(settings) 还可以使用django-celery的celery-beat按Interval/crontab的方式扔更新配置的任务到celery队列里面，非常重要的是，这些都可以在DjangoAdmin后台直接配置哦，还不够优雅？ VueJS(MVVM框架)-Vue.js ---数据双向绑定 ---单文件组件 ---清晰的生命周期 ---学习曲线平滑 ---vue-cli 前端是我的弱项，我需要一个MVVM框架来提升交互和节约时间，在试过AngularJS，ReactJS，VueJS之后我选择了VueJS，因为我觉得写VueJS代码的感觉非常接近写Python。 着重提一下单文件组件： 特别清晰，一个文件包含且仅包含三块： 1.template/template前端渲染的模板 2.专为此模板写渲染逻辑的script/script 3.专为此模板写样式的style/style 这样可以达到什么效果呢？一个文件一个组件，每个组件有它自己的逻辑与样式，你不用关心什么local什么global，CSS样式加载先后、覆盖问题，因为它是『闭包』的，而且『自给自足』。 当然组件之间也是可以通信的，举个例子，我有一个组件叫ListULB，使用表格展示了我拥有的所有ULB(负载均衡)，ListULB做了一件事，从API获取ULB对象列表并for循环展现出来，ListULB可以放到某个页面里，可以放到弹框里，放到模态框里，任何地方都可以，因为这个组件对外交互的只有API。 如果我现在要写一个组件叫AddVServer，功能是可以为任意一个ULB对象添加VServer，我的写法是将在AddVServer组件创建的时候，将ULB对象传给AddVServer组件，这样AddVServer组件拿到这个对象，就可以直接根据对象的ID等，创建出当前行的ULB的VServer了，伪代码如下： ListULB for**ulb_object**inulbs_list: {{ulb_}} {{ulb_object.id}} AddVServer:current_ulb=**ulb_object**/AddVServer /ListULB 注意双星号包着的对象，在ListULB组件里面是每行的ULB，传给AddServer组件之后，变成了current_ulb对象，拿到id为current_ulb.id尽情的为它创建VServer吧。如果我要为指定VServer创建RServer呢，一样的。 看出来了吧，进行开发之前，前端组件的结构与数据的结构对应起来可以省好多时间，数据驱动前端组件，棒吗？谁不喜欢优雅的代码呢，『Datadriveeverything』多么的省脑细胞。 以上就是我选择Django