vue前端和django结合的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
vue和django的结合尝试
使用vue进行前端开发时,如今也是工程化开发,和django类似,也有一个工程目录。开发过程中,会利用nodejs启动一个服务器,默认访问localhost: 8080就可以打开页面。
vue开发过程中会使用vue专有的文件后缀名.vue,这些内容浏览器是无法识别的,因此开发完成后需要对项目进行打包生成浏览器可以识别的js, css文件以及一个单页面指数。html。
django使用的就是最后生成的这几个文件。
<强>具体设置
vue项目由前端开发完成后,会通过命令npm运行构建打包成一个dist目录,其中包含一个index . html和静态目录
这两项内容是django最终需要的页面。
静态目录和django的静态目录是同一个目录,可直接覆盖django的,设置中的配置不变,仍旧是原本的静态路径
索引。html可放在模板目录内,在设置中指定模板路径即可,最后配置路由,路由如下:
,路径(& # 39;& # 39;,,TemplateView.as_view (template_name=& # 39; index . html # 39;)),
,路径(& # 39;索引/& # 39;,,TemplateView.as_view (template_name=& # 39; index . html # 39;)) 以上即可结合完成,其他的所有ajax请求,直接后台返回数据即可
开发过程中跨域问题的解决
vue开发过程中,ajax请求,既可以通过设置前端来访问,也可以通过django的设置来允许访问
<强> vue的设置
vue的设置方式是在项目的配置目录下,修改指数。js文件中proxyTable项
//,& # 39;http://localhost: 7890 & # 39;,表示的是要跨域请求的地址,vue的开发地址可能是端口8080,7890就等于是django的端口//,如果请求的地址是:& # 39;http://localhost: 7890/index_data& # 39;//,在请求时就可以写成:,& # 39;/api/index_data& # 39;
& # 39;/api # 39;:, {
目标:,,,,& # 39;http://localhost: 7890 & # 39;
,,,changeOrigin:,真的,
,,,pathRewrite:, {
,,,,,,,& # 39;^/api # 39;:, & # 39; & # 39;
,,,}
} django的设置
安装第三方包pip安装django-cors-headers这个包可以自动给响应头中添加允许跨域的响应头
具体配置分两步:
1,设置。py修改
MIDDLEWARE =, (
,,,& # 39;django.middleware.security.SecurityMiddleware& # 39;
,,,& # 39;django.contrib.sessions.middleware.SessionMiddleware& # 39;
,,,& # 39;corsheaders.middleware.CorsMiddleware& # 39;,,, #,注意放置顺序
,,,& # 39;django.middleware.common.CommonMiddleware& # 39;
,,,& # 39;django.middleware.csrf.CsrfViewMiddleware& # 39;
,,,& # 39;django.contrib.auth.middleware.AuthenticationMiddleware& # 39;
,,,& # 39;django.contrib.messages.middleware.MessageMiddleware& # 39;
,,,& # 39;django.middleware.clickjacking.XFrameOptionsMiddleware& # 39;, 2,设置。py添加
一般情况下,只添加一项:CORS_ORIGIN_ALLOW_ALL=False即可
注意此为开发环境,生产环境需要关闭此项
感谢各位的阅读!看完上述内容,你们对vue前端和django结合的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
