Vue 05
axios
- 就是Vue的ajax插件
安装
在vue项目文件下安装 cnpm install axios
配置
- 为vue项目全局配置axios
import Axios from axios
// 添加ajax原型(类属性)
Vue.prototype.$ajax = Axios
使用
let _this = this
this.$ajax({
// 后端提交地址
url: 'http://127.0.0.1:8000/loginAction',
method: 'post',
params: {
username: this.username,
password: this.password
}
}).then(function(response) {
// this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向
// 要更新页面的title变量,title属于vue实例
// response为回调的对象,该对象的data属性就是后台返回的数据
_this.title = response.data
}).catch(function(error) {
window.console.log(error)
})
// 回调函数也可以使用箭头函数的形式, 而回调函数自身是没有this的
this.$ajax({
// 后端提交地址
url: 'http://127.0.0.1:8000/loginAction',
method: 'post',
params: {
username: this.username,
password: this.password
}
}).then((response) => {
this.title = response.data
}).catch((error) => {
window.console.log(error)
})
CORS跨域问题
-
Cross-Origin Resource Sharing (CORS)
-
同源: http协议相同, ip服务器地址相同, 应用端口相同
-
跨域: 上面三个有一个不同
-
django默认是响应同源请求
解决django跨域问题
- 安装cors模块
- 注册app
- 添加中间件
- 开启跨域
"""
1）Django按照cors模块：
>: pip install django-cors-headers
2）在settings注册模块，配置中间件：
INSTALLED_APPS = [
...
'corsheaders'
]
3) 添加中间件
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
4）在settings开启允许跨越：
CORS_ORIGIN_ALLOW_ALL = True
"""
aixos提交数据
- 拼接参数 (任何请求)
- params
- 数据包参数 (get请求无法携带)
- data
Vue配置ElementUI
"""
1）安装插件(一定要在项目目录下)：
>: cnpm install element-ui
2）在main.js中配置：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3）使用：
复制粘贴
"""
Vue配置BootStrap
- 先安装jQuery
>: cnpm install jquery
- vue/cli 3 配置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"]
})
]
}
};
- 安装BootStrap
>: cnpm install bootstrap@3
- vue/cli 3 配置BootStrap：在main.js中配置
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
