简介:今天,首席CTO指出要与您分享如何使用Django界面的Vue界面。如果您可以解决您现在面临的问题,请不要忘记注意此网站。让我们现在开始!
因为我想改变一些以前的需求,所以主管要求我学习Vue。花了很长时间才进入门,我不得不更改成熟的项目。这个困难仍然很困难。
那些熟悉网站构建的人应该知道Vue是一个出色的前端框架,而Django是Python语言系统下的后端框架。尽管他们俩都可以编写一个完整的网站,但它们具有自己的焦点。速度很快,但是模板引擎附带的速度相对较弱,VUE是由数据驱动和组成的意识形态构建的。它是渲染页面中的第一个类。因此,随着Python的开发,可以开发网站。
不同的框架如何组合?这导致了前端和后端分离的想法。后端仅提供接口,API和前端来调用这些接口以获取数据,然后将其渲染到HTML模板模板。
在开发不同的框架时,最大的问题是交叉域。由于不同的框架,它们启用的端口号不同,即不同的数据源。由于安全性,无法直接访问它们。它是Django配置文件中的跨域许可证。使用Django的第三方软件包Django-Cors-neaders解决跨域问题
在这种情况下,我们可以使通过VUE启动方法进行调试更加方便
最终如何集成在一起?我们知道Django是通过指定模板和静态文件的路径来渲染的,因此我们需要打包VUE文件以生成index homepage和static文件,以便我们可以在django的默认文件夹中分别分别分开,或指定这两个文件。再次路径。
后端使用的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配置中,我们可以修改所有主机。一些在线数据。我们调试本地数据的一部分,因此我们需要重新确定本地主机
修改一些主机链接
这导致使用在线主机端口的交叉域本身,但是数据中的某些数据是本地主机端口导致交叉域访问
结论:以上是Vue如何介绍首席执行官Note引入VUE界面的全部内容。我希望这对每个人都会有所帮助。如果您想进一步了解这一点,请记住收集并关注此网站。