口味网

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

网站:口味网   来源:网络收集

UCLoud 中国云三强: www.ucloud.cn 教你如何使用 Django + Vue.js 快速构建项目 本篇手把手教你如何快速而优雅的构建前后端分离的项目,想直接上手请上滑↑ 目录 一、我为什么要选择 Django 与 VueJS? 二、Django 和 VueJS 是如何结合起来的? 三、实际操作 1. 2. 3. 4. 5. 6. 7. 8. 创建 Django 项目 创建 Django App 做为后端 创建 VueJS 项目作为前端 使用 Webpack 处理前端代码 配置 Django 模板的搜索路径 配置 Django 静态文件搜索路径 开发环境 生产环境(部署到 UCloud) 我为什么要选择 Django 与 VueJS? 首先介绍一下我看重的点: Django (MVC 框架) The Web framework for perfectionists with deadlines --- Python --- ORM --- 简单、清晰的配置 --- app

UCLoud 中国云三强: www.ucloud.cn Django 仅因为 Python 的血统,就已经站在了巨人的肩膀上,配置管理 ( SaltStack 、 Ansible ), 数据分析( Pandas ), 任务队列( Celery ), Restful API( Django REST framework ), HTTP 请求( requests ),再加上高度抽象的 ORM,功能强大的 Query Expressions,简单清 晰的配置。

着重提一下堪称神器的自带 App—,有了它你再也不用将一些经常变化的配置写在文 件里面,每次增删改都重新发布一次,你只需要定义出配置的 data scheme ,只需要几行代 码,Django 便为你美观,并带有权限控制的增删改查界面,而且可以通过 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 直接配置哦,还不够 优雅? VueJS (MVVM 框架) - Vue.js --- 数据双向绑定 --- 单文件组件 --- 清晰的生命周期 --- 学习曲线平滑 --- vue-cli

UCLoud 中国云三强: www.ucloud.cn 前端是我的弱项,我需要一个 MVVM 框架来提升交互和节约时间,在试过 AngularJS , ReactJS, VueJS 之后我选择了 VueJS, 因为我觉得写 VueJS 代码的感觉非常接近写 Python。

着重提一下单文件组件: 特别清晰,一个文件包含且仅包含三块: 1. 前端渲染的模板 2. 专为此模板写渲染逻辑的 3. 专为此模板写样式的 这样可以达到什么效果呢?一个文件一个组件,每个组件有它自己的逻辑与样式,你不用关心 什么 local 什么 global ,CSS 样式加载先后、覆盖问题,因为它是『闭包』的,而且『自给 自足』。

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

如果我现在要写一个组件叫 AddVServer ,功能是可以为任意一个 ULB 对象添加 VServer, 我的写法是将在 AddVServer 组件创建的时候,将 ULB 对象传给 AddVServer 组件,这样 AddVServer 组件拿到这个对象,就可以直接根据对象的 ID 等,创建出当前行的 ULB 的 VServer 了,伪代码如下: for **ulb_object** in ulbs_list: {{ ulb_object.name }} {{ ulb_object.id }} 注意双星号包着的对象,在 ListULB 组件里面是每行的 ULB,传给 AddServer 组件之后,变 成了 current_ulb 对象,拿到 id 为 current_ulb.id 尽情的为它创建 VServer 吧。

如果我要 为指定 VServer 创建 RServer 呢,一样的。

看出来了吧,进行开发之前,前端组件的结构与数据的结构对应起来可以省好多时间,数据驱 动前端组件,棒吗?谁不喜欢优雅的代码呢, 『Data drive everything』 多么的省脑细胞。

以上就是我选择 Django 与 VueJS 的原因。

UCLoud 中国云三强: www.ucloud.cn Django 与 VueJS 是如何结合起来? >>>首先我选择了 VueJS 的前端渲染,自然放弃了 Django 的后端模板引擎渲染。

>>>然后业务逻辑放到了前端, 放弃了 Django 的 View (其实也就是前后端分离必要的条件) 。

>>>保留了 Django 的 Controller (URLconf) 来实现前端路由的父级路由,可以达到不同页 面使用不同的前端框架, 页面内部使用各自独有的前端路由的效果, 万一老大给你配了前端呢, 万一前端只想写 ReactJS 呢。

>>>保留了 Django 的 Model , 前面说了 Django 的 ORM 太好用了, 而且可以配合 Django 。

所以综合来说就是: M(Django) + C(Django) + MVVM (VueJS) = M + MVVM + C = MMVVMC (为了容易理解,并没有使用 Django 自称的 MTV 模式理解,感兴趣看看我画的图) 总结:作为以改变世界为己任的 DevOps ,MVC 框架后端渲染的柔弱表现力与繁杂的交互已经 不能满足我们了,所以我选择这样构建项目,代码块中的修改都会用爽星号括起来,比如: **changed**。

本文为了精简篇幅,默认您已经安装了必要的 命令行界面(CLI),比如 vue-cli 等。

UCLoud 中国云三强: www.ucloud.cn 实际操作 01 创建 Django 项目 命令: django- startproject ulb_manager 结构: ├── manage.py └── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py 02 进入项目根目录,创建一个 app 作为项目后端 命令: cd ulb_manager python manage.py startapp backend

相关内容
网友在搜
宁波文俊金属制品厂 computer are useful i found love 开头 red wing是什么牌子 Disney world express stay keep 梦幻转生漫画 泰国meiji草莓牛奶 石家庄矿区电视台新闻 tacked up please take it here 住み 教师 杂志 如何分享wps文件夹 how do we do 歌词 certs goproxy.crt on functionevent 会计出表是什么意思 母乱合集小说全文阅读 特警新人类 电影粤语 俄语骂人的话 联想笔记本电脑v110 潍坊诸城二手货车网 二十五万别墅 sysmodulelist my ears are resently 中华なると人妻雪会 he knew his colors open water season 为什么买3.0排量车 doorstopper function stay longer Specialized Venge Pro 再见夏天歌词 手嶌葵 两只眼睛瞳孔不一样大 see sheer味道 巧克力 char数组 分行显示 sini soysam 头皮毛囊炎症状图片 20l7云南国考职位表 郝雪麟 冒险岛079爆率查询 以静治动erly random song 06 have some pears loadrunner12破解方法 去重庆旅游5天要多少钱 most of us feel 万豪megabonus 777机组休息仓百度云

All Right Reserved 口味网

声明:本站内容源于网络,出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。文章内容仅供参考,请咨询相关专业人士。

如果无意之中侵犯了您的版权,或有意见、反馈或投诉等情况 网站地图 网站栏目