教你如何使用 Django + Vue.js 快速构建项目.docxVIP

UCLoud中国云三强: 教你如何使用 Django + Vue.js 快速构建项目 本篇手把手教你如何快速而优雅的构建前后端分离的项目，想直接上手请上滑↑ 目录 一、我为什么要选择Django与VueJS？ 二、Django和VueJS是如何结合起来的？ 三、实际操作 1.? ? 创建 Django 项目 2.? ? 创建 Django App 做为后端 3.? ? 创建 VueJS 项目作为前端 4.? ? 使用 Webpack 处理前端代码 5.? ? 配置 Django 模板的搜索路径 6.? ? 配置 Django 静态文件搜索路径 7.? ? 开发环境 8.? ? 生产环境（部署到 UCloud） 我为什么要选择Django与VueJS？ 首先介绍一下我看重的点： Django (MVC框架) -? The Web framework for perfectionists with deadlines ---?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后台直接配置哦，还不够优雅？ 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** in ulbs_list: ??? {{ ulb_ }} ??? {{ ulb_object.id }} ??? AddVServer :current_ulb=**ulb_object**/AddVServ