教你如何使用djangovuejs快速构建综合项目.docx
- 文档编号:1624278
- 上传时间:2023-05-01
- 格式:DOCX
- 页数:17
- 大小:619.55KB
教你如何使用djangovuejs快速构建综合项目.docx
《教你如何使用djangovuejs快速构建综合项目.docx》由会员分享,可在线阅读,更多相关《教你如何使用djangovuejs快速构建综合项目.docx(17页珍藏版)》请在冰点文库上搜索。
教你如何使用djangovuejs快速构建综合项目
教你如何使用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:
//某个gitlabREADME或者某个redminewiki')
settings=clean(settings)
update(settings)
还可以使用django-celerycelery-beat按Interval/crontab方式扔更新配备任务到celery队列里面,非常重要是,这些都可以在DjangoAdmin后台直接配备哦,还不够优雅?
VueJS(MVVM框架)-Vue.js
---数据双向绑定
---单文献组件
---清晰生命周期
---学习曲线平滑
---vue-cli
前端是我弱项,我需要一种MVVM框架来提高交互和节约时间,在试过AngularJS,ReactJS,VueJS之后我选取了VueJS,由于我觉得写VueJS代码感觉非常接近写Python。
着重提一下单文献组件:
特别清晰,一种文献包括且仅包括三块:
1.前端渲染模板
2.专为此模板写渲染逻辑
3.专为此模板写样式
这样可以达到什么效果呢?
一种文献一种组件,每个组件有它自己逻辑与样式,你不用关怀什么local什么global,CSS样式加载先后、覆盖问题,由于它是『闭包』,并且『自给自足』。
固然组件之间也是可以通信,举个例子,我有一种组件叫ListULB,使用表格展示了我拥有所有ULB(负载均衡),ListULB做了一件事,从API获取ULB对象列表并for循环呈现出来,ListULB可以放到某个页面里,可以放到弹框里,放到模态框里,任何地方都可以,由于这个组件对外交互只有API。
如果我当前要写一种组件叫AddVServer,功能是可觉得任意一种ULB对象添加VServer,我写法是将在AddVServer组件创立时候,将ULB对象传给AddVServer组件,这样AddVServer组件拿到这个对象,就可以直接依照对象ID等,创立出当前行ULBVServer了,伪代码如下:
for**ulb_object**inulbs_list:
{{ulb_object.name}}
{{ulb_object.id}}
current_ulb='**ulb_object**'> 注意双星号包着对象,在ListULB组件里面是每行ULB,传给AddServer组件之后,变成了current_ulb对象,拿到id为current_ulb.id尽情为它创立VServer吧。 如果我要为指定VServer创立RServer呢,同样。 看出来了吧,进行开发之前,前端组件构造与数据构造相应起来可以省好多时间,数据驱动前端组件,棒吗? 谁不喜欢优雅代码呢,『Datadriveeverything』多么省脑细胞。 以上就是我选取Django与VueJS因素。 Django与VueJS是如何结合起来? >>>一方面我选取了VueJS前端渲染,自然放弃了Django后端模板引擎渲染。 >>>然后业务逻辑放到了前端,放弃了DjangoView(其实也就是先后端分离必要条件)。 >>>保存了DjangoController(URLconf)来实现前端路由父级路由,可以达到不同页面使用不同前端框架,页面内部使用各自独有前端路由效果,万一老大给你配了前端呢,万一前端只想写ReactJS呢。 >>>保存了DjangoModel,前面说了DjangoORM太好用了,并且可以配合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组件: 固然里面还实现了前面提到ULBVServer创立,VServerRServer创立等。 理解更多内容/购买云服务器,请浏览UCloud云计算官网
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 使用 djangovuejs 快速 构建 综合 项目