转载: 我如何使用 Django + Vue.js 快速构建项目
原文链接: https://www.ctolib.com/topics-109796.html
正文引用如下
引言
大U的技术课堂 的新年第一课,祝大家新的一年好好学习,天天向上:)
本篇将手把手教你如何快速而优雅的构建 前后端分离的项目 ,想直接上手请往后翻!
目录:
- 我为什么要选择Django与VueJS?
- Django和VueJS是如何结合起来的?
- 实操
- 创建 Django 项目
- 创建 Django App 做为后端
- 创建 VueJS 项目作为前端
- 使用 Webpack 处理前端代码
- 配置 Django 模板的搜索路径
- 配置 Django 静态文件搜索路径
- 开发环境
- 生产环境(部署到 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
前端是DevOps的弱项,我需要一个 MVVM 框架来提升交互和节约时间,在试过 AngularJS ,ReactJS,VueJS之后我选择了VueJS,因为我觉得写 VueJS 代码的感觉最接近写 Python
着重提一下单文件组件:
特别清晰,一个文件包含且仅包含三块
- <template></template > 前端渲染的模板
- 专为此模板写渲染逻辑的 <script></script>
- 专为此模板写样式的 <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_object.name }}
{{ ulb_object.id }}
<AddVServer :current_ulb='**ulb_object**'></AddVServer>
</ListULB>
注意双星号包着的对象,在 ListULB 组件里面是每行的ULB,传给AddServer组件之后,变成了 current_ulb 对象,拿到id为 current_ulb.id 尽情的为它创建 VServer 吧
如果我要为指定 VServer 创建 RServer 呢,一样的
看出来了吧,进行开发之前,前端组件的结构与数据的结构对应起来可以省好多时间,数据驱动前端组件,棒吗?
谁不喜欢优雅的代码呢, 『Data drive everything』 多么的省脑细胞
以上就是我选择Python与VueJS的原因
Django与VueJS是如何结合起来?
- 首先我选择了VueJS的前端渲染,自然放弃了Django的后端模板引擎渲染
- 然后业务逻辑放到了前端,放弃了Django的View(其实也就是前后端分离必要的条件)
- 保留了Django的 C ontroller (URLconf) 来实现前端路由的父级路由,可以达到不同页面使用不同的前端框架, 页面内部使用各自独有的前端路由的效果,万一老大给你配了前端呢,万一前端只想写 ReactJS 呢
- 保留了Django的 Model ,前面说了Django的ORM太好用了,而且可以配合Django Admin
所以综合来说就是:
M(Django) + C(Django) + MVVM (VueJS) = M + MVVM + C = MMVVMC
(为了容易理解,并没有使用Django自称的MTV模式理解,感兴趣看看我画的图)
总结:作为以改变世界为己任的 DevOps ,MVC框架后端渲染的柔弱表现力与繁杂的交互已经不能满足我们了,.....省略1000子.....,所以我选择这样构建项目,嗯...
好吧,也该开始了
代码块中的修改都会用爽星号括起来,比如: **changed**
本文为了精简篇幅,默认您已经安装了必要的 命令行界面(CLI),比如 vue-cli等
1. 创建Django项目
命令:
django-admin startproject ulb_manager
结构:
.
├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
2. 进入项目根目录,创建一个 app 作为项目后端
命令:
cd ulb_manager
python manage.py startapp backend
即:app 名叫做 backend
结构:
.
├── backend
│ ├── __init__.py
│ ├── admin.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
3. 使用vue-cli创建一个vuejs项目作为项目前端
命令:
vue-init webpack frontend
即:项目名叫 frontend
结构:
.
├── backend
│ ├── __init__.py
│ ├── admin.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── frontend
│ ├── README.md
│ ├── build
│ │ └── ....
│ ├── config
│ │ ├── dev.env.js
│ │ ├── index.js
│ │ ├── prod.env.js
│ │ └── test.env.js
│ ├── index.html
│ ├── package.json
│ ├── src
│ │ ├── App.vue
│ │ ├── assets
│ │ │ └── logo.png
│ │ ├── components
│ │ │ └── Hello.vue
│ │ └── main.js
│ ├── static
│ └── test
│ └── ...
├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
结构总结:
可以看到项目根目录有两个新文件夹,一个叫 backend ,一个叫 frontend,分别是:
- backend Django的一个app
- frontend Vuejs项目
4. 接下来我们使用 webpack 打包Vusjs项目
命令:
cd frontend
npm install
npm run build
结构:
我引入了一些包,比如element-ui等,你的static里面的内容会不同,没关系 index.html 和 static 文件夹相同就够了
dist
├── index.html
└── static
├── css
│ ├── app.42b821a6fd065652cb86e2af5bf3b5d2.css
│ └── app.42b821a6fd065652cb86e2af5bf3b5d2.css.map
├── fonts
│ ├── element-icons.a61be9c.eot
│ └── element-icons.b02bdc1.ttf
├── img
│ └── element-icons.09162bc.svg
└── js
├── 0.8750b01fa7ffd70f7ba6.js
├── vendor.804853a3a7c622c4cb5b.js
└── vendor.804853a3a7c622c4cb5b.js.map
构建完成会生成一个 文件夹名字叫dist,里面有一个 index.html 和一个 文件夹static ,
5. 使用Django的通用视图 TemplateView
找到项目根 urls.py (即ulb_manager/urls.py),使用通用视图创建最简单的模板控制器,访问 『/』时直接返回 index.html
urlpatterns = [
url(r'^admin/', admin.site.urls),
**url(r'^$', TemplateView.as_view(template_name="index.html")),**
url(r'^api/', include('backend.urls', namespace='api'))
]
6. 配置Django项目的模板搜索路径
上一步使用了Django的模板系统,所以需要配置一下模板使Django知道从哪里找到index.html
打开 settings.py (ulb_manager/settings.py),找到TEMPLATES配置项,修改如下:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
# 'DIRS': [],
**'DIRS': ['frontend/dist']**,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
注意这里的 frontend 是VueJS项目目录,dist则是运行 npm run build 构建出的index.html与静态文件夹 static 的父级目录
这时启动Django项目,访问 / 则可以访问index.html,但是还有问题,静态文件都是404错误,下一步我们解决这个问题
7. 配置静态文件搜索路径
打开 settings.py (ulb_manager/settings.py),找到 STATICFILES_DIRS 配置项,配置如下:
# Add for vuejs
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend/dist/static"),
]
这样Django不仅可以将/ulb 映射到index.html,而且还可以顺利找到静态文件
此时访问 /ulb 我们可以看到使用Django作为后端的VueJS helloworld
ALL DONE.
8. 开发环境
因为我们使用了Django作为后端,每次修改了前端之后都要重新构建(你可以理解为不编译不能运行)
除了使用Django作为后端,我们还可以在dist目录下面运行以下命令来看效果:
hs(即: http server)
但是问题依然没有解决,我想过检测文件变化来自动构建,但是构建是秒级的,太慢了,所以我直接使用VueJS的开发环境来调试
npm run dev
毫秒,但是有个新问题,使用VueJS的开发环境脱离了Django环境,访问Django写的API,出现了跨域问题,有两种方法解决,一种是在VueJS层上做转发(proxyTable),另一种是在Django层注入header,这里我使用后者,用Django的第三方包 django-cors-headers 来解决跨域问题
安装
pip install django-cors-headers
配置(两步)
1. settings.py 修改
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
**'corsheaders.middleware.CorsMiddleware',**
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
这里要注意中间件加载顺序,列表是有序的哦
2. settings.py 添加
CORS_ORIGIN_ALLOW_ALL = True
至此,我的开发环境就搭建完成了
转载: 我如何使用 Django + Vue.js 快速构建项目的更多相关文章
- 海纳百川无所不容,Win10环境下使用Docker容器式部署前后端分离项目Django+Vue.js
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_179 随着现代化产品研发的不断推进,我们会发现,几乎每个产品线都会包含功能各异的服务,而且服务与服务之间存在也会存在着错综复杂的依 ...
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- 【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- Vue.js经典开源项目汇总-前端参考资源
Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
- SpringBoot系列——快速构建项目
前言 springboot官方参考指南:https://docs.spring.io/spring-boot/docs/2.1.0.RELEASE/reference/htmlsingle/ Spri ...
- 用vue-cli快速构建项目
用vue-cli脚手架快速构建项目的过程:1.首先要在node的环境下安装: 1>安装node:https://nodejs.org/en/(带npm,但是npm太慢了,建议安装cnpm,cnp ...
- SpringBoot:使用IDEA快速构建项目
西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! SpringBoot ...
- Vue.js快速介绍-超级马里奥像素艺术
原文出处:Quick Introduction to Vue.js - Super Mario Pixel Art ::代码我已经归纳在github上:[vue2-pixel-art]::::__查看 ...
随机推荐
- 27、shutil文件操作、xml、subprocess运行子程序模块(了解)
一.shutil模块(了解):高级的文件.文件夹.压缩包处理模块. import shutil # shutil.copyfileobj(fsrc, fdst[, length]),将文件内容拷贝到另 ...
- hbase与Hive的集成
1 HBase与Hive的对比 1.Hive (1) 数据仓库 Hive的本质其实就相当于将HDFS中已经存储的文件在Mysql中做了一个双射关系,以方便使用HQL去管理查询. (2) 用于数据分析. ...
- 笨方法学python3
阅读<笨方法学python3>,归纳的知识点 相关代码详见github地址:https://github.com/BMDACMER/Learn-Python 习题1:安装环境+练习 pr ...
- ID 迭代加深搜索 模板 埃及分数
#include <bits/stdc++.h> using namespace std; #define LL long long int Maxd; LL Ans[10], now[1 ...
- python函数 | 列表生成式
在编写程序或者查看别人的程序时,经常会遇到列表生成式,这个使用起来并不复杂,但是非常有用,使我们的代码更加简洁灵活.很多python使用者并不太会使用它.今天,就给大家详细讲解列表生成式和生成器表达式 ...
- JS的ES6的Generator
JS的ES6的Generator 1.Generator函数的概念: ES6提供的解决异步编程的方案之一,现在已经不怎么用了被淘汰了. Generator函数是一个状态机,内部封装了不同状态的数据. ...
- 系统权限划分Liunx版
系统权限: 1. 当一个用户有两个系统的登录权限时,没有使用原来的那种系统id集合: 1,2,5形式,而是使用了这种形式 2. 杜绝重复
- 再说js隐式转换
再说js隐式转换 自己整理的一个整体规则如下: Date 默认 走 toString, 如果 toString 返回的是对象, 那么查看 valueOf 其他对象的转换, 默认走 valueOf, 但 ...
- 第10组 Alpha冲刺(4/4)
队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 制作剩余界面前端 展示GitHub当日代码/文档签入记录 ...
- 自定义的操作Cookie的工具类
可以在SpringMVC等环境中使用的操作Cookie的工具类 package utils; import java.io.UnsupportedEncodingException; import j ...