前端小工具方法（一）

前端小工具方法

本文是本人敲代码时，遇到的一些问题，然后写出的一些工具类。用于记录与学习。

该文有的方法是：简单封装element ui的消息、简单封装Axios、洗掉空值、 判断手机号与邮箱、清空obj的值、判断page是否为空，为空赋初始值、添加单引号、判断空值、检查是否为整数

简单封装element ui的消息

在确保安装好Element ui的情况下，导入包，做成全局js且注册好，到时候引用该js即可使用。

import ElementUI from 'element-ui'
//返回成功message提示消息
export async function messageSuccess(msg=""){
    ElementUI.Message({
        message: msg,
        type: 'success'
    });
}
//返回失败message提示信息
export async function messageFail(msg=""){
    ElementUI.Message({
        message: msg,
        type: 'success'
    });
}
//通知
export async function notifyDefaultPosition(title="",msg=""){
    ElementUI.Notification({
        title: title,
        message: msg,
    });
}

简单封装Axios

//封装这个axios，Get和Post方法
import axios from 'axios'

//params 默认参数是{}
export const myPost = (url,params={})=>{
    return new Promise((resolve, reject) => {
        axios({
            method: "Post",
            headers: {
                "Content-Type": "application/json",
            },
            url: url,
            data:params
        })
            .then((res) => {
                resolve(res.data);
            })
            .catch((err) => {
                reject(err.data);
            });
    });
}

//url
export  const myGet = (url)=>{
    return new Promise((resolve, reject) => {
        axios({
            method: "Get",
            headers: {
                "Content-Type": "application/json",
            },
            url: url,
        })
            .then((res) => {
                resolve(res.data);
            })
            .catch((err) => {
                reject(err.data);
            });
    });
}

在其他地方在封装一次

//获取所有course
import {myGet,myPost} from "@/api/xxx/myAxios/wrapAxios"
export async function getOneXXX(url,params={}){
    let objectPageList = await myPost(url,params);
    return objectPageList;
}
export async function deleteXXX(url,params={}){
    let objectPageList = await myPost(url,params);
    return objectPageList;
}
//...增删改查

封装方法

洗掉空值

//清洗obj对象值，可嵌套清洗，洗掉空数据的对象
//清空obj最后一个对象是空 就删除该对象,利用递归去遍历其中
export async function clearObjListNullValue (obj) {
    for (let i = 0; i < obj.length; i++) {
        Object.keys(obj[i]).forEach(key => {
            if (typeof obj[i][key] == 'object') {
                if(obj[i][key].length>0){
                    clearObjListNullValue(obj[i][key])
                }
                if(JSON.stringify(obj[i][key]) == "[]" ){
                    Reflect.deleteProperty(obj[i], key);
                }
            }
        });
    }
}

判断手机号与邮箱

//正则表达判断手机号和邮箱
export function validatePhoneAndEmail (phone, email){
    let phoneFlag=0,emailFlag=0
// 手机号正则表达式
    const phoneRegex = /^1[3-9]\d{9}$/;
// 邮箱正则表达式
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    let isValidPhone = phoneRegex.test(phone);
    let isValidEmail = emailRegex.test(email);

    if(!isValidPhone){
        messageFail("电话不符合规范")
        phoneFlag = 1
    }
    if(!isValidEmail){
        messageFail("邮箱不符合规范")
        emailFlag = 1
    }

    console.log(`手机号验证结果: ${isValidPhone ? '有效' : '无效'}`);
    console.log(`邮箱验证结果: ${isValidEmail ? '有效' : '无效'}`);
    return phoneFlag,emailFlag


}

清空obj的值

//清空obj值
export async function removeObjNullValue (obj) {
        Object.keys(obj).forEach(key => {
            if (typeof obj[key] == 'object') {
                if(obj[key].length>0){
                    removeObjNullValue(obj[key])
                }
               if(obj[key] === ""){
                   Reflect.deleteProperty(obj, key);
               }
            }
            if(obj[key] === ""){
                console.log(key, obj[key],typeof obj[key])
                Reflect.deleteProperty(obj, key);
            }
            if(obj[key] == "''"){
                Reflect.deleteProperty(obj, key);
            }
        });

}

判断page是否为空，为空赋初始值

export function checkPageValue (obj) {
    for (let objKey in obj) {
        if(objKey!=="likeMethod" && objKey!=="pageSizes"){
            if(obj[objKey] === "" || obj[objKey] === null || obj[objKey]===undefined){
               if(objKey == "currentPage"){
                   obj[objKey]=1
               }
                if(objKey == "sizePage"){
                    obj[objKey]=5
                }
                if(objKey == "pageTotal"){
                    obj[objKey]=5
                }
            }
        }
        if(objKey =="pageSizes"){
            obj[objKey] = [5, 8, 10]
        }
    }
}

添加单引号

这个fastjson解析前端数据时，value值不会加单引号以及默认是=号比如key=xxx，所以经常会导致无法解析json，下边方法是解决该单引号的问题的。

<!--		fastJson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>

export function addQuotesIfNoQuotes(obj) {
    const newObj = {}; // 创建一个新的对象来存放处理后的结果
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) { // 确保只处理对象自身的属性，而非继承的属性
            const value = obj[key];
            if (typeof value === 'string' && !value.includes("'")) { // 检查值是否为字符串且不包含单引号
                newObj[key] = `'${value}'`; // 在字符串值的两边添加单引号
            } else {
                newObj[key] = value; // 如果值不是字符串或已包含单引号，则直接赋值
            }
        }
    }
    return newObj; // 返回处理后的新对象
}

判断空值

//判断空值
export function hasEmptyValue(obj) {
    // 判断一个值是否为空
    function isEmpty(value) {
        return value === null ||
            value === undefined ||
            value === "" ||
            (Array.isArray(value) && value.length === 0) ||
            (typeof value === 'object' && Object.keys(value).length === 0);
    }

    // 递归检查对象的属性
    function checkObject(obj) {
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                const value = obj[key];
                if (isEmpty(value)) {
                    console.log(key,"===========>",obj[key])
                    return true; // 发现空值，返回true
                } else if (typeof value === 'object' && value !== null) {
                    // 如果属性值是一个对象，递归检查它
                    if (checkObject(value)) {
                        return true;
                    }
                }
            }
        }
        return false; // 没有发现空值，返回false
    }

    return checkObject(obj);
}

检查值是否为整数

export function isNumber(value) {
    // 使用正则表达式检查是否为数字（包括整数和浮点数）
    const regex = /^\d+(\.\d+)?$/;
    return regex.test(String(value));
}

大概使用思路

//上边代码....
import {messageSuccess} from "@/api/globalApi";
import {
  getOneXXX,
} from "@/api/xxxx/xxxxModuleApi";
export default {
  name: 'XXXModule',
	data() {
	    return {
	    	object:{}
	    }
	},
	//下边代码....
	method:{
			sendMsg(){
			 let url = "localhost:8080/xxx/xxx";
				 var myPromise = getOneXXX(url,
				     {
				       object:this.object
				     }
				 );
				 myPromise.then(res=>{
				   console.log(res)
				   messageSuccess("成功")
				 })
			}
		
	 }
 }