教你如何使用djangovuejs快速构建项目模板.docx

资料内容仅供您学习参考，如有不当或者侵权，请联系改正或者删除。
教你如何使用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_object.name}}
{{ulb_object.id}}
<AddVServer:current_ulb='**ulb_object**'></AddVServer>
</ListULB>
注意双星号包着的对象, 在ListULB组件里面是每行的ULB, 传给AddServer组件之后, 变成了current_ulb对象, 拿到id为current_ulb.id尽情的为它创立VServer吧。如果我要为指定VServer创立RServer呢, 一样的。
看出来了吧, 进行开发之前, 前端组件的结构与数据的结构对应起来能够省好多时间, 数据驱动前端组件, 棒吗? 谁不喜欢优雅的代码呢, 『Datadriveeverything』多么的省脑细胞。
以上就是我选择Django与VueJS的原因。
Django与VueJS是如何结合起来?
>>>首先我选择了VueJS的前端渲染, 自然放弃了Django的后端模板引擎渲染。
>>>然后业务逻辑放到了前端, 放弃了Django的View( 其实也就是前后端分离必要的条件) 。
>>>保留了Django的Controller(URLconf)来实现前端路由的父级路由, 能够达到不同页面使用不同的前端框架, 页面内部使用各自独有的前端路由的效果, 万一老大给你配了前端呢, 万一前端只想写ReactJS呢。
>>>保留了Django的Model, 前面说了Django的ORM太好用了, 而且能够配合DjangoAdmin。
因此综合来说就是:
M(Django)+C(Django)+MVVM(VueJS)=M+MVVM+C=MMVVMC
( 为了容易理解, 并没有使用Django自称的MTV模式理解, 感兴趣看看我画的图)

总结: 作为以改变世界为己任的DevOps, MVC框架后端渲染的柔弱表现力与繁杂的交互已经不能满足我们了, 因此我选择这样构建项目, 代码块中的修改都会用爽星号括起来, 比如:**changed**。
本文为了精简篇幅, 默认您已经安装了必要的命令行界面( CLI) , 比如vue-cli等。
实际操作
01创立Django项目

命令:
django-adminstartprojectulb_manager
结构:
├──manage.py
└──ulb_manager
├──__init__.py
├──settings.py
├──urls.py
└──wsgi.py

02进入项目根目录, 创立一个app作为项目后端
命令:
cdulb_manager
pythonmanage.pystartappbackend
即: 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
03使用vue-cli创立一个vuejs作为项当前端
命令:
vue-initwebpackfrontend
即: 项目名叫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, 分别是:
>>>backendDjango的一个app
>>>frontendVuejs项目
04接下来我们使用webpack打包VusJS项目
命令:
cdfrontend
npminstall
npmrunbuild
结构:
我引入了一些包, 比如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。

05使用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'))
]
06配置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则是运行npmrunbuild构建出的index.html与静态文件夹static的父级目录。
这时启动Django项目, 访问/则能够访问index.html, 可是还有问题, 静态文件都是404错误, 下一步我们解决这个问题。
07配置静态文件搜索路径
打开settings.py(ulb_manager/settings.py), 找到STATICFILES_DIRS配置项, 配置如下:
#Addforvuejs
STATICFILES_DIRS=[
os.path.join(BASE_DIR,"frontend/dist/static"),
]
这样Django不但能够将/ulb映射到index.html, 而且还能够顺利找到静态文件, 此时访问/ulb我们能够看到使用Django作为后端的VueJShelloworld。

08开发环境
因为我们使用了Django作为后端, 每次修改了前端之后都要重新构建( 你能够理解为不编译不能运行) ,
除了使用Django作为后端, 我们还能够在dist目录下面运行以下命令来看效果:
hs(即:httpserver)

可是问题依然没有解决, 我想过检测文件变化来自动构建, 可是构建是秒级的, 太慢了, 因此我直接使用VueJS的开发环境来调试, npmrundev:

毫秒, 可是有个新问题, 使用VueJS的开发环境脱离了Django环境, 访问Django写的API, 出现了跨域问题, 有两种方法解决, 一种是在VueJS层上做转发( proxyTable) , 另一种是在Django层注入header, 这里我使用后者, 用Django的第三方包django-cors-headers来解决跨域问题。
安装
pipinstalldjango-cors-headers
配置( 两步)
1.settings.py修改
MIDDLEWARE=[
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
**'corsheaders.middleware.CorsMiddleware',**
'mon.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
至此, 我的开发环境就搭建完成了。
09生产环境部署( 部署到UCloud)
接下来我们尝试将项目部署到UCloud云主机上, 主机管理列表, 如下所示:

**这里注意记住你的外网IP, 下面的IP替换成你的**

环境搭建与部署
登录主机, 用你刚填写的密码:
.**.75
CentOS系统能够使用yum安装必要的包
#如果你使用git来托管代码的话
yuminstallgit
#如果你要在服务器上构建前端
yuminstallnodejs
yuminstallnpm
yuminstallnginx
我们使用uwsgi来处理Django请求, 使用nginx处理static文件( 即之前build之后dist里面的static, 这里默认前端已经打包好了, 如果在服务端打包前端需要安装nodejs, npm等) 。
安装uWsgi
yuminstalluwsgi
#或者
pipinstalluwsgi
我们使用配置文件启动uwsgi, 比较清楚。
uwsgi配置文件:
[uwsgi]
socket=127.0.0.1:9292
stats=127.0.0.1:9293
workers=4
#项目根目录
chdir=/opt/inner_ulb_manager
touch-reload=/opt/inner_ulb_manager
py-auto-reload=1
#在项目跟目录和项目同名的文件夹里面的一个文件
module=inner_ulb_manager.wsgi
pidfile=/var/run/inner_ulb_manager.pid
daemonize=/var/log/inner_ulb_manager.log
nginx配置文件:
server{
listen8888;
server_name120.132.**.75;
root/opt/inner_ulb_manager;
access_log/var/log/nginx/access_narwhals.log;
error_log/var/log/nginx/error_narwhals.log;
location/{
uwsgi_pass127.0.0.1:9292;
include/etc/nginx/uwsgi_params;
}
location/static/{
root/opt/inner_ulb_manager/;
access_logoff;
}
location^~/admin/{
uwsgi_pass127.0.0.1:9292;
include/etc/nginx/uwsgi_params;
}
}
/opt/inner_ulb_manager/static即为静态文件目录, 那么现在我们静态文件还在frontend/dist怎么办, 不怕, Django给我们提供了命令:
先去settings里面配置:
STATIC_ROOT=os.path.join(BASE_DIR,"static")
然后在存在manage.py的目录, 即项目跟目录执行:
pythonmanage.pycollectstatic
这样frontend/dist/static里面的东西就到了项目根目录的static文件夹里面了。
那么为什么不直接手动把构建好的dist/static拷过来呢, 因为开始提过Django自带的App: admin也有一些静态文件( css,js等) , 它会一并collect过来, 毕竟nginx只认项目跟目录的静态文件, 它不知道django把它自己的需求文件放到哪了。
开头说过Django配置灵活, 那么我们专门为Django创立一个生产环境的配置prod.py, prod.py与默认settings.py同目录。

#导入公共配置
from.settingsimport*
#生产环境关闭DEBUG模式
DEBUG=False
#生产环境开启跨域
CORS_ORIGIN_ALLOW_ALL=False
#特别说明, 下面这个不需要, 因为前端是VueJS构建的, 它默认使用static作为静态文件入口, 我们nginx配置static为入口即可, 保持一致, 没Django什么事:
STATIC_URL='/static/'
如何使用这个配置呢, 进入wisg.py即uwsgi配置里面的module配置修改为:
importos
fromdjango.core.wsgiimportget_wsgi_application
os.environ.setdefault("DJANGO_SETTINGS_MODULE","**inner_ulb_manager.prod**")
application=get_wsgi_application()
启动uwsgi:
uwsgi--iniinner_ulb_manager.ini
启动ngingx:
servicenginxstart
至此, 部署就完成了。
10效果图
List组件:

传单个ULB对象给Detail组件使用即可。

Detail组件:

当然里面还实现了前面提到的ULB的VServer创立, VServer的RServer的创立等。
了解更多内容/购买云服务器, 请浏览UCloud云计算官网