Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入

目录

• 补充:
  • 流式布局样式
  • Django国际化配置
  • Django的TODO注释
• Vue的ajax插件:axios
  • 安装
  • 配置
  • 如何使用?
• Vue的cookies插件:cookies
  • 安装:
  • main.js配置
  • 使用
• 跨域问题(同源策略)
  • 后台处理跨域问题
• element-ui插件安装
• 补充:bootscript导入
  • 配置jQuery
  • 配置BootSript

补充:

流式布局样式

.xxx{
     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)