vue 各种配置 及 与后端的数据交互

时间:2024-03-02 07:40:17

箭头函数

在 es5 中中只有function

在 es6 中新增了 箭头函数 与 对象方法

function f1(){
    console.log(\'f1 run\')
}
f1()

这就是很正常的一个函数调用,这叫函数,没有调用者,有调用者的才叫方法

如果不写上 return 返回值,他就会默认返回空,会打印出 undefined。

另一种写法

let r1 = function(){
    return 10;
}

等号的右边相当于是一个匿名函数,把这个匿名函数赋值给了 r1 ,这个函数也可以写成箭头函数的形式

let r1 = () => {
    return 10;
}

当箭头函数的内容只有一个返回值的时候,可以简写

let r1 = () => \'返回值\'

当箭头函数有且只有一个参数的时候, ( ) 也可以省略

let r1 = a => a*10

配置全局css和js

配置js:

就拿配置一个url来作为例子

export default {
    base_url: \'http://localhost:8001\',
}

如果想要在全局都能调用这个js,就必须要在main.js文件里配置

import settings from \'@/assets/js/settings\'
Vue.prototype.$settings = settings;

(vue推荐的是css文件要加文件后缀,其他都不推荐加后缀,所以这里settings不加.js)

这里还要解释一下prototype:Vue.prototype就相当于是给 Vue这个类添加类的属性,所以所有 Vue实例化出来的对象都可以调用这个属性,为什么要加 $ ,这是默认的,因为拿这个属性不就像是拿vue的成员变量一样吗?所以加个$。

配置css:

和js一样,在assets文件夹下建一个css文件夹,写一个css文件就可以了。

store仓库的应用

vue 项目中有一个文件夹是 store ,文件夹下有一个index.js 文件,是仓库,用来存储东西。但是他有一个特点,那就是 刷新页面就会重置到初始值。在这个仓库里配置的东西,可以在任何一个组件逻辑中,也可以在任何一个组件模板中访问或者修改。

state: {
        car:{
            name:"待定",
            price:"0"
        }
    },

使用:

在任何一个组件逻辑中:this.$store.state.car 访问或是修改
在任何一个组件模板中:$store.state.car 访问或是修改

因为他的特性,所以这个仓库更适合用于移动APP的开发,因为app没有刷新呀

vue搭建 Element 环境

Element ,是由饿了么开发的,东西都是组件,专门给vue来用的。

安装

到项目所在目录执行

cnpm install element-ui

配置全局环境

在main.js 里配置

import ElementUI from \'element-ui\';
import \'element-ui/lib/theme-chalk/index.css\';

Vue.use(ElementUI);//这个是配置全局环境,不需要用,就已经存在了,就是直接可以用,不要调用什么东西了。

关于this

函数中的this

面向对象函数:this为调用者

面向过程和面向对象:this可能为调用者

面向过程:没有this(箭头函数)

正常写法

        created(){
            //这个this是vue对象,调用ele的组件,所以在ele组件内是拿不到vue对象的
            this.$message({
                message:\'这个ele的弹出框\',
                type:\'success\',
                duration:\'1000\',
                onClose(){
                    //这里没有拿到ele对象,为undefind,这个方法既属于面向过程也属于面向对象所以this异常
                    alert(this)
                }
            })
        }

那么要怎么在 lel组件内部获取vue对象?

可以先用一个变量来保存this。

created(){
            let _this=this
            this.$message({
                message:\'这个ele的弹出框\',
                type:\'success\',
                duration:\'1000\',
                onClose(){
                    alert(_this)//这里的_this就是vue对象了。
                }
            })
        }

还有一种,通常用这种

箭头函数

created(){
            this.$message({
                message:\'这个ele的弹出框\',
                type:\'success\',
                duration:\'1000\',
                onClose:()=>{
                    alert(this)//函数内部没有this,就会往上一级找
                }
            })
        }

vue 搭建 js 和 jq 环境

安装jquery

cnpm install jquery

安装bootstrap

cnpm install bootstrap@3

配置环境

// 加载bs的逻辑
import "bootstrap"  
//配置bs的样式
import "bootstrap/dist/css/bootstrap.css"

配置jquery

项目是不会帮你自动生成配置文件 vue.config.js 文件的,所以要自己手动建,名字一定要这个!

// 修改该文件内容后,只有重启,才能同步配置
const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.$": "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

记得配置完了之后一定要重启项目,才能生效。

前后端分离的数据交互

在之前我们都是用django来实现前后端的,前后端是不分离的,前端可以用模板语法来写,现在我们的前端是用vue来写的,所以就要涉及到分离的情况下,数据该怎么交互。

首先不推荐使用 ajax 了,因为他的特点是 dom操作不适合。

用 axios

安装

cnpm install axios

main.js 配置

import Axios from \'axios\'
Vue.prototype.$axios = Axios;

然后就可以在 vue 组件里使用了

created(){
            this.$axios({
                //拿取全局的js文件 
                url: this.$settings.base_url + \'/cars/\',
                method: \'get\',
                params: {
                },
                data: {
                },
                //当请求发送成功的时候就会调用then,失败的时候就会调用catch
            }).then((response) => {
                this.cars_data = response.data;
                }).catch(error =>{
                    console.log(error)
            })
        }

get 请求的时候不会用到 data,只会用params,用来传参,url拼接的数据

post请求的时候 两个都会用到, data用来携带请求的数据

现在问题来了,vue项目启动需要占用一个端口,比如说8000 ,django启动也需要占用一个端口比如说8001,那么 vue 的数据要怎么发给 django 呢?这就涉及到了跨域问题

django跨域问题

首先一定要安装一个插件

pip intstall django-cors-headers

然后需要在 配置文件settings 中配置

#注册app
INSTALLED_APPS= [
    \'corsheaders\'
]

#添加中间件
MIDDLEWARE = [
    \'corsheaders.middleware.CorsMiddleware\'
]

#允许跨域源
CORS_ORIGIN_ALLOW_ALL = True

这里又有一个问题,我们在开发前后端不分离的项目的时候,会涉及到一个 csrf 的问题,它是用来解决 跨站请求伪造问题的,他的实现原理就是会自动给前端的form表单生成一个隐藏的input框,并给他一个随机生成的字符串,以此来鉴定你这个form表单是不是我允许的。

那么在前后端分离的情况下,vue要怎么接收这个csrf字符串呢?答案是不能接收,没办法接收,所以那我们只能用老办法了,没错,注释掉 csrf校验的中间件,原因有三点:

  1. csrf 没法传给前端
  2. csrf 这种安全校验方式比较low
  3. 有更好的方式可以代替它

至于是哪种,后面会讲。

所以我们只用注释掉就好了。

那么怎么实现前后端数据交互呢?

url: this.$settings.base_url + \'/cars/\',

这一句就是访问后端的 url 了,然后在django的 路由层(urls)里面配置好对应的 url

urlpatterns = [
    url(r\'^admin/\', admin.site.urls),
    url(r\'^cars/\', views.cars),
    url(r\'^login/\', views.login),
    url(r\'^register/\', views.register),
]

然后去调用对应的视图函数就好了。

关于前端 两种请求方式携带的数据,后端的拿取方式

def login(request):
    if request.method == \'POST\':
		print(request.body)#如果是 post请求的话,前端data中带的数据都在这里面
        
    if request.method == \'GET\':
        print(request.GET)#如果是 get请求的话,前端params中带的数据都在这里面
        
    return JsonResponse(back_dic)


然后返回的数据,就会被前端 axios 中的 then 接收

then(response => {
                    this.$message({
                        //接受的数据就在 response.data中
                        message: response.data.msg,
                        type: \'warning\'
                    });

vue 使用 cookies

安装

cnpm install vue-cookies

环境配置

import Cookies from \'vue-cookies\'
Vue.prototype.$cookies = Cookies;

使用cookies

 // 有响应的登录认证码,存储在cookie中
                    // 设置:set(key, val, exp)
                    // 取值:get(key)
                    // 删除:remove(key)
                    let token =  1000;
                    if (token) {
                        //设置cookies,第一个参数是键,第二个是值,第三个是过期时间。
                         this.$cookies.set(\'token\', token, \'2d\');

                        //拿取cookies
                         console.log(this.$cookies.get(\'token\'));
                        
                        //删除cookies
                         this.$cookies.remove(\'token\');