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

箭头函数

在 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 中配置

INSTALLED_APPS= [

'corsheaders'

]

添加中间件

MIDDLEWARE = [

'corsheaders.middleware.CorsMiddleware'

]

允许跨域源

CORS_ORIGIN_ALLOW_ALL = True

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

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

csrf 没法传给前端

csrf 这种安全校验方式比较low

有更好的方式可以代替它

至于是哪种，后面会讲。

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

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

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');