首页>>前端>>Vue->vue和django一点都不搭?

vue和django一点都不搭?

时间:2023-12-02 本站 点击:0

django+vue无法设置跨域cookies

后端开发环境:Django 3.2.9

前端开发环境:vue3 + ts

浏览器版本:chrome(96.0.4664.45)

问题:

最近开发一个新项目,前端使用axios进行http类的封装,前后端分离进行api调试,进行登录后,后续的api调用发现无法识别到cookie。

尝试情况:

1、axios设置withCredentials,无效

2、分析api请求和响应信息,发现响应标头有一段警告信息

3、联想到既然是响应标头出现报警信息,那么可以考虑从django入手。在官网上输入"SAMESITE",果然找到了相关的说明,通过在settings.py设置 SESSION_COOKIE_SAMESITE='None' 和 SESSION_COOKIE_SECURE=True 后成功解决问题。

Django+Vue静态资源问题

使用 django 2.2。

一般来说,使用指令 npm run build 得到打包的 dist 包,交给 nginx 做路由转换(配置 location /static )即可,需要的只是在django配置可访问的 index.html 路径。

但是由于需要(?), 我想在本地进行测试,也就是说在没有 nginx, 开启 debug = True 的环境下调试。于是打开 python manage.py runserver , 结果进入首页没有出现欢迎页面,打开 dev tools ,显示是这个样子的:

解决方法:将 vue 工程文件夹在 INSTALLED_APPS 里面注册下就行。

如果不注册 app, 那么即使写入文件夹, django 也不会扫描(根目录除外):

如上所示我在 STATICFILES_DIR 中已经写入了 blogfro (也就是 vue 文件目录) 打包完成后的 static 文件夹,但是进入首页仍然白屏。

白屏表示模板 TEMPLATES 的路径正常,但是静态文件仍然加载不出来。这就需要注册 app 。注册后就能够扫描到静态文件。

注册后就成功显示了首页:

在没有加载 app时,发现把 css 与 js 文件放在一个已经注册 app(backend)的静态文件夹中,能够正常显示。这验证了静态文件夹的扫描需要注册 app。

以我的项目为例:

在 debug 模式下,只需要 STATIC_URL 与 STATICFILES_DIR 即可。

根据 django 文档 说法, STATIC_URL 是路径的映射。服务器会将匹配到它的路径视为静态文件请求,然后进入 STATICFILES_DIR 指定目录下查找,并总是尝试返回匹配到的第一个结果。

在生产模式下(关闭 debug ),对静态文件的引用会失效。换句话说,出于性能考虑,我们不使用django服务器进行静态资源请求。我们常使用其他反代服务器进行发送。

出于这个考虑,django 使用了 collectstatic 指令,能将所有 STATICFILES_DIR 下的文件打包到 STATIC_ROOT 下。之后只要配置反代服务器应用这个静态文件夹就行了。

之后就能直接对 blogfro 进行开发了,开发完成后使用 npm run build , 然后直接开启 django 服务器就能进行测试。最后打包上线的时候将dist下的内容复制到到 STATIC_ROOT 下,然后 python manage.py collectstatic (主要是收集 admin )的资源。

其实问题不是完全解决,但这是因为 vue + django 造成的。

django 使用自己的静态路径索引,必然有可能与vue发生冲突,为了处理必须进行调试。

使用 django 与 vue, 意味着希望进行前后端分离,所以开发过程本身就是隔离的。双方的交集应该是最后部署的时候(vue 打包, django 开启生产模式, 反代服务器开启(如 nginx))。这时候静态文件夹归反代服务器管理,不会出现这样的问题。

由于我只有一个人(太惨了),所以产生了同时调试 vue 与 django 的需求,这才导致了上面问题的产生。

django+vue前后端分离项目部署

后端用的drf,使用的是uwsgi+nginx

进入服务器项目文件目录下,我的django项目放在了“/usr/myProjects/”目录下了。在manage.py同级目录下创建uwsgi.ini文件,配置如下:

测试效果命令:

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

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

配置文件如下:

1、第一行

主要就是给nginx加权限,vue部署后使用history路由时会去掉地址后面的‘#’号,打包部署后不加权限会有bug。

2、如配置所示,有两个Server,分别部署了前端服务,和后端服务,值得注意的是两个Server用的是同一个服务器,监听的端口不同。

3、vue部署需要注意的是反向代理地址:

以及后面的端口问题

4、后端的Server需要注意location中的uwsgi_pass 后面的端口号要和uwsgi.ini中配的相同,否则监听不到

5、后端跨域问题。如果遇到跨域需要自己网上找配置,我的没遇到,可能是因为我在django的settings中配置了跨域。

6、django-suit后台管理样式崩了,需要改,但是api可以正常访问,这个有空再说

7、我开始后台监听的是8008端口,vue前端监听的是80端口,这样前端显示好看。然而问题出现了,虽然后台api可以正常访问,vue的本地开发环境也能正常运行且文字、图片资源均显示正常,但是前端vue打包线上部署后,文字信息显示正常,图片信息缺失8008端口,导致显示不出来。为图方便我选择了前端监听8008端口,后端监听80,部署后显示正常。原因不太清楚///////有空再说吧。

8、不要问我为啥都前后端分离了还部署到一个服务器上?穷,而且只是测试,没必要

9、此文仅适合入门

关于django后台admin(suit)缺失的修改(参考:django中文网: )

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

接下来你就回发现static文件中包含了css文件,此时再打开网站,样式显示正常

uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件,里面只有一行内容是 uWSGI 的主进程的进程号。

关于uwsgi,进入同届目录下

教训

获取不到环境,那就指定环境

另外:记得重启uwsgi,重启Nginx,实在不行就先把监听的端口kill掉再重启

暴力删端口:fuser -k 80/tcp

netstat -aptn命令行,查看所有开启的端口号

netstat -ntlp | grep 80 查看具体的端口是否使用

ps -ef | grep uwsgi 查看是否有uwsgi端口存在

vue和python冲突吗

部分冲突,毕竟都是语言类,有部分的相似,但是肯定有不同

python写爬虫的脚本,也可以开发网站项目,最长处是数据分析的能力 比如说我要开发网站,要用到的知识点会有,python,js,css,网络的知识,服务器的知识等等

vue是用js+css编写好的写许多常用方法啊,样式的一些集成,便于调用,快速开发的框架

你说的tornado,flask,django都是python中几个比较主流的网站开发的框架,用于全栈开发.python在其中则是作为后端的开发语言 之前前端就是html,css和js,你说的vue是前端开的一种框架,是基于js的前端框架. 至于你说的交互的意思,vue+python本质上就是js+css等等+python的,也就只是经过集成的js+css等等+python的开发.

说有冲突不太对,说完全没有冲突也不对


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/9329.html