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">