Vue+Nodejs项目中碰到的一些问题
1、数据进行CRUD后刷新页面的方法:
- 强制刷新:
this.$forceUpdate();
; - 使用window.reload()或者router.go(0),但会使整个浏览器进行重载,页面闪烁;
- 重新调用接口,但性能较差,代码冗长;
- provide-inject:
App.vue中提供provide的this.reload方法:
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
<div class="pop"></div>
</div>
</template>
<script>
export default{
data(){
return{
isRouterAlive:true,
}
},
provide(){ //全局设置provide
return{
reload:this.reload,
}
},
methods:{
//刷新页面
reload(){
this.isRouterAlive=false;
this.$nextTick(function(){
this.isRouterAlive=true;
})
}
}
}
</script>
在需要刷新的页面内注入inject:
handleDelete(row){
const flag=confirm("确认删除该用户?");
if(flag){
deleteUser(row.id).then(ret=>{
alert("删除成功!");
this.reload();
}).catch(err=>{
console.log(err);
})
}
},
2、js的三种提示框:alert,confirm,prompt;
3、element-ui表单解决自动填充账号密码的问题:autocomplete="new-password"
;
4、将路由模式由hash改成history时要将配置文件中publicPath: './'
改成publicPath: '/'
;
5、输入校验:
内部校验:
rules:{
userName:[
{required:true,message:"用户名不能为空",trigger:"blur"},
{min:2,max:20,message:"用户名在2~20位之间",trigger:"change"},
],
password:[
{required:true,message:"密码不能为空",trigger:"blur"},
{min:6,max:18,message:"密码在6~18位之间",trigger:"change"},
{validator:isValidPassword,trigger:"blur"},
],
permission:[
{required:true,message:"权限不能为空",trigger:"blur"},
{validator:isValidPermission,trigger:"blur"},
],
tel:[
{required:true,message:"联系方式不能为空",trigger:"blur"},
{validator:isValidPhone,trigger:"blur"},
]
},
外部校验:
function isValidPhone(rule,value,callback){
const reg=/^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/; //校验电话和手机号规则
if(value==""||value==undefined||value==null){
callback(new Error("手机号或者电话号码不能为空!"));
}else{
if(value!=""&&(!reg.test(value))){
callback(new Error("请输入正确的电话号码或者电话号码!"));
}
}
callback();
}
function isValidPermission(rule,value,callback){
const reg=/^((1[0-2])|[1-9])(,((1[0-2])|[1-9]))*$/; //校验权限规则
if(value==""||value==undefined||value==null){
callback(new Error("权限不能为空!"));
}else{
if(value!=""&&(!reg.test(value))){
callback(new Error("请输入正确的权限格式!"));
}
}
callback();
}
function isValidPassword(rule,value,callback){
const reg=/^([_a-zA-Z])(([_a-zA-Z0-9]){5,17})$/; //校验密码规则
if(value==""||value==undefined||value==null){
callback(new Error("密码不能为空!"));
}else{
if(value!=""&&(!reg.test(value))){
callback(new Error("密码不合法!"));
}
}
callback();
}
export {isValidPhone,isValidPermission,isValidPassword};
6、组件间通信bus总线的off写法:不一定跟on放在一起,必须设定在接收数据组件之后销毁才行,否则发送方发送的数据还未等接收方接收总线事件就被销毁了;
7、修改el-input框中字体样式需要找到elui根文件的form样式进行修改并且去掉style中的scoped样式:
.elFormItem .el-form-item__label{
color: #ffffff;
}
8、修改用户功能两种传递参数方法($bus和$route),bus总线进行组件间通信传送数据虽然接收方能够接受到但是改不了,而用route的params参数传过去则可以修改;之后又发现一种新的解决办法,就是将需要更新的数据放在$on监听事件之外mounted挂载方法之内执行,大概是由于$on事件执行后会引起一次页面的刷新从而丢失数据:
methods: {
submitForm(formName){
this.$refs[formName].validate(valid=>{
if(valid){
updateUser(this.ruleForm).then(res=>{
console.log(this.ruleForm);
this.$router.go(-1);
})
}else return false;
})
},
resetForm(formName){
this.$refs[formName].resetFields();
},
getUserInfoByRoute(){
const data=this.$route.params.row;
this.$set(this.ruleForm,"id",data.id);
this.$set(this.ruleForm,"userName",data.name);
this.$set(this.ruleForm,"password",data.password);
this.$set(this.ruleForm,"permission",data.permission);
this.$set(this.ruleForm,"tel",data.tel);
},
getUserInfo(data){
console.log("updateUser接收到的数据",JSON.stringify(data));
this.$set(this.ruleForm,"id",data.id);
this.$set(this.ruleForm,"userName",data.name);
this.$set(this.ruleForm,"password",data.password);
this.$set(this.ruleForm,"permission",data.permission);
this.$set(this.ruleForm,"tel",data.tel);
}
},
mounted(){
// this.$bus.$off("sendUserInfoToUpdateUser");
// this.$bus.$on("sendUserInfoToUpdateUser",(data)=>{
// this.$bus.data=data;
// });
this.getUserInfoByRoute();
// const data=this.$bus.data;
// this.ruleForm=data;
// this.ruleForm.userName=data.name;
},
9、外部引入文件发生变化时Vue需要重新启动,不然不生效;
10、下载文件出错,发现是XLSX包的导入问题,应当由import XLSX from 'xlsx'
改成import * as XLSX from 'xlsx'
;
11、查询对象中是否存在某个键:object.hasOwnProperty("xxx")
;
12、ES6中若要将变量作为对象的键名则需要加[key];
13、el-autocomplete支持显示的数据格式必须为[{value:xxx},...]
;
14、监视属性联动解决问题:
-
情景:A属性改动会影响B和C属性,B属性改动会影响C属性,即A–>B–>C。现想将C清空而不影响到AB监视触发;
-
解决:AB监视属性中可以通过判断C是否为空进而进入逻辑;
15、el-form中的校验规则必须所有分支都要有callback,否则会导致提交表单时validate进不去的问题;