Vue+Nodejs项目中碰到的一些问题_vue+node.js出现的问题

Vue+Nodejs项目中碰到的一些问题

1、数据进行CRUD后刷新页面的方法：

1. 强制刷新：this.$forceUpdate();；
2. 使用window.reload()或者router.go(0)，但会使整个浏览器进行重载，页面闪烁；
3. 重新调用接口，但性能较差，代码冗长；
4. 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在需要刷新的页面内注入inject：

handleDelete(row){
    const flag=confirm("确认删除该用户？");
    if(flag){
        deleteUser(row.id).then(ret=>{
        	alert("删除成功！");
        	this.reload();
        }).catch(err=>{
        	console.log(err);
    	})
    }
},
1
2
3
4
5
6
7
8
9
10
11

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"},
	]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

外部校验：

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};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

6、组件间通信bus总线的off写法：不一定跟on放在一起，必须设定在接收数据组件之后销毁才行，否则发送方发送的数据还未等接收方接收总线事件就被销毁了；

7、修改el-input框中字体样式需要找到elui根文件的form样式进行修改并且去掉style中的scoped样式：

.elFormItem .el-form-item__label{
	color: #ffffff;
}
1
2
3

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;
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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进不去的问题；