当前位置: 首页 > 网络应用技术

如何在Django下使用Vue(Django开始)

时间:2023-03-09 13:44:46 网络应用技术

  今天,我将与您分享如何在Django下使用VUE。其中,Django将解释Django的进入。如果您可以解决您现在面临的问题,请不要忘记注意此网站。让我们现在开始!

  本文目录清单:

  1. DJANGO和VUE与第一次联系人首次联系2. Vue和Django 3的集成,Django + Vue集成,部署到Windows Apache遇到的问题的问题摘要4. Django 4. Django + Vue前端分离项目部署5,django-restful:和前端VUE接口交互键盘6. DJANGO+VUE静态资源问题,因为它改变了一些以前的需求。主管要求我学习Vue。花了很长时间才进入门,有必要改变成熟的项目。这个困难非常困难。

  那些熟悉网站构建的人应该知道Vue是一个出色的前端框架,而Django是Python语言系统下的后端框架。尽管他们俩都可以编写一个完整的网站,但它们具有自己的焦点。速度很快,但是模板引擎附带的速度相对较弱,VUE是由数据驱动和组成的意识形态构建的。它是渲染页面中的第一个类。因此,随着Python的开发,可以开发网站。

  不同的框架如何组合?这导致了前端和后端分离的想法。后端仅提供接口,API和前端来调用这些接口以获取数据,然后将其渲染到HTML模板模板。

  在开发不同的框架时,最大的问题是交叉域。由于不同的框架,它们启用的端口号不同,即不同的数据源。由于安全性,无法直接访问它们。它是Django配置文件中的跨域许可证。使用Django的第三方软件包Django-Cors-neaders解决跨域问题

  在这种情况下,我们可以使通过VUE启动方法进行调试更加方便

  最终如何集成在一起?我们知道Django是通过指定模板和静态文件的路径来渲染的,因此我们需要打包VUE文件以生成index homepage和static文件,以便我们可以在django的默认文件夹中分别分别分开,或指定这两个文件。再次路径。

  创建Django2项目

  经过

  `django-addmin startproject mysite'

  命令创建

  创建后端服务应用程序

  在CD Mysite目录之后,Django-Admin StartApp后端

  创建一个VUE项目

  vue创建前端

  当前版本:Django:2.1.7;Python:3.6.3;Vue-CLI:3.5.1;

  从0到1创建Django + ElementUI接口自动化平台花了一周多的时间。

  VUE数据绑定模式可以减少许多前端工作,(前端很丑)

  Web界面是根据Python + Request + Excel模式的升级和维护,与Corporate Wechat,Mail和Echarts报告显示,Timer BackgroundScheduler(而不是使用Windows Task Plan Plan + BAT -Alone模式),The The The Timer Backgroundsscheduler自动化自动化定时任务输出结果。基于网络,在多人游戏维护之后,我相信这将对未来的工作有所帮助。至少它也是写过Django Interface Framework.essence.essence的人

  花了3天才能得到。

  遇到问题:

  2.然后将两者放在一起

  3.集成后,Django启动后,Vue刷新当前的第404页,此VUE路由器/index.js,删除模式:“历史记录”

  vue,config/index.js,构建方法,

  据说要更改为ssetspublicpath:'https://www.shouxicto.com/article/'-------“不需要结果,它看起来像

  在VUE项目下,build/webpack.prod.conf.js,求解了注释模块。

  5.在本地运行,部署到Apache,Vue,STAITC静态资源没有问题

  参考如下,对静态资源的访问,路径是偶引号标记以解决解决方案

  后端使用的DRF是UWSGI+NGINX

  输入服务器项目文件目录,我的django项目放置在“/usr/myprojects/” directory.create uwsgi.ini文件中的uwsgi.ini文件中。

  测试效果命令:

  如果您访问:xxx.xxx.xxx.xx:8000成功,那么uwsgi.ini配置成功

  我的nginx.conf位置是“ /etc/nginx/nginx.conf”

  配置文件如下:

  1.第一行

  主要是给予NGINX加权。部署历史记录路线后,将删除地址背后的“#”号码。包装部署后,将会有一个错误。

  2.如果显示配置,则有两个服务器部署了前端服务和后端服务。值得注意的是,两台服务器使用同一服务器,这与侦听不同。

  3. VUE部署需要注意反向代理地址:

  和随后的端口问题

  4.后端服务器需要注意该位置的UWSGI_Pass后面的最终口号。

  5.交叉 - 域问题。如果我需要在自己的在线上找到配置,我没有遇到它,因为我在Django的设置中配置了交叉域。

  6. Django Suit背景管理样式已经崩溃,需要更改,但是可以正常访问API。

  7.我开始在后台收听端口8008,并在前端监视端口80中听,以便前端显示出良好的外观。尽管可以正常访问背景API,但VUE的本地开发环境也可以正常运行,并且文本和图片资源都正常显示。结果,它无法显示。对于地图,我选择了前面- 末端监视器以收听端口8008,后端监视80,并且显示后显示正常。原因尚不清楚////////// erly谈论它。

  8.不要问我为什么我将前端和后端分开并在服务器上部署?糟糕,只是测试,这不是必需的

  9.本文仅适合入门

  关于Django的后台管理员(西装)修改(参考:Django中文网站:)

  在环境中输入项目目录,您需要收集CSS样式并在终端中输入命令:

  接下来,您可以找到静态文件包含CSS文件。此时,该网站已打开,样式显示正常

  UWSGI启动xxx.ini后,将在同一目录中生成xxx.pid文件。UWSGI主要过程的过程数中只有一行内容。

  关于UWSGI,输入同一目录

  课

  如果您无法获得环境,请指定环境

  另外:请记住重新启动UWSGI并重新启动NGINX。

  暴力删除:Fuser -K 80/TCP

  Netstat -aptn命令行,检查所有开放端口号码

  netstat -tlp |GREP 80查看是否使用了特定端口

  PS -EF |grep uwsgi查看是否存在UWSGI端口

  类别和vue接口对接

  首先是取出所有类别的所有内容

  由于前端vue显示类别已分类

  第一级,两个级别和三个级别如下

  因此,我们需要取出所有三个内容

  但首先,您需要拿出第一级,然后镶嵌第二级,然后在第三季度插入第二级,就像上面商品中显示的类别的内容一样。

  我们仍然需要编写序列化器

  这是第一个级别的第二级第二级第二级镶嵌第三级 -

  但是这里有一个问题,不要犯错。这三个类别的立场并不是错误的。

  因为第一级正在调用第二级,所以必须先写第二级

  因此,第二级必须处于相同级别的相同级别。

  然后是视图

  在过滤器中添加类别_type = 1,以便您可以直接显示第一个类别,然后对第二个小类别有更分层的感觉。

  同时,我们必须处理单个信息

  因此,我们继承了Mixins.RetRieveModelMixin,这是一个显示详细信息的类

  例如,在动物园中显示某个动物

  /zoos/id

  这样的URL

  同样,我们只能直接配置类别的URL。

  您不需要考虑以后的ID是否需要配置URL。您不需要考虑它,因为我们继承了视图类

  他帮助我们解决了这些问题

  您可以以这种方式看到它来处理我们的后端

  但是,在处理前端对接时,您会发现它无法显示

  因为有一个十字架问题

  这个问题可以单独解决前后的后端,因此请谈谈后端方法

  只需修改服务方

  在GitHub上搜索Django-Cors-neaders以查找此信息

  如何以相同的方式使用它

  安装

  PIP安装django-cors头

  然后在Settins中的intasted_apps配置和设置中的中间件配置

  请注意此处的中间软件配置

  'corsheaders.middleware.corsmiddleware',

  'django.middleware.common.commonmiddleware',

  这两个必须放在

  'django.middleware.csrf.csrfviewmiddleware',,

  否则,这将在此前面有错误

  也配置

  cors_origin_allow_all = true

  允许交叉域访问其默认值是错误的

  这可以正常显示在前端

  为什么发生交叉域访问

  因为在VUE中的API配置中,我们可以修改所有主机。一些在线数据。我们调试本地数据的一部分,因此我们需要重新确定本地主机

  修改一些主机链接

  这导致使用在线主机端口的交叉域本身,但是数据中的某些数据是本地主机端口导致交叉域访问

  使用Django 2.2。

  一般而言,使用指令NPM Run构建以获取包装的包装,然后将其交给NGINX进行路由转换(配置的位置 /静态)。需要的是配置Django上的可访问index.html路径。

  但是(?),我想在本地测试,也就是说,没有nginx,并且debug = true环境尚未测试。结果,没有欢迎页面进入主页。打开开发工具并表明这就是它的样子:

  解决方案:只需在installed_apps中注册VUE Engineering文件夹即可。

  如果您不注册该应用程序,那么即使您编写文件夹,Django也不会扫描(根目录除外):

  如上所示,我在staticfiles_dir包装的Blogfro(即VUE文件目录)之后写了静态文件夹,但是输入主页时仍然是白屏幕。

  白屏幕的路径表示模板模板是正常的,但是仍然无法加载静态文件。此需要注册的应用程序。注册后,您可以扫描静态文件。

  注册后,已成功显示主页:

  当没有加载该应用程序时,我发现CSS和JS文件放在已注册应用程序(BackND)的静态文件夹中,可以正常显示。此验证静态文件夹的扫描是否需要注册的应用程序。

  以我的项目为例:

  在调试模式下,您只需要static_url和staticfiles_dir。

  根据Django文档,static_url是路径的地图。服务器将考虑将其匹配的路径,然后输入staticfiles_dir指定的目录以查找,并始终尝试返回匹配的第一个结果匹配。

  在生产模式(封闭的调试)中,对静态文件的引用将失败。换句话说,对于性能考虑,我们不将Django服务器用于静态资源请求。我们经常使用其他反向服务器进行发送。

  对于此考虑,Django使用CollectStatic指令将所有staticfiles_dir下的所有文件打包到static_root.dre.ter之后,您只需要配置此静态文件夹即可应用此静态文件夹。

  之后,您可以直接开发Blogfro。开发完成后,使用NPM Run Build,然后直接打开DJANGO服务器进行测试。包装在线时,将内容复制到static_root下方,然后将内容复制到python manage.py collection.plectionstatic(主要是收集admin)资源。

  实际上,问题并未完全解决,但这是由VUE + Django引起的。

  Django使用其自己的静态路径索引,这与VUE有必要冲突。要处理它,必须调试它。

  使用django和vue意味着您要将前端和后端分开,因此开发过程本身是隔离的。双方的交集应为最后一个部署(VUE包装,Django打开生产模式,并且反效力师打开(例如nginx)。这次,静态文件夹属于反服务器管理,不会出现此类问题。

  由于我只有一个人(太痛苦),因此对Debug Vue和Django的需求同时引起了上述问题。

  您可以谈论如何在Django下使用Vue的介绍。感谢您花时间阅读本网站的内容。有关如何在Django条目和Django下使用VUE的更多信息,请不要忘记在此网站上找到它。