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

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

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

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

解决：
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">