vue实现动态URL

小帅学编程

已于 2024-06-19 18:19:19 修改

阅读量1k

点赞数

分类专栏：代码场景文章标签： vue.js 前端 javascript

于 2023-07-05 15:59:13 首次发布

本文链接：https://blog.csdn.net/m0_46486963/article/details/131557745

版权

代码场景专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章介绍了在项目中利用Vuex进行动态baseURL管理的方法，强调了前端校验URL格式的重要性。通过设置拦截器重写baseURL，并提供了一个前端校验函数validateURL，确保输入的URL符合规范，避免错误。

摘要由CSDN通过智能技术生成

最近在项目上要用到动态baseURL,用的是vuex存储，具体实现如下

1.拦截器中重写baseURL

在这里插入图片描述
但是需要注意的是这个url必须符合URL格式，所以前端校验是必须的

2.前端校验

const validateUrl = (rule, value, callback) => {
	 if (isBlank(value)) {
	    callback(new Error('地址不能为空!'))
	  } else if (!validateURL(value)) {
	    callback(new Error('请输入正确的地址格式!'))
	  } else {
	    callback()
	  }
}

export function isBlank(str) {
  return str == null || str.trim().length === 0
}

export function validateURL(textval) {
  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return urlregex.test(textval)
}