目录
一, vue 的 Ajax 插件: axios
1, 安装 axios
2,axios 参数
二, CORS 跨域问题(同源策略)
1,Django 解决 CORS 跨域问题方法
三, 前端请求携带参数及 Django 后台如何获取
1, 拼接参数方式携带参数和获取
2, 数据包方式携带的参数和获取
四, Vue 配置 ElementUI
五, Vue 配置 jQuery 和 Bootstrap
1, 配置 jQuery 环境
2, 配置 Bootstrap 环境
补充小知识点
一, vue 的 Ajax 插件: axios
1, 安装 axios
- // 1)安装插件(一定要在项目目录下):
- >: cnpm install axios
- // 2)在 main.JS 中配置:
- import axios from 'axios'
- Vue.prototype.$axios = axios;
2,axios 参数
- this.$axios({
- // 后端服务器端口
- url: 'http://127.0.0.1:8000/cars/',
- // 相当于 Ajax 的 type
- method: 'get',
- }).then(response => {
- console.log(response);
- // this.cars = response.data;
- }).catch(error => { // 网络状态码为 4xx,5xx
- console.log(error); // 可以打印具体的报错信息
- });
二, CORS 跨域问题(同源策略)
同源: http 协议相同, ip 服务器地址相同, App 应用端口相同.
跨域: 协议, ip 地址, 应用端口有一个不同, 就是跨域.
Django 默认是同源策略, 不接收跨域请求.
1,Django 解决 CORS 跨域问题方法
使用第三方模块: django-cors-headers
- # 1)Django 安装 cors 模块(可在 cmd 中, 要注意切换到项目文件夹中; 也可以直接在 pycharm 中的 terminal 中安装):
- >: pip3 install django-cors-headers
- # 2)在 settings 注册模块, 配置中间件:
- INSTALLED_APPS = [
- ...
- 'corsheaders'
- ]
- MIDDLEWARE = [
- ...
- 'corsheaders.middleware.CorsMiddleware'
- ]
- # 3)在 settings 开启允许跨域:
- CORS_ORIGIN_ALLOW_ALL = True
三, 前端请求携带参数及 Django 后台如何获取
1, 拼接参数方式携带参数和获取
前端发送:
任何请求 (get,post...) 都可以通过 url 拼接的方式携带参数.
- created() {
- // 完成 Ajax 请求后台, 获得数据库中的数据
- this.$axios({
- url: this.$settings.base_url + '/cars/',
- method: 'post',
- params: { // url 拼接参数: 任何请求都可以携带
- a: 1,
- b: 2,
- c: 3
- },
- }).then(response => {
- // console.log('正常', response);
- this.cars = response.data;
- }).catch(error => { // 网络状态码为 4xx,5xx
- console.log('异常', error.response);
- });
- }
后端获取:
在 request.GET 中获取.
2, 数据包方式携带的参数和获取
前端发送:
前端向后端发送请求, get 方式是无法携带数据包参数的.
- created() {
- // 完成 Ajax 请求后台, 获得数据库中的数据
- this.$axios({
- url: this.$settings.base_url + '/cars/',
- method: 'post',
- params: { // url 拼接参数: 任何请求都可以携带
- a: 1,
- b: 2,
- c: 3
- },
- data: { // 数据包参数: get 请求是无法携带的
- x: 10,
- y: 20,
- }
- }).then(response => {
- // console.log('正常', response);
- this.cars = response.data;
- }).catch(error => { // 网络状态码为 4xx,5xx
- console.log('异常', error.response);
- });
- }
后端获取:
在 request.body 中获取.
四, 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);
五, Vue 配置 jQuery 和 Bootstrap
1, 配置 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"]
- })
- ]
- }
- };
2, 配置 Bootstrap 环境
安装:
>: cnpm install [email protected]
配置 Bootstrap: 在 main.JS 中配置
- import "bootstrap"
- import "bootstrap/dist/css/bootstrap.css"
补充小知识点
html 文件头的 en 换成 zh 可以使浏览器不显示是否翻译弹框.
CSS 伪类: nth-child(5n)可以获取索引 5 的倍数的标签.
TODO 注释.
来源: http://www.bubuko.com/infodetail-3345229.html