Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入
补充:
流式布局样式
.xxx{
width: 90vh; /* 屏幕宽度 */
height: 100vh; /* 屏幕高度 */
}
Django国际化配置
LANGUAGE_CODE = 'zh-hans' # 中文
TIME_ZONE = 'Asia/Shanghai' # 上海时区
USE_TZ = False # 数据库时区
Django的TODO注释
# TODO 注释内容
# 然后在pycharm中的最下面 有一个 TODO 页面 打开即可查看注释
Vue的ajax插件:axios
安装
>: cd 项目目录下
>: cnpm install axios
>: cnpm install -g axios // 全局下载 不推荐
配置
// 在main.js 中配置
// 导入
import axios from 'axios'
// 添加vue属性 直接配置插件原型 $axios
Vue.prototype.$axios = axios; // 重点哈!!!!
如何使用?
// 在vue实例里面都可以调用
this.$axios({
url:'xxx.xxx', // 请求url
method:'get', // 请求方式
data: {}, // 数据包参数 post等提交的数据
params: {} // 拼接参数 get提交的数据
}).then(response =>{ //请求成功的回调函数
// 箭头函数的this指代的不是axios所以使用箭头函数
}).catch(error=>{ // 请求失败的回调函数 网络状态码为 4xx 5xx
})
// 异常的响应
console.log(error.response) // 即可拿到response 对象
console.log(error.response.data) // 即可拿到response 数据 例如 status headers
Vue的cookies插件:cookies
安装:
>: cnpm install vue-cookies
main.js配置
import cookies from 'vue-cookies' // 导入插件
两种方式加载
// 第一种
import cookies from 'vue-cookies' // 导入插件
Vue.use(cookies); // 加载插件
new Vue({
// ...
cookies, // 配置使用插件原型 $cookies
}).$mount('#app');
// 第二种
import cookies from 'vue-cookies' // 导入插件
Vue.prototype.$cookies = cookies; // 直接配置插件原型 $cookies
使用
// 增(改): key,value,exp(过期时间)
// 1 = '1s' | '1m' | '1h' | '1d'
this.$cookies.set('token', token, '1y');
// 查:key
this.token = this.$cookies.get('token');
// 删:key
this.$cookies.remove('token');
注:cookie一般都是用来存储token的
// 1) 什么是token:安全认证的字符串
// 2) 谁产生的:后台产生
// 3) 谁来存储:后台存储(session表、文件、内存缓存),前台存储(cookie)
// 4) 如何使用:服务器先生成反馈给前台(登陆认证过程),前台提交给后台完成认证(需要登录后的请求)
// 5) 前后台分离项目:后台生成token,返回给前台 => 前台自己存储,发送携带token请求 => 后台完成token校验 => 后台得到登陆用户
跨域问题(同源策略)
// 后台接收到前台的请求,可以接收前台数据与请求信息,发现请求的信息不是自身服务器发来的请求,拒绝响应数据,这种情况称之为 - 跨域问题(同源策略 CORS)
// 同源: http协议相同 , ip 服务器地址相同, app应用端口相同
// 跨域: 协议,ip地址,应用端口有一个不同,就是跨域
后台处理跨域问题
django-cors-headers模块
# 安装:
pip3 install django-cors-headers
# 注册:
INSTALLED_APPS = ['corsheaders']
# 设置中间件:
MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware']
# 设置跨域:
CORS_ORIGIN_ALLOW_ALL = True
element-ui插件安装
// 官网
https://element.eleme.cn/#/zh-CN
# 安装
>: cnpm i element-ui -S
// css 导入
import 'element-ui/lib/theme-chalk/index.css';
// js 导入
import ElementUI from 'element-ui';
Vue.use(ElementUI); // usr的是js环境 导入的是css
// 如何使用??? ==> 直接复制粘贴修改!
补充:bootscript导入
配置jQuery
>: cnpm install jquery
配置jQuery
:在vue.config.js
中配置(没有,手动项目根目录下新建)
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
配置BootSript
>: cnpm install bootstrap@3
配置BootStrap
:在main.js
中配置
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
// 也可以使用这种方式导入
import bootStrap from 'bootstrap'
Vue.use(bootStrap)
Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入的更多相关文章
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- Springboot如何优雅的解决ajax+自定义headers的跨域请求
1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...
- jQuery插件select2跨域设置xhrFields参数
ajax跨越时默认不带cookie,如果需要带cookie调用,需要设置参数 xhrFields: { withCredentials: true },如: $.ajax({url : "h ...
- nginx处理vue打包文件后的跨域问题
起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...
- Springboot如何优雅的解决ajax+自定义headers的跨域请求[转]
1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...
- jQuery的插件和跨域、ajax
1. 插件: 也称组件 什么是: 拥有专属的HTML,CSS和js的独立页面区域 为什么: 重用! 何时: 只要一个功能/区域可能被反复使用时 如何: 3个来源: 1. 官方插件:jquery ui ...
- vue 组件传参及跨域传参
可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...
随机推荐
- 2019年跨越速递Java工程师笔试题
1.下面哪个选项可以用于JSP页面之间传递对象(A C) A application B page C session D error E response 评语:这道题考察的是对JSP内置对象的了 ...
- Elasticsearch索引按月划分以及获取所有索引数据
项目中数据库根据月份水平划分,由于没有用数据库中间件,没办法一下查询所有订单信息,所有用Elasticsearch做订单检索. Elasticsearch索引和数据库分片同步,也是根据月份来建立索引. ...
- 【数据结构】什么是二叉查找树(BST)
什么是二叉查找树(BST) 1. 什么是BST 对于二叉树中的每个节点X,它的左子树中所有项的值都小于X中的项,它的右子树中所有项的值大于X中的项.这样的二叉树是二叉查找树. 以上是一颗二叉查找树,其 ...
- sql server多表关联update
一般都是写的单表update语句,很少写多表关联的update,但是事实上,在SQL Server中,update的多表连接更新和select的多表连接查询在使用的方法上其实并没有多大区别. 直接上一 ...
- 匿名函数,内置函数II,闭包
1. 匿名函数 匿名函数,顾名思义就是没有名字的函数,那么什么函数没有名字呢?这个就是我们以后面试或者工作中经常用匿名函数 lambda,也叫一句话函数. 现在有一个需求:你们写一个函数,此函数接收两 ...
- PHP mysqli_stat MySQLi 函数
定义和用法 mysqli_stat - 获取当前系统状态信息 版本支持 PHP4 PHP5 PHP7 不支持 支持 支持 语法 mysqli_stat ( mysqli $link ) mysqli_ ...
- 用XHR简单封装一个axios
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML 文件路径
文件路径描述了网站文件夹结构中某个文件的位置. 文件路径会在链接外部文件时被用到: 网页 图像 样式表 JavaScript 绝对文件路径 绝对文件路径是指向一个因特网文件的完整 URL: 实例 &l ...
- opencv-python 图像基础处理(四)
图像梯度-Sobel算子 Gx等于左边减去右边 Gy等于下减去上 可以得到像素值 dst = cv2.Sobel(src, ddepth, dx, dy, ksize)- ddepth:图像的深 ...
- 如何在Macbook上安装MySQL ?
MySQL是常用的一款开源数据库,对各个平台都提供了支持,而Macbook又作为程序员的一款主力开发工具经常被使用.因此怎么在Macbook上安装MySQL进行程序开发也成了一项基本技能.下面来跟随本 ...