1. 确定基础框架

项目最终要以 搜索来源为主要来源设计基础框架,所以使用前端渲染的方式就不适合此项目,由于自己是前端开发人员,对于php,java不是很熟悉,所以就得找其它方式,目前比较好的方式是next.js与nuxt.js两者差不多,由于自己对于react比较熟悉,便采用了next.js.  后面在使用这个框架的时候,发现知乎也是用这个框架的,知乎的百度收录非常良好,这个对于后面网站被百度大量收录也有一定的保障..

2.确定前端主色调,前端UI参考

由于自己也非专业出身,这一块并没有那么专业,,所以只能随便找一个网站模仿一下即可,我自己看的网站是https://www.quanjing.com/   这个有做适配,由于前端只有展示,没有过多的复杂逻辑,所以适配h5也是需要的,色调便参考这个网站.搜索功能也是参考这个网站,而下面的内容则是

3.爬取更多gif数据

在爬取一个网站上的数据的时间,发现上面的gif图片大小太大了,2m左右的大小实在不能接受,于是就在爬取该网站的时候做了压缩图片,没想到这里遇上了一个难题,一般的图片像jpg,png,jpeg都是不会动的图片,但是git是由很多帧组成的图片,要实现压缩得麻烦很多,最开始的时候使用降色以减少图片的大小,但是这种效果并不好..

4.给网站添加token检验

为了防止自己的网站被攻击,得加一个token检验才行..token检验用户某个时间段内的访问量,如果是超过一定数据,就把这个用户给禁了,防止其它用户无法正常访问.

碰到的问题

关于压缩图片

使用的是目前比较专业的图片处理库—graphicsMagick,ImageMagick,ghostscript 这些安装后方可在代码中实现压缩gif,之前也试了很多的其它库 像images,compress-image 都不能实现压缩gif.  安装了上面说的三个库后,还需要另外写一些逻辑来实现压缩gif,也是参考了其它大佬的说明,明白了要压缩gif图片,要从图片颜色质量,gif图片帧数,裁剪图片大小等方面去实现

ENOENT 翻译了一下并没有这个单词,那肯定就是缩写了,于是就百度了一下,Error No Entry 的缩写, 意思是:没有这样的目录条目….

关于安装gifsicle碰到的问题.

这个包在安装编译的时候每次都会报错,导致后面在使用的时候会报ENOENT的错误,具体"errno":"ENOENT","code":"ENOENT","syscall":"spawn /*/node_modules/gifsicle/vendor/gifsicle","path”:”/*/node_modules/gifsicle/vendor/gifsicle"   每次安装都无法编译成功,导致这个node_modules下面没有vendor文件夹,编译成功后会有一个脚本工具,但是如果按照npm install的方式是没的,只好跑去github上搜索答案了,最后在官网的github仓库找到了编译后的文件,复制进去后便可以了,这也是一个小坑.

5.网站框架初具雏形

由于自己担任了各种职务,所以有时候得边写代码边参考,前期网站可能并不好看,只能先把大体的框架写好先,把内容填充上去,后面再一步一步做好页面

const query = Taro.createSelectorQuery() // 创建类似dom获取节点的方式
query.select('.gj-img').boundingClientRect() // 获取元素位置 类似dom获取元素位置信息方式
query.exec(function (res) {
  console.log(res)
}) // 执行

但是你在使用后却仍无法获取相关的信息,
返回了 [null]

setTimeout(()=>{
  const query = Taro.createSelectorQuery()
  query.select('.gj-img').boundingClientRect()
  query.exec(function (res) {
    console.log(res)
  })
},0)

然后就能正常获取元素信息了.


总结:
    之所以想到是这个原因,是因为后面在执行滚动的时候,这个元素是能够正常返回位置信息的,这种类似的问题碰到过很多次了,记录一下..

import React, {useEffect, useState} from 'react';
import { Button } from 'antd';

let i = 0;
export default () => {
  const [data,setData] = useState<number[]>([]);

  useEffect(()=>{
    console.log(data) // 添加副作用后 这里的data便是空数组了
  },[data])
  return (
    <div className="indexlayout-main-conent">
      {
        data.map(item =>{
          return (
            <div>{item}</div>
          )
        })
      }
      <Button onClick={()=>{
        i++;
        data.push(i);
        setData([...data])
      }}>添加一个...</Button>
      <Button onClick={()=>{
        console.log(data);
        setData([]);
        setTimeout(()=>{
          console.log(data); // 此处引用的data依然还是老的data
        },2000)
      }}>清空</Button>
    </div>
  );
};

const handleClearLog = () => {
  lockReconnect = true;
  data = []; // 这里必须先重置了 在setTimeout的域中是无法拿到空的data的
  websocket.close();
  clearInterval(websocketTime);
  setData([]);
  setTimeout(() => {
    initWS(); // 重新连接websocket
    websocketTime = setInterval(() => {
      if (websocket.readyState !== 1) {
        initWS()
      }
    }, 5000)
  }, 1000)
}

前言:

项目最终要以 搜索来源为主要来源设计基础框架,所以使用前端渲染的方式就不适合此项目,由于自己是前端开发人员,对于php,java不是很熟悉,所以就得找其它方式,目前比较好的方式是next.js与nuxt.js两者差不多,由于自己对于react比较熟悉,便采用了next.js.  后面在使用这个框架的时候,发现知乎也是用这个框架的,知乎的百度收录非常良好,这个对于后面网站被百度大量收录也有一定的保障..

2.确定前端主色调,前端UI参考

由于自己也非专业出身,这一块并没有那么专业,,所以只能随便找一个网站模仿一下即可,我自己看的网站是https://www.quanjing.com/   这个有做适配,由于前端只有展示,没有过多的复杂逻辑,所以适配h5也是需要的,色调便参考这个网站.搜索功能也是参考这个网站,而下面的内容则是

3.爬取更多gif数据

在爬取一个网站上的数据的时间,发现上面的gif图片大小太大了,2m左右的大小实在不能接受,于是就在爬取该网站的时候做了压缩图片,没想到这里遇上了一个难题,一般的图片像jpg,png,jpeg都是不会动的图片,但是git是由很多帧组成的图片,要实现压缩得麻烦很多,最开始的时候使用降色以减少图片的大小,但是这种效果并不好..

4.给网站添加token检验

为了防止自己的网站被攻击,得加一个token检验才行..token检验用户某个时间段内的访问量,如果是超过一定数据,就把这个用户给禁了,防止其它用户无法正常访问.

三:碰到的问题

关于压缩图片

使用的是目前比较专业的图片处理库—graphicsMagick,ImageMagick,ghostscript 这些安装后方可在代码中实现压缩gif,之前也试了很多的其它库 像images,compress-image 都不能实现压缩gif.  安装了上面说的三个库后,还需要另外写一些逻辑来实现压缩gif,也是参考了其它大佬的说明,明白了要压缩gif图片,要从图片颜色质量,gif图片帧数,裁剪图片大小等方面去实现

ENOENT

翻译了一下并没有这个单词,那肯定就是缩写了,于是就百度了一下,Error No Entry 的缩写, 意思是:没有这样的目录条目…

import COS from 'cos-wx-sdk-v5';
import {request} from './request';

const getAuthorization = () => {
  return (options, callback) => {
    request({
      url:'getSecret',
      header:{
        'content-type': 'application/json'
      },
      method:'get'
    }).then(res => {
      console.log(res);
      const credentials = res.data.credentials || {};
      callback({
        TmpSecretId: credentials.tmpSecretId,
        TmpSecretKey: credentials.tmpSecretKey,
        XCosSecurityToken: credentials.sessionToken,
        ExpiredTime: res.data.expiredTime
      });
    })
  }
};

const cos = () => {
  return new COS({
    getAuthorization: getAuthorization()
  });
};

export { cos };

第二步:上传

cos().postObject({
  Bucket: Bucket,
  Region: Region,
  Key: `/inventory/${filename}`,
  FilePath: filePath

}, function (err, data) {
  console.log(data);
});

这里需要用到postObject 而不是putObject了,所以这里有一些变化,其它都差不多,但是在使用这个方式的时候也踩了一个坑,由于后端没有设置postObject的权限,
导致我这边一直报没有权限的错误.即 AccessDenied

这个问题需要后端配置来修改,在后端请求腾讯云cos的时候把该权限带上,

1. 这一年多的时间,把服务器的知识熟悉了,因为上线了一个真实node服务项目,也很感激领导的信任,能给我这样的机会去实践node中间层服务,以前虽然有写过node服务,但是都是仅限于自己的项目,并没有真实的项目经验.通过这次的经验,也让我清楚的了解后端开发的链路,原来和自己开发博客系统并无多少差别.
2. 上线了一版数据可视化大屏,也算是自己的新领域的突破吧,毕竟以前没有真正玩过这个领域,以前虽然有接触过,但都没有实际的项目.
3. 记得刚进公司接手的第一个项目,项目极大,1000+的路由地址,然后我看到这1000+的路由全部分布在一个js里,当初接手这个项目的时候为了改一个路由要花好几分钟去找修改的地点,这让我比较奔溃,后面也经过我的改造,按模块去拆分了,也为这个项目添加了大量的公用组件.为什么会出现这种情况,也许和我们公司的管理有关系,2个外包,大部分的工作量得让外包来写,外包也许遵守的原则的尽快上线,他们考虑的利益是如果通过这个项目让我多学一些知识,后面外包走后,这一堆事就交给了我,我也不得不去看1000+的代码(不仅是路由1000+,实际业务也有好多的1000+行的代码),后面修改起来也是非常费劲的事,想去整改,但又无能为力.

1. <style scoped>
     .self-repair{
       margin-top: 16px;
     }
   </style>

.self-repair>>> .van-button__text{
    color: red;
  }
.self-repair/deep/ .van-button__text{

    color: red;
  }

<style module>
  .selfRepair{
    margin-top: 16px;

  }
</style>

<div :class="$style.selfRepair">
  提交
</div>