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: '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
安ootstrap
cnpm install bootstrap@3
配置环境
// 加载bs的逻辑
import "bootstrap"
/
/配置bs的样式
import "bootstrap/dist/css/bootstrap.css"
配置jquery
项⽬是不会帮你⾃动⽣成配置⽂件 fig.js ⽂件的，所以要⾃⼰⼿动建，名字⼀定要这个！
// 修改该⽂件内容后，只有重启，才能同步配置
const webpack = require("webpack");
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/', ister),
]
然后去调⽤对应的视图函数就好了。
关于前端两种请求⽅式携带的数据，后端的拿取⽅式
def login(request):
hod == 'POST':
print(request.body)#如果是 post请求的话，前端data中带的数据都在这⾥⾯
hod == '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
jquery在项目里是干啥的
console.log(this.$('token'));
//删除cookies
this.$ve('token');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。