Django之Session与Cookie
路由重定向
仓库介绍
vuex插件:可以完成任意组件间信息交互(移动端)
大白话原理:仓库充当第三方,其他组件都从第三方仓库获取info,那么获取的数据都是一份。类似全局单例
在其他组件中,用组件钩子created,把仓库中的info取出来,然后再赋值给本组件的变量。
再监听,如果本组件的变量发生变化,返回去把仓库的info赋值。
缺点:
页面刷新,回到初始值info。但是再手机移动端时,页面是不能刷新重新加载的。比如微信,只能重新向后台
发送请求,不能刷新系统重新加载一边
总结:vuex通常运用在开发移动端项目,pc端项目可以用localStorege和localStorege数据库来替换
原因:vuex中的数据,会在页面刷新后,重置到store/index.js配置的默认值
这样就实现了组件间的互通。文字不好理解看下图案例:
案例:
Home.vue与FreeCourse.vue一致:
仓库代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
info:'这是初始值'
},
mutations: {},
actions: {},
modules: {}
})
Home代码:
<template>
<div class="home">
<Nav/>
<h1>主页</h1>
<input type="text" v-model="info">
<p>{{info}}</p>
</div>
</template>
<script>
import Nav from '../components/Nav'
export default {
data(){
return{
info:''
}
},
created(){
// this.info = this.$store.state.info;
this.info = localStorage.info; //PC端数据库,数据永久的
},
watch:{
info(){
//this.$store.state.info = this.info;
localStorage.info = this.info; //更新数据库
}
},
components:{
Nav,
}
}
</script>
FreeCourse代码:
<template>
<div class="free-course">
<Nav/>
<h1>免费课</h1>
<input type="text" v-model="info">
<p>{{info}}</p>
</div>
</template>
<script>
import Nav from '../components/Nav'
export default {
name: "FreeCourse",
data(){
return{
info:''
}
},
created(){
//this.info = this.$store.state.info;
this.info = localStorage.info; //PC端数据库,数据永久的
},
watch:{
info(){
//this.$store.state.info = this.info;
localStorage.info = this.info; //更新数据库
}
},
components:{
Nav
}
}
</script>
<style scoped>
</style>
前端存储数据大汇总
"""
1)cookie:以字符串形式存储,数据有过期时间(过期时间到,数据失效吗,否则永远有效)
2)localStorage:以对象形式存储,数据永久保存
3)sessionStorage:以对象形式存储,生命周期同所属页面标签(页面不关闭,数据就有效)
4)vuex(store):仓库,以对象形式存储,当页面刷新数据就重置(移动端不能刷新,所以只有应用大退才会重置)
"""
前后台交互方式(重点)
"""
1)form表单方式
i)get | post 两种请求方式,get请求包含直接在浏览器中输入url回车后发送的请求
ii)该方式的特点是一定会发生页面的跳转(刷新页面叫本页跳转) - 后台决定页面路由
2)ajax异步方式
i)get | post | patch | put | delete 等众多请求方式,请求的目的都是异步获取后台的数据
ii)该方式的特点是不会刷新页面,只是得到新的数据,前台自己完成页面的局部刷新、整体刷新、页面跳转 - 前台决定页面路由
注:
i)前后台不分离项目,采用form表单请求,可以完成页面跳转,同步ajax异步请求完成页面局部刷新
ii)前后台分离项目,不采用form表单请求,页面刷新、页面跳转的请求,都是由ajax完成,只不过页面跳转,后台相应的是跳转的目标url,前台再自己完成跳转
iii)前后台分离项目,前台也会出现大量的form表单,但是form表单的提交按钮,走的不是form表单的submit提交,而是ajax请求
"""
前后台数据交互
axios插件:完成前后台ajax交互的
"""
1)安装:在前端项目根目录下的终端
cnpm install axios
2)项目配置:main.js
import axios from 'axios'
Vue.prototype.$axios = axios;
3)在任何一个组件的逻辑中,都可以访问 this.$axios()
beforeMount() {
// 请求后台
this.$axios({
url: this.$settings.base_url + '/test/',
method: 'delete',
})
}
"""
同源策略 - 前后端跨域问题
"""
一、django默认是同源策略,所以前后台分离项目,访问django会出现CORS跨域问题的报错
二、什么叫跨域
i)ip不同:前后台(两个服务器)不在一台主机上运行的
ii)port不同:前后台(两个服务器)是相互独立的,运行在不同的端口之上
iii)协议不同:http与https之间也同样是跨域问题
注:三者满足一个,就是跨域
三、解决跨域
i)伪装:将前台请求伪装成后台自己对自己发生的请求
ii)后台主动允许跨域:后台配置允许跨域即可(在响应头中处理)
四、Django解决跨域
i)安装模块:
pip install django-cors-headers
ii)注册app:
INSTALLED_APPS = [
...
'corsheaders'
]
iii)添加中间件
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
iv)允许跨域
CORS_ORIGIN_ALLOW_ALL = True
"""
前后台分离项目交互流程
"""
1)启动前后台项目
2)前台配置页面路由,渲染前台页面 | 后台配置数据路由,响应数据(处理好跨域问题)
3)前台通过ajax请求后台接口
i)将前台数据提交给后台
ii)得到后台的响应结果
iii)根据响应结果的数据,最后完成页面的局部刷新、整体刷新、页面跳转
"""
前台传数据到后台,异步请求细节
"""
1)vue框架用axios完成ajax异步请求
语法:this.$axios().then().catch();
解读:$axios()是请求逻辑 | then()是正常响应逻辑 | catch()是错误响应逻辑
具体语法:
this.$axios({
url: '后台接口链接',
method: '请求方式',
params: {}, // url拼接数据,所有的请求都可以发送该数据
data: {}, // 数据包数据,除了get请求外,都可以发送该数据
headers: {} // 请求头参数
}).then(response => {
// response是http状态2xx的响应结果,响应数据是response.data
}).catch(error => {
// error是http状态4xx、5xx的响应结果,错误响应对象是error.response,错误响应数据是error.response.data
})
2)前台提交数据的两种方式:
i)url拼接参数:
所有请求都拥有的提交数据的方式
该方式会将数据都在请求url后用?拼接的方式提交给后台
提交数据只能采用url字符串方式提交给后台,数据是不安全的
axios插件可以用params属性携带url拼接参数
ii)数据包参数:
除get请求外的所有请求都拥有的提交数据的方式
该方式会将数据进行加密,打包成数据包方式提交给后台
打包加密数据有三种方式:urlencoded(form默认的方式)、form-data(可以提交文件)、json(提交json数据)
原生Django没有提供所有类型的数据包数据解析规则,但是数据会在request.body中,我们可以自己手动解析
Django rest-framework框架提供了三种类型的数据包参数解析
axios插件可以用data属性携带数据包参数
"""
"""
注意项:
1)this.$axios({}).then(response => {}).catch(error => {}) 中的then和catch回调函数,不能写function,因为实际vue项目开发,一定会在回调逻辑用到this语法(代表vue对象),而在function中使用了this语法,function就不是普通函数了(可以理解为类,this就不能代表vue对象了)
2)原生django没有提供所有类型的数据包数据解析规则,但是数据会在request.body中,可以自己解析;Django-rest-framework框架是提供了三种类型的数据包参数解析
"""
method: 'post'时:
method: 'get'时:
案例:
<template>
<div class="home">
<Nav/>
<h1>主页</h1>
<input type="text" v-model="info">
<p>{{info}}</p>
</div>
</template>
<script>
import Nav from '../components/Nav'
export default {
data(){
return{
info:''
}
},
beforeMount(){
//请求后台
this.$axios({
url:this.$settings.base_url + '/test/',
//拼接参数,可以用params提交,也可以用?在url后直接拼接 url:this.$settings.base_url + '/test/?a=1&b=2'
method:'post',
params:{ //url拼接数据,所有的请求都可以发送该数据
a:1,
b:2
},
//数据包参数有三种:urlencoded(form表单默认格式) | form-data(提交文件)|json(下面这种,Django无法解析)
//原生Django没有提供所有类型的数据包数据解析规则,但是数据会在request.body中,我们可以自己手动解析
//Django rest-framework框架时提供了三种类型的数据包参数解析
data:{ //数据包数据,除了get请求外,都可以发送该数据
x:100,
y:200,
}
}).then((response)=>{
console.log(response.data);
this.info = response.data.name
}).catch(error=>{
console.log(error.response)
})
},
created(){
// this.info = this.$store.state.info;
this.info = localStorage.info; //PC端数据库,数据永久的
},
watch:{
info(){
// this.$store.state.info = this.info;
localStorage.info = this.info; //更新数据库
}
},
components:{
Nav,
}
}
</script>
Django之Session与Cookie的更多相关文章
- 浅析Django之session与cookie
浅析Django之session与cookie 1 session与cookie概述 原理: 由于HTTP协议是无状态,无连接的,当用户发起网路请求时,需要服务端能标识用户ID,用以存储用户相关信息, ...
- django学习,session与cookie
Cookies,某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明.Cook ...
- Django 用Session和Cookie分别实现记住用户登录状态
简介 由于http协议的请求是无状态的.故为了让用户在浏览器中再次访问该服务端时,他的登录状态能够保留(也可翻译为该用户访问这个服务端其他网页时不需再重复进行用户认证).我们可以采用Cookie或Se ...
- django之Session、Cookie
Session ·Session存在于服务器端 ·Session的设置: request.session['name'] = value ·Session的获取: dic = request.sess ...
- 简单操作django中session和cookie
cookie 1.会话技术 2.客户端的会话技术( 数据库保存在浏览器上) 3.问题导致原因: 在web应用中,一次网络请求是从request开始,到response结束,跟以后的请求或者跟其他请求没 ...
- python 学习笔记十九 django深入学习四 cookie,session
缓存 一个动态网站的基本权衡点就是,它是动态的. 每次用户请求一个页面,Web服务器将进行所有涵盖数据库查询到模版渲染到业务逻辑的请求,用来创建浏览者需要的页面.当程序访问量大时,耗时必然会更加明显, ...
- python运维开发(十九)----Django后台表单验证、session、cookie、model操作
内容目录: Django后台表单验证 CSRF加密传输 session.cookie model数据库操作 Django后台Form表单验证 Django中Form一般有2种功能: 1.用于做用户提交 ...
- Django跨域、cookie、session
前后台分离开发 1.前台页面运行在前台服务器上,负责页面的渲染(静态文件的加载)与跳转 2.后台代码运行在后台服务器上,负责数据的处理(提供数据请求的接口) 跨域 什么是跨域? 通常情况下,A网页访问 ...
- Django框架详细介绍---cookie、session、自定义分页
1.cookie 在HTTP协议介绍中提到,该协议是无状态的,也就是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不会直接影响后面的 ...
随机推荐
- lua在C/C++中使用table生成对应键及值
int nTop = lua_gettop(L); // 栈内初始数,假设当前为0 lua_newtable(L); // push table lua_pushstring(L,"Line ...
- springmvc url处理映射的三种方式:
一.SpringMVC简介 SpringMVC是一种基于Spring实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,使用了MVC架构模式的思想,将web层进行职责解耦,并管理应用所需对象 ...
- java spring使用Jackson过滤
一.问题的提出. 项目使用Spring MVC框架,并用jackson库处理JSON和POJO的转换.在POJO转化成JSON时,希望动态的过滤掉对象的某些属性.所谓动态,是指的运行时,不同的cont ...
- Vue实现同级组件的通信
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.index.html <!DOCTYP ...
- 【t093】外星密码
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 有了防护伞,并不能完全避免2012的灾难.地球防卫小队决定去求助外星种族的帮助.经过很长时间的努力,小 ...
- [转]分布式监控工具Ganglia 介绍 与 集群部署.
如果你目的很明确就是冲着标题来的,不爱看我唠叨,请直接进入第二个分割线之后的内容. 其实之前就是有做Swift监控平台的打算的,但是因为没什么硬性需求么,也不要紧的,就一直搁置了.最近实验室来了个大二 ...
- Tomcat最佳线程数
什么是最佳线程数? 为满足更多用户访问需求,可以调整Tomcat线程数,但是不能太大,否则导致线程切换开销,随着用户递增(线程数也随之调整),系统QPS逐渐增加,当用户量达到某个值,QPS并不会增加, ...
- the password has expired
Oracle提示错误消息ORA-28001: the password has expired,是由于Oracle11G的新特性所致, Oracle11G创建用户时缺省密码过期限制是180天(即6个月 ...
- Roslyn 使用 Target 替换占位符方式生成 nuget 打包
本文告诉大家如何编写在编译过程修改打包文件 在项目文件的相同文件夹可以放一个 nuspec 用来告诉 VisualStudio 如何打包 现在尝试创建一个项目 NearjerbetearDeeyito ...
- js求1到任意数之间的所有质数
何为质数: 只能被1 和 自身 整除的数; 方法: 利用js中求模, 看是否有余数. ---> 3%2 = 1; 5%2 = 3......... 代码如下: function test (n) ...