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

关注

原创 2022-07-04 16:10:55 489 阅读 AI 写同款· GEO 优化 ›

Vue SPA + Nodejs项目实战 Vue SPA + Nodejs项目实战文章链接：http://blog.csdn.net/i348018533/article/details/73605176本文主要阐述的是使用了vue spa单页应用的后台管理系统配合nodejs接口代理，并使用webpack打包编译的项目架构分享。面向对象是有一定前端开发基础对vue nodejs webpack有一定认识的开发。Vue简介介绍自底向上阅读详情

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;
	},