vue （element UI） + django (记录遇到的坑)

最新推荐文章于 2025-07-14 15:24:18 发布

PatrickZheng

最新推荐文章于 2025-07-14 15:24:18 发布

阅读量5.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： django vue

本文链接：https://blog.youkuaiyun.com/PatrickZheng/article/details/79223611

前端专栏收录该内容

5 篇文章

订阅专栏

本文记录了在使用Vue（Element UI）和Django开发过程中遇到的前端POST请求403和405错误、404页面找不到问题，以及如何实现表格内的删除操作和创建全局变量的方法。解决问题包括调整Django的CSRF设置、URL配置、正则表达式，以及利用Element UI的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、前端POST调用后台的API时，报 403 Forbbiden
403

解决：
（1）发送POST时带上 csrf_token （PS：还没试验过，待填坑。。。）
（2）给被调用的函数加上 csrf_exempt 标注
（3）把django的CSRF功能关闭

2、前端POST调用后台的API时，报 405 Method Not Allow （这个问题好像是要关闭了CSRF验证才会出现，不然都是报 403）
405

解决：
django项目的urls.py配置顺序有误，将与前端页面关联的url放到后台API路由的后面

PS：还有一种常见情况是，django的views.py中对应的方法做了限制，如：

@require_http_methods(["GET"])

那么前端代码调用该API时，只允许this.$http.get() 访问对应的方法。其它如POST、PUT、DELETE等均会出现 405 method not allow

3、直接在浏览器输入存在的页面地址，但显示 404 Not Found
（即在router配置的url无法直接通过浏览器地址栏进行跳转打开）

解决：
django项目的urls.py配置中，与前端页面关联的url的正则表达式有误，改成 ‘^’即可，不可以为 ‘^$’

url(r'^', TemplateView.as_view(template_name="index.html")),

4、在 table 里面某个字段是“操作”，会展示两个按钮——编辑，删除。点击删除，想实现 popover 的效果：

<el-table-column width="100" align="center" label="操作">
  <template slot-scope="scope">
    <el-popover width="160" :ref="`popover-${scope.$index}`">
      <p>确定删除该项吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button type="text" size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">
          取消
        </el-button>
        <el-button type="danger" size="mini" >确定</el-button>
      </div>
      <el-button type="text" slot="reference">删除</el-button>
    </el-popover>
  </template>
</el-table-column>

参考： https://github.com/ElemeFE/element/issues/1763

5、创建全局变量、公用方法
(1) 新建一个js文件

const global_ = {
  'host': '127.0.0.1:8000'
}

exports.install = function (Vue, options) {
    Vue.prototype.GLOBAL = this.global_
    Vue.prototype.changeData = function (){
        alert('执行成功');
    };
};

(2) 在 main.js 中引入并使用

import base from './base'
Vue.use(base);

(3) 在组件中可直接使用

// 全局变量
this.GLOBAL.host

// 公用方法
this.changeData

参考：http://blog.youkuaiyun.com/binginsist/article/details/56483009

6、el-radio, label 如何支持整型
按官方文档，是如下编写：

<template>
    <el-radio-group v-model="radio">
        <el-radio label="1"></el-radio>
        <el-radio label="2"></el-radio>
    </el-radio-group>
</template>
<script>
export default {
    data () {
        return {
            radio: "1" // 如果写成 radio： 1, 会无法控制选项
        }
    }
}
</script>