记录咸鱼的生活----前端问题汇总

最新推荐文章于 2024-11-02 15:48:17 发布

Look_这有只小仙女

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量458

点赞数

分类专栏：总结文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/qq_35389417/article/details/122214908

版权

总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

汇总一些最近工作中遇到的前端技巧,希望可以帮助到大家,也希望可以帮助到知识不进脑的我😭
因为我是做大屏展示的,虽然前后端都做,但是人手不够的时候我还是做前端多一些
环境: mac idea react+ant Design 4.x

获取当前屏幕的分辨率(长和宽)
因为我的项目需要我根据不同的分辨率比例跳转到不同的网页中,所以需要获取当前屏幕的分辨率

window.screen.width   
window.screen.height

设置scale
因为项目需要一个32:9和一个16:9的效果,如果不设置scale直接显示就很难看
首先在需要设置scale的页面加上:

  state = {
    visualScale: 0,
  };
  
  setScale = () => {
    let visualScale;
    //3200和900 是32:9的具体长和宽,可以替换为你需要的长和宽
    let scaleX = window.innerWidth / 3200;  
    let scaleY = window.innerHeight / 900;
    if (scaleY > scaleX) {
      visualScale = scaleX;
    } else {
      visualScale = scaleY;
    }
    this.setState({
      visualScale: visualScale,
    });
  };
  componentDidMount() {
    window.addEventListener('resize', this.setScale);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.setScale);
  }
  
  render() {
    return <div className={CSS.layout}>
      <div className={CSS.html}
           style={{transform: 'scale(' + (this.state.visualScale) + ')'}}> //不要忘记加这一句哦
      	......................
      </div>
    </div>
  }

设置登录时间 ,有效时间30分钟,30分钟后重新登录
主要用的就是给cooike一个有效时间,然后每次刷新都要去获取cookie,如果cookie过期被删除,那么就会回到登录页面,而且通过链接直接跳转到其他页面的时候需要判断一下cookie是否过期,如果过期那么直接跳转到登录页面

// 首先需要下载react-cookie包
//npm install react-cookies --save //cnpm也可以
//登录页面
import cookie from "react-cookies";

  formSubmit = (e) => {
    e.preventDefault();
    const {getFieldsValue} = this.formRef.current;
    const fromData = getFieldsValue();
    if (fromData.username === URL.acount && fromData.password === URL.password)   //判断账号密码是否匹配
    {
        let millisecond = new Date().getTime();
        let cookieTime = new Date(millisecond + 30 * 60 * 1000); //设置过期时间 30min
        cookie.save("userInfo", URL.acount, {expires: cookieTime}); //保存cookie
          history.push("/");
    } else {
      message.error('密码错误');
    }
  };
  loginOut = () => {
      cookie.remove('userInfo');
      history.push("/login");
  }

//其他页面
  componentDidMount() {
    let time = cookie.load('userInfo')
    if (time === undefined) {
      history.push("/login");
    }
  }