Giters

CuityMiko / 2021

记录2021,每天Coding工作中，生活中，读到，看到，听到的内容

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

2021

本年度重点计划：通用页面配置化搭建、可视化页面研究、后台配置页面数据（Vue 和 React）

十月份

10 月 15日

10 月 14 日

10 月 13 日

10 月 9 日

10 月 8 日

10 月 2 日

10 月 1 日

九月份

9 月 29 日

9 月 28 日

9 月 27 日

9 月 26 日

9 月 24 日

9 月 22 日

9 月 21 日

9 月 18 日

9 月 11 日

9 月 9 日

9 月 4 日

9 月 3 日

9 月 1 日

八月份

8 月 28 日

8 月 26 日

8 月 18 日

8 月 14 日

8 月 9 日

8 月 8 日

8 月 7 日

8 月 6 日

  • 230 shell 脚本 while
  • 229 前端项目编译的时候发生，warning [mini-css-extract-plugin] warning Conflicting order
    • vuejs/vue-cli#3771
    • vue.config.js 中设置 css 
      // vue.config.js
module.exports = {
  css: {
    extract: { ignoreOrder: true },
  },
};

8 月 5 日

七月份

7 月 30 日

7 月 28 日

7 月 23 日

7 月 22 日

7 月 21 日

7 月 20 日

7 月 19 日

7 月 18 日

7 月 17 日

7 月 14 日

7 月 7 日

7 月 6 日

7 月 3 日

7 月 2 日

7 月 1 日

六月份

6 月 30 日

  • 200 vue cesium

  • 199 PC 端自适应设置屏幕样式

          @media (min-width: 1024px){
      body{font-size: 18px}
      } /*>=1024的设备*/

      @media (min-width: 1100px) {
      body{font-size: 20px}
      } /*>=1100的设备*/
      @media (min-width: 1280px) {
      body{font-size: 22px;}
      } /*>=1280的设备*/

      @media (min-width: 1366px) {

      body{font-size: 24px;}
      }

      @media (min-width: 1440px) {
      body{font-size: 25px !important;}
      }

      @media (min-width: 1680px) {
      body{font-size: 28px;}
      }
      @media (min-width: 1920px) {
      body{font-size: 33px;}
      }

6 月 29 日

  • 198 vue 组件中的 key 可以刷新数据
  • 也可以通过子组件中的 watch 监听 num 变化进行处理数据

6 月 28 日

6 月 26 日

6 月 25 日

6 月 23 日

6 月 22 日

6 月 21 日

  • 190 public 下的 js 文件通过 import 导入后一样会将文件打包进去，不能通过配置文件读取
  • 189 cesium 中文网

6 月 20 日

6 月 19 日

6 月 15 日

  • 185 vite2 vue3 作为乾坤的子应用
  • 184 获取随机数字并且不等于上一次的数值 
    // 获取随机数
// Math.random 生成0-1之间的随机数字
const getRndInteger = (max) => {
  const tempNum = Math.floor(Math.random() * max);
  console.log(`当前值：${tempNum},历史值：${window.randomNum}`);
  if (window.randomNum === tempNum) {
    console.log("再调用一次方法");
    getRndInteger(max);
  } else {
    window.randomNum = tempNum;
    // console.log('返回当前值',tempNum)
    // return tempNum;
  }
};
  • 183 数组随机排序 https://www.cnblogs.com/7qin/p/9710034.html 
    function shuffle(arr) {
  let i = arr.length;
  while (i) {
    let j = Math.floor(Math.random() * i--); //5555
    [arr[j], arr[i]] = [arr[i], arr[j]];
  }
}

6 月 11 日

6 月 10 日

6 月 4 日

6 月 3 日

6 月 2 日

  • 276 vite2 配置接口代理 
     // 本地运行配置，及反向代理配置
server: {
  port: 9900,
  cors: true, // 默认启用并允许任何源
  open: true, // 在服务器启动时自动在浏览器中打开应用程序
  //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
  proxy: {
    '/infra': {
      target: 'http://139.9.184.171:10088',   //代理接口
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/infra/, '')
    }
  }
}

6 月 1 日

五月份

5 月 31 日

5 月 28 日

5 月 26 日

  • 270 redis 库
  • 269 vscode 设置默认的终端
    • setting.json 文件中设置 "terminal.integrated.shell.windows": "E:/Program Files/Git/bin/bash.exe",
  • 268 File differs from already included file only in casing: correct casing but relative path

5 月 25 日

5 月 24 日

5 月 22 日

  • 264 yarn build 打包时，会有一系列的警告
  // 警告信息如下
  chunk chunk-8bbe4a0e [mini-css-extract-plugin]
  Conflicting order. Following module has been added:
  * css ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/imgPreview.vue?vue&type=style&index=0&id=41ed99a7&lang=scss&scoped=true&
  despite it was not able to fulfill desired ordering with these modules:
  * css ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/videoPreview.vue?vue&type=style&index=0&id=6fbe4342&lang=scss&scoped=true&
    - couldn't fulfill desired order of chunk group(s)
    - while fulfilling desired order of chunk group(s) , , , ,

// 目前可以在 vue.config.js 中设置去除警告信息

    // 设置忽略警告【mini-css-extract-plugin】 order
      extract: process.env.NODE_ENV === 'production' ? {
        ignoreOrder: true,
      } : false,

5 月 20 日

5 月 19 日

5 月 18 日

5 月 15 日

5 月 14 日

5 月 13 日

5 月 12 日

  • 249 webpack 通过 less-loader 设置 css 前缀

      {
    loader: 'less-loader',
    options: {
      modifyVars: {
        '@ant-prefix': 'yourPrefix',
      },
      javascriptEnabled: true,
    },
  }

5 月 11 日

5 月 9 日

  • 247 css 样式

        // 鼠标悬浮于a标签选择器上的样式变化
    a:hover
    {
        background-color:yellow;
    }

    // 选择器为活动的链接设置的样式
    a:active
    {
        background-color:yellow;
    }

5 月 8 日

  • 246 promise 防抖和节流

  • 245 xgplayer 西瓜视频播放器

  • 244 灰色模式和色弱模式

        // 灰色模式
    .html-grey {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
    }

    // 色弱模式
    .html-weakness {
    filter: invert(80%);
    -webkit-filter: invert(80%);
    -moz-filter: invert(80%);
    -ms-filter: invert(80%);
    -o-filter: invert(80%);
    }

5 月 6 日

5 月 5 日

5 月 1 日

四月份

4 月 29 日

4 月 25 日

4 月 24 日

4 月 22 日

4 月 21 日

4 月 20 日

4 月 19 日

4 月 18 日

4 月 17 日

4 月 16 日

  • 212 vue vite public 下图片路径的问题 
        public 下面的文件路径前要加斜杠 '/'
    参考 -204下webpack打包public路径设置

4 月 15 日

4 月 14 日

4 月 11 日

  • 206 即偶数元素 css 给最后的元素添加样式 
        // 第二个元素，里面换成n就是第n个元素
    div:nth-child(2)
    {
    background:#ff0000;
    }
    // 选中最后一个奇数
    div:nth-child(odd):last-child {
        margin-bottom: 0;
    }
    // 选中最后一个偶数
    div:nth-child(even):last-child {
        margin-bottom: 0;
    }
    // 3的倍数元素的样式，后面的0可以换成m,就是3倍再加m
    p:nth-child(3n+0)
    {
    background:#ff0000;
    }

4 月 10 日

  • 205 vue style 绑定样式

        :style="{backgroundImage: 'url(' + item.url + ')'}"

  • 204 vue cli public

    • 文件夹下面可以放置静态的图片资源和 json 文件
    • 注意在调用的时候不要在路径前面添加"/"
        // 1、axios调用json数据
     this.$axios.get('data/001/family.json').then(res=>{
       console.log('this.$axios.get', res)
     })
    // 2、image路径 前面不要加斜杠了
    bannerData:[
        {imageUrl: 'images/banner/2.jpg'},
        {imageUrl: 'images/banner/1.png'},
        {imageUrl: 'images/banner/3.jpg'}
    ],

4 月 9 日

4 月 8 日

4 月 7 日

  • 196 微信小程序跳转到小程序
  • 195 vue- vnode 
    Vue.mixin({
  beforeRouteLeave: function (to, from, next) {
    console.log(this.$vnode, window);
    if (
      from &&
      from.meta.rank &&
      to.meta.rank &&
      from.meta.rank > to.meta.rank
    ) {
      console.log(this.$vnode, window, "-----------全局beforeRouteLeave");
      if (this.$vnode && this.$vnode.data.keepAlive) {
        if (
          this.$vnode.parent &&
          this.$vnode.parent.componentInstance &&
          this.$vnode.parent.componentInstance.cache
        ) {
          if (this.$vnode.componentOptions) {
            var key =
              this.$vnode.key == null
                ? this.$vnode.componentOptions.Ctor.cid +
                  (this.$vnode.componentOptions.tag
                    ? `::${this.$vnode.componentOptions.tag}`
                    : "")
                : this.$vnode.key;
            var cache = this.$vnode.parent.componentInstance.cache;
            var keys = this.$vnode.parent.componentInstance.keys;
            console.log(cache, "cache-keys");
            if (cache[key]) {
              if (keys.length) {
                var index = keys.indexOf(key);
                if (index > -1) {
                  keys.splice(index, 1);
                }
              }
              delete cache[key];
            }
          }
        }
      }
      this.$destroy();
    }
    next();
  },
});
  • 194 nginx vue 404 not found

4 月 2 日

4 月 1 日

三月份

3 月 31 日

  • 185 富文本框 wangeditor

  • 184 全局监测录入框事件

        // 全局使用 引入init
    import '@/utils/init'

    //init.js文件内容
    // xss防御攻击输入框失去焦点
    document.addEventListener('blur', function(e) {
    if(['input', 'textarea'].includes(e.target.tagName.toLowerCase())) {
        console.log(e, e.target.value, 'e.target.value')
        e.target.value =replaceStr(e.target.value)
        e.focus()
    }
    }, true)
    function replaceStr(a) {
    a = a.replace(/(<br[^>]*>| |\s*)/g, '')
        .replace(/&/g,"")
        .replace(/"/g,"")
        .replace(/'/g,"")
        .replace(/</g,"")
        .replace(/>/g,"");
    return a
    }

    // 可以统一处理传递的 data 参数，加密或者请求头

    instance.interceptors.request.use(
  (request) => {
    const userInfo = localStorage.loginInfo
      ? JSON.parse(localStorage.loginInfo)
      : {};
    request.headers = {
      Authorization: userInfo.token,
      "Content-Type": "application/json",
    };

    if (request.data) {
      request.data = replaceStr(request.data);
    }
    console.log(request, "s---------request");
    return request;
  },
  (error) => Promise.reject(error)
);

3 月 30 日

3 月 28 日

3 月 27 日

3 月 26 日

3 月 25 日

3 月 24 日

3 月 23 日

3 月 19 日

3 月 18 日

  • 170 查看端口占用情况
    • 查看指定端口占用情况 netstat -ano |findstr 5037
    • 通过 pid 查看进行详情 tasklist | findstr pid
    • 然后可以到任务管理器中 结束指定 pid 的任务
  • 169 github 无法打开

3 月 16 日

3 月 15 日

3 月 12 日

3 月 11 日

3 月 10 日

3 月 8 日

3 月 7 日

3 月 6 日

3 月 5 日

3 月 4 日

3 月 1 日

2 月 27 日

二月份

2 月 25 日

2 月 23 日

2 月 21 日

2 月 20 日

2 月 19 日

2 月 18 日

  • 137 新年开工第一天，立下一个 flag，自律、自律、自律

2 月 11 日

  • 136 mac 下 npm install 安装失败
    • sudo 加上权限，主要是没有权限访问

2 月 6 日

2 月 5 日

2 月 4 日

2 月 3 日

2 月 2 日

  • 129 Vue.extend 动态注册子组件
  • 128 go 语言学习网站
  • 127 vscode 搭建 go 开发环境 
      //1、go安装包下载
  https://studygolang.com/dl
  //2、安装成功cmd命令查看版本号
  go version
  //3、设置七牛云代理
  go env -w GO111MODULE=on
  go env -w GOPROXY=https://goproxy.cn,direct
  //4、vscode中下载go扩展插件
  //5、创建hello.go文件
  //6、写入代码后编译运行
  go run helloworld.go
  //7、将go文件打包成wasm
  GOOS=js GOARCH=wasm go build -o test.wasm hello.go
  //8、go打包编译
  go build -o hello.exe hello.go
  //9、vscode中Ctrl+Shift+P 安装go插件 全选进行安装
  https://zhuanlan.zhihu.com/p/320343679

2 月 1 日

一月份

1 月 30 日

1 月 28 日

1 月 27 日

1 月 26 日

1 月 25 日

1 月 22 日

1 月 21 日

1 月 20 日

1 月 19 日

1 月 18 日

  • 81 echarts 地图
    • 设置 echarts div 的宽度和高度
    • 边距可以设置 gird 属性中的{top,left:right,bottom}
    • x 轴和 y 轴，均可设置多个，匹配数据的时候要进行设置 yIndex
    • 柱状图的柱状 可设置颜色
    • 顶部选项 可设置 图标 icon，以及字体颜色等
    • 配置渐变颜色 https://blog.csdn.net/weixin_44897255/article/details/96877562

1 月 16 日

1 月 15 日

1 月 14 日

1 月 13 日

1 月 12 日

      //柱状图颜色随机设置
      //https://www.cnblogs.com/kang543418095/p/5964397.html?utm_source=itdadao&utm_medium=referral
      itemStyle: {
          normal: {
        //这里是重点
              color: function(params) {
                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                  return colorList[params.dataIndex]
              }
          }
      }

1 月 11 日

1 月 9 日

1 月 8 日

1 月 7 日

  • 30 通过 adb.exe 连接机顶盒来查看应用的日志记录

    • 查看 adb 版本 adb version
    • 通过 IP 地址连接机顶盒 adb connect 172.18.0.80:5555
    • 查看应用 apk 列表 adb shell pm list package
    • adb devices 查看连接设备
    • adb kill-server
    • netstat -ano |findstr 5037
    • adb disconnect
    • 链接机顶盒 ----adb connect 172.18.0.239
    • google 浏览器中链接 chrome://inspect/#devices----------edge://inspect/#devices
    • 进入命令 ----adb shell
    • 查看包名列表----- pm -l |grep have
    • 卸载 package ---- pm uninstall cn.haveplus.hoteltv（海屋 apk 可通过遥控卸载）
    • 退出 shell ---- exit
    • 安装 apk ----adb install C:\Users\chill\Desktop\havetv-release.apk
    • 开启 start ----- adb shell am start cn.haveplus.hoteltv

  • 31 版本号如何设置的问题

    avatar

  • 32 常用开发代码函数查询 mac 下 dash，window 下 devDocs

  • 33 elementui table 中的那些基本操作

  • 34 mapBox 地图指引

  • 35 mapBox 空间分析库 truf.js

  • 36 ts 后缀视频播放可通过 mux.js

  • 37 控制台 console 打印日志的开启和关闭

    // 判断配置文件是否开启日志调试 是否输出日志 True 输出 False 不输出
const logDebug = process.env.NODE_ENV !== "production";
console.log = (function (oriLogFunc) {
  return function () {
    if (logDebug) {
      oriLogFunc.apply(this, arguments);
    }
  };
})(console.log);

  • 38 高德地图 3D demo

  • https://developer.amap.com/api/javascript-api/reference/maps-3d

  • 39 vue 前端项目 webpack 打包设置路径的问题，主要是 publicPath

         // vue.config.js中路径设置
     module.exports = {
       lintOnSave: "error",
       publicPath: "./",    // 相对路径，这样可以随意部署任何路径
       outputDir: "../release/ui/",  // 配置打包输出路径
       assetsDir: "static",       // 配置css、js、img等路径
       productionSourceMap: false,
       css: {
         loaderOptions: {
           // global scss variables 传递配置选项到 sass-loader
           scss: {
             prependData: `@import "~@/styles/_variable.scss";`,
           },
         },
       },

  • 40 Python 命令行神器 Click （pip install -U click），pip 在 python 中

  • 41 git 针对 tag 标签设置，tag 是针对所有分支的

    • 所有项目，发布版本到 SIT，都需要打标签，以便追溯版本所对应的代码。如果后面需要改版本拉分支修改，也非常方便；
    // 添加一个tag
git tag -a 3.11.3.001 -m "release 3.11.3.001"
git push origin 3.11.3.001

//删除一个tag
git tag -d 3.11.3.001
git push origin :refs/tags/3.11.3.001

// 查看分支
git tag

// 在某个commit 上打tag  git tag
git tag test_tag c809ddbf83939a89659e51dc2a5fe183af384233    
git push origin test_tag    //!!!本地tag推送到线上

// 根据tag创建分支
https://www.cnblogs.com/senlinyang/p/9455426.html
git branch newbranch 3.11.3.001

// 然后可以切换到分支
git checkout newbranch

// 再通过命令将本地仓库推送到远程仓库
git push origin newbranch

// 创建新的分支
git branch branchname

// 是将远程主机的最新内容拉到本地 ,用户在检查了以后决定是否合并到工作本机分支中。
git fetch
//更多基本操作
//https://www.cnblogs.com/runnerjack/p/9342362.html

  • 42 查看 markdown.md 文件可以使用 Typora

  • 43 web 计时机制 performance 对象

  • 44 window performance 监测时间

  • 45 react color 颜色采集控件

1 月 6 日

1 月 5 日

  • 10 vue keepalive 发现一旦设置某个路由为 true,后续通过动态设置就是无效的后来发现 github 官网也有很多人遇到这个问题

    • vuejs/vue-router#811
      目前通过变通的方式进行解决此问题，凡是要进行缓存的组件页面，开始都将 keepalive 设置为 true，后续通过钩子函数去触发数据列表更新。

  • 11 vue router 官网有时候可以看一下 api，感觉有很多自己是没有用到过的

  • 12 vue elementui radio 在封装为表单控件，且可设置为必填项目，其 label 设置与外部赋值要保持一致的数据类型，而且 required 传入值如果为 undefined 要经过判断，代码如下(截取部分)

    export default {
      props: {
        column: {
          type: [Object],
          default: () => {},
        },
        data: {
          type: Number,
          default: undefined,
        },
      },
      data() {
        return {
          rules: [
            {
              // 加上双？？，防止出现选中后提示请选择"this.column.title"
              required: this.column.required ?? false,
              message: '请选择' + this.column.title,
              trigger: 'change',
            },
          ],
          list: [],
        }
      },
      created() {
        this.getList()
      },
      computed: {
        value: {
          get: function() {
            return this.data
          },
          set: function(val) {
            console.log(val, typeof val, 'this.radioView.val')
            this.$emit('update:data', val)
          },
        },
      },

此为一个子组件，data 会传入值类型要与 this.getList 中设置的 label 值要保持一致(计算属性 value 会去绑定 radio 的 v-model)。

另外一种设置图片的显示方式，不过暂时没找到如何设置宽高和位置，应该可以考虑通过 url 后面进行参数设置（通过特定的转换）

![avatar](https://raw.githubusercontent.com/aehyok/2021/main/image/test.png)

avatar

1 月 4 日

  • 1 vue 中将 v-for 循环组件（通过 v-if 进行展示），方案修改为 component 组件，简化代码
      <div v-for="(item, index) in columnList" :key="index">
            <component
              :is="item.type + 'View'"
              :column="item"
              :data.sync="formData[item.name]"
            />
            /*
            <!--文本框Input-->
            <!-- <TextView
              :column="item"
              :data.sync="formData[item.name]"
              v-if="item.type.toLowerCase() === 'text'"
            /> -->
            <!--文本框Input-->
            <!-- <TextAreaView
              :column="item"
              :data.sync="formData[item.name]"
              v-if="item.type.toLowerCase() === 'textarea'"
            /> -->
            <!--数值框Number-->
            <!-- <NumberView
              :column="item"
              :data.sync="formData[item.name]"
              v-if="item.type.toLowerCase() === 'number'"
            /> -->
            */

About

记录2021,每天Coding工作中，生活中，读到，看到，听到的内容

Languages

Language:Shell 87.4%Language:Batchfile 12.6%