学习随笔: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的更多相关文章
- 【vue基础学习】vue.js开发环境搭建
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...
- PyQt(Python+Qt)学习随笔:使用QColorDialog.getColor交互设置部件的颜色
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 PyQt中的部件只要是QWidget的派生类都可以在Designer或 ...
- PyQt(Python+Qt)学习随笔:使用QFontDialog.getFont交互设置应用或部件的字体
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 PyQt中的部件只要是QWidget的派生类都可以在Designer或 ...
- 学习笔记-vue.js快捷登录 enter
一般监听在输入密码的input监听keyup事件,加enter修饰符.如果input是组件,加上.native修饰符.<div id="app"> <input ...
- 学习笔记-vue.js获取file文件数据
在vue中file不能像其他input一样使用 v-model 双向数据绑定,因为文件选择是只读,只能用onchange监控值得变化. 所有需要使用v-on:change去监控. 例1: <in ...
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- Vue.js 2.x笔记:服务请求axios(8)
1. axios简介 vue2.0之后,推荐使用axios. axios官方地址:https://github.com/axios/axios 2. axios安装 npm安装: npm instal ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- Vue.js 学习笔记之三:与服务器的数据交互
显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...
随机推荐
- MYCP作业
本次作业主要复习了输入流输出流的内容 作业要求: 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt ...
- (三)初探maven之使用IDE
一.在IDE中使用maven 打开Eclipse,在菜单栏依次选中window => preferences => Maven => Installations , 然后添加 ...
- EffectiveC++笔记 目录
Charpter 1. 让自己习惯C++ 条款01: 视C++为一个语言联邦 条款02: 尽量以const,enum,inline替换#define 条款03: 尽可能使用const 条款04: ...
- 一、下载安装superset
1.环境介绍: 操作系统:Windows 10 python版本:3.73 2.创建虚拟环境: 打开命令行窗口,使用安装python自带的pip命令,下载pinenv 虚拟环境工具, pip inst ...
- day 24-1 继承
继承 什么是继承: 继承是一种创建新类的方式,在 python 中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 父类必须在子类上面 一个类 可以被多个类继承 一个 ...
- CMDB项目开发
CMDB介绍 CMDB --Configuration Management Database 配置管理数据库, CMDB存储与管理企业IT架构中设备的各种配置信息,它与所有服务支持和服务交付流程都紧 ...
- pandas基础用法
首先生成一维数组 data = pd.Series([1,2,3,4,5,6,7,8,9])data运行结果 data.head()#默认取前五条,当然也可以加参数 data.tail()#默认取前五 ...
- Pycharm问题:module 'pip' has no attribute 'main'
更新pip之后(pip 10 版本之后),Pycharm安装package出现报错:module 'pip' has no attribute 'main' 解决办法如下: 找到Pycharm安装目录 ...
- Elasticsearch一些使用笔记(持续更新)
这篇博客记录这一些运维ES的一些经验. 1.节点磁盘使用率过高,导致ES集群shard无法分配,丢失数据? 有两个配置,分配副本的时候 参数名称 默认值 含义 cluster.routing.allo ...
- Helloworld——SpringMVC
搭建环境:eclipse 这里需要配置Server runtime environment——Apache Tomcat 到官网下载 解压 在eclipse中: Window perferences ...