【开发日记】中台前端（11.23~12.13）

isaaak

于 2022-12-14 10:06:49 发布

阅读量888

点赞数

分类专栏：开发日记文章标签： reactjs react 前端 less java

本文链接：https://blog.csdn.net/qq_43283474/article/details/128297038

版权

开发日记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端采用react框架（函数式组件）+ react-router路由+mobx全局状态管理+axios请求库+antd UI库

一. antd使用注意项

当我使用defaultValue在输入框内显示默认值时，发现显示的值会随之其他组件的渲染失效。解决方法：
a. 将input的value值设置为Math.random()

<Input key={Math.random()} defaultValue={record.ts_from}/>

b.用placeholder替换，更改显示样式

<Input placeholder={record.student_name}  />

.ant-input,.ant-input-number-input{
    &::placeholder {
        color: rgb(124, 124, 124) !important;
    }
}

body出现8px神秘边距，解决方法：

body {
    margin: 0 ;
    padding: 0 ;
}

设置中文（在main中包裹即可）locale={locale}

import 'dayjs/locale/zh-cn';
import locale from 'antd/locale/zh_CN';

ReactDOM.createRoot(document.getElementById('root')).render(
  <ConfigProvider  locale={locale}>
    <Provider store={stores}>
      <BrowserRouter>
        <Suspense fallback={<GlobalSpan />} >
          <Routes>
            {renderRoute(routerBase)}
          </Routes>
        </Suspense>
      </BrowserRouter>
      {/* <PageFooter /> */}
    </Provider>
  </ConfigProvider>
)

modal弹出层自适应高度

.ant-modal-body {
    height: auto;
}

透明度：opacity

二、自用工具类

获取年份季节

export function timeTransSeason(data){
    let dateString = new Date(data)
    var year = dateString.getFullYear()
    var month = dateString.getMonth() + 1;//getMonth返回0-11
    if(month >=2 && month <=4){
    	return year+"春季";
    }else if(month >=5 && month <=7){
        return year+"夏季";
    }else if(month >=8 && month <=10){
        return year+"秋季";
    }else{
        return year+"冬季";
    }    
}

时间转化

//时间转化
function timeTrans(time) {
    if (time === " ") {
        return " "
    }
    let dateString = new Date(time)
    // 注意js里面的getMonth是从0开始的
    let FormattedDateTime = dateString.getFullYear() + '-' + (dateString.getMonth() + 1) + '-' + dateString.getDate();
    return FormattedDateTime;
}

判空

//判空
function isNull(data) {
    if (typeof data === 'undefined' || data === '暂无') {
        return " "
    } else {
        return data
    }
}

数据校验：身份证，手机，性别

/**
 * 身份证验证
 * 
 * 参数
 *  完整的身份证字符串
 * 返回值
 *   如果格式正确，返回 性别
 *   错误返回 null
 */
export const verifyIdCard = (cardValue) => {
    let sId = cardValue;
    if (sId.length == 15) {
        if (!/^\d{14}(\d|x)$/i.test(sId)) {
            console.log("你输入的身份证长度或格式错误")
            return false;
        } else {
            sId = sId.substr(0, 6) + '19' + sId.substr(6, 9);
            sId += getVCode(sId);
        }
    }
    function getVCode(CardNo17) {
        let Wi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1);
        let Ai = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
        let cardNoSum = 0;
        for (let i = 0; i < CardNo17.length; i++)cardNoSum += CardNo17.charAt(i) * Wi[i];
        let seq = cardNoSum % 11;
        return Ai[seq];
    }
    let aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" };

    let iSum = 0;
    if (!/^\d{17}(\d|x)$/i.test(sId)) {
        return false;
    }
    sId = sId.replace(/x$/i, "a");
    if (aCity[parseInt(sId.substr(0, 2))] == null) {
        console.log("你的身份证地区非法")
        return false;
    }
    let sBirthday = sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2));
    let d = new Date(sBirthday.replace(/-/g, "/"));
    if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) {
        console.log("身份证上的出生日期非法")
        return false;
    }
    for (let i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11);
    if (iSum % 11 != 1) {
        console.log("你输入的身份证号非法")
        return false;
    }
    return true;

}

/**
 * 手机号验证
 * 参数
 *  完整的手机号字符串
 * 返回值
 *     如果格式正确返回 True
 *     错误 返回 false
 */
export const verifyPhoneNumber = (phoneValue) => {
    // 判断是否为手机号

    let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (!myreg.test(phoneValue)) {
        return false;
    } else {
        return true;
    }
}

/**
 * 性别校验
 */
export const setSexValue = (student_idcard) => {
    let genderCode = student_idcard.charAt(16)
    if (genderCode && !isNaN(genderCode)) {
        // 性别代码男奇女偶
        if (parseInt(genderCode) % 2 == 0) {
            return '女'
        }
        else {
            return '男'
        }
    }
}

三、react-cookies

//引入
import cookie from 'react-cookies'

//存
let inFifteenMinutes = new Date(new Date().getTime() + 24 * 60 * 60 * 1000); //有效期1天
cookies.save('user_message', payload, {expires: inFifteenMinutes})
//取
cookies.load("user_message")
//删除
cookie.remove("user_message")

四、localStorage

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
 
localStorage.getItem("key");//获取名称为“key”的值
 
localStorage.removeItem("key");//删除名称为“key”的信息。
 
localStorage.clear();//清空localStorage中所有信息

五、react中style的写法

 <Button
      type='primary'
      style={{ marginLeft: 'auto' }}
      onClick={refreshList}>刷新</Button>

六、excel导出

导出excel时报错：通过修复或删除不可读取的内容
原因：参数类型错误，n:数字；s:字符串

sheet1['A' + row] = { t: 'n', v: index + 1, w: (index + 1).toString() }
sheet1['B' + row] = { t: 'n', v: "11111", w: "11111" }
sheet1['C' + row] = { t: 's', v: "aaa", w: "aaa" }
sheet1['D' + row] = { t: 's', v: "111111111111111111111111111", w: "111111111111111111111111111" }

七、数组参数是否一致

 let list = []
 selected.map((item, key) => {
     list.push(item.参数);
 })
 let isListRepeat = Array.from(new Set(list)) //去重
 if (isListRepeat.length !== 1) {
     notify.warning("存在多种审核权限");
 } else {
	 console.log("ok")
 }

八、一些后端

字符串切割substring

oldCourseString.substring(oldCourseString.indexOf(course_id)+7,oldCourseString.indexOf(course_id)+8)

字符串转int

Integer.parseInt( );

LocalDateTime比较时间大小 isAfter

for(int i=1;i<time_list.size();i++){
    // 将最后一个依次和前面的进行比较
    int week1 = time_list.get(i-1).getWeek();
    int week2= time_list.get(time_list.size() - 1).getWeek();
    LocalDateTime f1 = time_list.get(i-1).getTs_from();
    LocalDateTime f2= time_list.get(time_list.size() - 1).getTs_from();
    LocalDateTime e1 = time_list.get(i-1).getTs_end();
    LocalDateTime e2= time_list.get(time_list.size() - 1).getTs_end();
    if(week1 == week2){
        if(e1.equals(f2)||f2.isAfter(e1)||f1.equals(e2)||f1.isAfter(e2)){
            continue;
        }
        TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();
        return CodeMsg.errorJson(1,"课程报名时间冲突");
    }
    continue;
}