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

1、前端POST调用后台的API时,报 403 Forbbiden
vue (element UI) + django (记录遇到的坑)_第1张图片

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

2、前端POST调用后台的API时,报 405 Method Not Allow (这个问题好像是要关闭了CSRF验证才会出现,不然都是报 403)
vue (element UI) + django (记录遇到的坑)_第2张图片

解决:
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.csdn.net/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>

只需要将 label 改成 :label

:label="1">

你可能感兴趣的:(前端)