vuecliPC项目笔记
vue-axios跨域使用
在config.index.js设置本地代理
proxyTable: {
'/api': {
target: 'http://192.168.5.4:8686/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
在config.dev.env.js设置开发接口
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:'/api/'
})
在config.prod.env.js设置生产接口
module.exports = {
NODE_ENV: '"production"',
API_HOST:'http://192.168.5.4:8686/'
vue img标签数据定义
<img v-bind:src="item.pic" />
单选框组件
.cbox{display:block;width:16px;height:16px;border:1px solid #ccc;background:#fff;position: relative;} .cbox.checked{background:#10adff;} .cbox.checked:after{content:"√";color: #FFFFFF;position: absolute;left: 2px;top: -3px;}
倒计时
export default {
data(){
return{
time: 5 // 倒计时
}
},
methods: {
send() {
let me = this;
let interval =setInterval(function() {
if ((me.time--) <1) {
me.time = 0;
me.$router.push({path: '/'});
clearInterval(interval);
};
}, 1000);
}
},
mounted(){
this.send();
}
}
自定义跳转页面跳转页面
this.$router.push({path: '/'});
vuecli Axios Post请求后端无法接受参数正确写法
data (){
return{
data:{}
}
}
this.data={
"dataType":"day"
}
this.$ajax({
method:'post',
url:user,
params:{
"requestStr":this.data
}
})
.then(function(res){
console.log(res.data);
console.log(res.data.apiFlag);
console.log("成功");
})
.catch(function(err){
console.log(err);
console.log("失败");
})
}
vue生命周期
vue-cli Java类加密key iv
vuex使用
下载vuex：cnpm install vuex --save
目录结构
vuex的getters带有缓存慎用！！！
cookie操作
获取机器码
// 获取机器码
generateUUID() {
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c) {
var r = (d + Math.random()*16)%16 | 0;
d = Math.floor(d/16);
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
});
return uuid;
}
后端返回的验证码图片可能是个图片流
后端返回的验证码图片可能是个图片流也可以用vue赋值形式
vuecli的网站favicon图标设置
index.html设置
cookies的设置获取和删除
文本超出隐藏显示....
.textt{
display:block;
padding-right:14px;
width:100px;/*字符的宽度是50*/
white-space:nowrap;/*禁止换行*/
text-overflow:ellipsis;/*文本超出隐藏*/
-o-text-overflow:ellipsis;/*跟上面一样，只是为了兼容其他浏览器*/
overflow:hidden;/*隐藏，跟text-overflow配合使用*/
}
上传并预览限制上传数量
readAsDataURL(){
var result = document.getElementById("result");
if(typeof FileReader == 'undefined') {
result.innerHTML= "抱歉，你的浏览器不支持FileReader";
}
// 检查是否为图像类型
var simpleFile = document.getElementById("file").files[0];
if(!/image\/\w+/.test(simpleFile.type)) {
alert("请确保文件类型为图像类型");
return false;
}
var reader = new FileReader();
// 将文件以Data URL形式进行读入页面
reader.readAsDataURL(simpleFile);
reader.onload= function(e){
// console.log(this.result);
//创建新的img
if (result.children.length== 1){
alert("最多长传1张");
return;
};
var newNode = document.createElement("img");
newNode.src=this.result;
result.appendChild(newNode);
// console.log(result.children.length);
}
}
//刷新当前组件 this.$router.go(0); return；
上传文件
