学习随笔:Vue.js与Django交互以及Ajax和axios
Posted 汪小鹏
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习随笔:Vue.js与Django交互以及Ajax和axios相关的知识,希望对你有一定的参考价值。
1. Vue.js地址
Staticfile CDN(国内):
unpkg:会保持和npm发布的最新的版本一致
cdnjs:
2. django 和vue语法冲突处理 : {{}}
2.1 方法1:
在new Vue设置:
`delimiters:['[[', ']]']`,
然后在html使用 `[[ ]]` 代替 `{{}}`
2.2 方法2:
使用
`{% verbatim myblock %} {% endverbatim myblock %}`
包裹vue里面的`{{}}`,
此标签包裹的代码将不会被Django的模板引擎渲染
3. Django的数据传递给Vue
django服务端代码:
def vue_views(request): List = [{'age':18},200] OBJ = {"name":"隔壁老王"} dic = { 'list':json.dumps(List), 'obj':json.dumps(OBJ) } return render(request,'Vue.html',dic)
- 传递数据是用json传递过去的,否则会报错
Vue前端代码:
<script> var list = {{ list | safe }} var obj = {{ obj | safe }} console.log(list,obj) </script>
4. Vue的数据传递给Django
4.1 axios方法
4.1.1 get传递方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('/newmodle?a=1&b=2')
.then(function (response) {
console.log(response)
console.log(response.data)
})
</script>
4.1.2 post传递方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<script>
function getCookie (name) {
var value = '; ' + document.cookie
var parts = value.split('; ' + name + '=')
if (parts.length === 2) return parts.pop().split(';').shift()
}
axios({
url: '/newmodle/',
method: 'post',
responseType: 'json', // 默认的
data: Qs.stringify({
'a': 1,
'b': 2,
}),
headers: {
'X-CSRFToken': this.getCookie('csrftoken')
}
})
.then(function (response) {
console.log(response)
console.log(response.data)
})
</script>
- django会在浏览器的cookie里面保存一项csrftoken,当进行POST请求时会进行验证
4.2 ajax方法
- 使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求
Vue 要实现异步加载需要使用到 vue-resource 库
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
4.2.1 get传递方式
this.$http.get('/user/newmodle?a=1&b=2') .then(function(response){ console.log(response); console.log(response.data) }
4.2.2 post传递方式
<script src="/static/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> <script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script> <script> function getCookie (name) { var value = '; ' + document.cookie var parts = value.split('; ' + name + '=') if (parts.length === 2) return parts.pop().split(';').shift() } var app = new Vue({ el : '#app', data : { text:'' }, mounted:function(){ this.$http({ url: '/newmodle', method: 'post', responseType: 'json', data: Qs.stringify({ 'a': 1, 'b': 2, }), headers: {'X-CSRFToken': getCookie('csrftoken')} }) .then(function (response) { console.log(response); console.log(response.data); }) } }) </script>
5. Ajax 与 axios
Ajax
Ajax 即“Asynchronous javascript And XML”,是指一种创建交互式网页应用的网页开发技术
- Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)
- Ajax是一种用于创建快速动态网页的技术
- Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
- 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
- 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面
axios:
用于浏览器和node.js的基于Promise的HTTP客户端
- 从浏览器制作XMLHttpRequests
- 让HTTP从node.js的请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换为JSON数据
- 客户端支持防止XSRF
以上是关于学习随笔:Vue.js与Django交互以及Ajax和axios的主要内容,如果未能解决你的问题,请参考以下文章