最新博文

• 【置顶】 TCP/IP详解卷

  软件开发

  在线阅读查看http://www.52im.net/topic-tcpipvol1.html?mobile=no

  风口下的猪2019-06-09【软件开发】

  阅读更多

• tp5第三方扩展库—加密解密库

  thinkphp

  tp5在开发过程中，特别是表单验证中，以及数据上传到数据库都会用到加解密。这里我们梳理了以下加解密库：

  1.后盾网huodun\crypt\Crypt  （网址：hdphp.com）

  将其加载到thinkphp5框架的方法是：cmd cd 到thinkphp项目（也就是有json和composer.lock的文件夹中），执行composer require houdunwang\Crypt；便可荡下后盾网的第三方加密库

  使用注意点：

  （1）配置config.php

  在其中设置加密密钥，这样加密解密时就使用配置文件中的加密密钥进行处理。

         //后盾网加密key

        'crypt' =>[

                     'key' => '405305c793179059f8fd52436876750c587d19ccfbbe2a643743d021dbdcd79c',

            ],

  注意： 请确保 system/config/app.php 文件中的 key 选项配置了 64 字符的随机字串，否则加密的数值不会安全。

  （2）主要方法

  加密

  $encrypted = Crypt::encrypt('后盾人  人人做后盾');
  

  解密

  $decrypted = Crypt::decrypt($encryptedValue);
  

  自定义密钥

  //自定义密钥,解密时使用相同密钥才可解
  $encrypted = Crypt::encrypt('后盾网  人人做后盾',md5('houdunwang.com'));
  
  //自定义密钥,使用加密时相同的密钥才可解
  $decrypted = Crypt::decrypt($encryptedValue,md5('houdunwang.com'));
  

  风口下的猪2019-06-09【thinkphp】

  阅读更多

• Vue中 keep-alive 详解

  vue

  一.概述

  
  

  1. 简介

  keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

  和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

  2.作用：

  在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

  3.原理：

  在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

  （VNode：虚拟DOM，其实就是一个JS对象）

  
  

  
  

  二.使用

  
  

  1.在<keep-alive>标签上，使用属性，确定缓存哪些页面

  include 字符串或正则表达式 只有名称匹配的组件会被缓存。

  exclude 字符串或正则表达式 任何名称匹配的组件都不会被缓存。

  max 数字 最多可以缓存多少组件实例。

  注意: include/exclude 值是组件中的 name 命名，而不是路由中的组件 name 命名；

  // router.js
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home.vue')
  },
  { 
    path: '/test',
    name: 'test',
    component: () => import('../views/test.vue')
  },

  
  

  // App.vue
  <keep-alive include="test">
     <router-view/>
  </keep-alive>
  
  
  ----------------------------------------------------------------------------------------------------------------
  补充： include/exclude 值的多种形式。
  // 1. 将缓存 name 为 test 的组件(基本）
  <keep-alive include='test'>
    <router-view/>
  </keep-alive>
  // 2. 将缓存 name 为 a 或者 b 的组件，结合动态组件使用
  <keep-alive include='a,b'>
    <router-view/>
  </keep-alive>
  // 3. 使用正则表达式，需使用 v-bind
  <keep-alive :include='/a|b/'>
    <router-view/>
  </keep-alive>	
  // 4.动态判断
  <keep-alive :include='includedComponents'>
    <router-view/>
  </keep-alive>
  // 5. 将不缓存 name 为 test 的组件
  <keep-alive exclude='test'>
    <router-view/>
  </keep-alive>
  // 6. 和 `<transition>` 一起使用
  <transition>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </transition>
  // 7. 数组 (使用 `v-bind`)
  <keep-alive :include="['a', 'b']">
    <component :is="view"></component>
  </keep-alive>

  
  

  // test.vue
  <template>
    <div class="wrap">
      <input type="text" v-model="inputVal">
    </div>
  </template>
  <script>
  export default {
    name:'test',
    data(){
      return {
        inputVal:'',
      }
    }
  }
  </script>

  时切换路由，我们就会发现 test 文件内的 inputVal 会被缓存了
  

  
  

  2.通过路由meta属性，控制keepAlive来实现缓存

  将 test 路由中的 meta 添加 keepAlive 属性为 true，表示当前路由组件要进行缓存。
  

  // router.js
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home.vue')
  },
  { 
    path: '/test',
    name: 'test',
    meta:{
      keepAlive:true
    },
    component: () => import('../views/test.vue')
  },

  keep-alive 代码可以结合 v-if 进行包裹，如果 meta 中的 keepAlive 为 true 进行缓存，否侧不进行缓存。
  

  <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive" />

  
  

  3.路由守卫中，使用keepAlive控制页面缓存

  实际开发中，我们可以结合路由守卫来实现需要缓存组件的缓存。

  export default {
    beforeRouteLeave(to, from, next) {
      to.meta.keepAlive = true;
      next();
    }
  }
  </script>

  
  

  
  

  三.生命周期函数

  使用< keep-alive > 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来created钩子中获取数据的任务。

  
  

  被包含在 < keep-alive > 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

  activated：在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

  deactivated：在组件被停用时调用。

  
  

  注意： 只有组件被 keep-alive 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。

  
  

  什么时候获取数据？

  当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序 created -> mounted -> activated，退出时触发 deactivated。

  当再次进入（前进或者后退）时，只触发 activated。

  我们知道 keep-alive 之后页面模板第一次初始化解析变成 HTML 片段后，再次进入就不在重新解析而是读取内存中的数据。

  只有当数据变化时，才使用 VirtualDOM 进行 diff 更新。所以，页面进入的数据获取应该在 activated 中也放一份。

  数据下载完毕手动操作 DOM 的部分也应该在activated中执行才会生效。

  所以，应该 activated 中留一份数据获取的代码，或者不要 created 部分，直接将 created 中的代码转移到 activated 中。

  
  

  1.应用场景
  

  如果未使用 keep-alive 组件，则在页面回退时仍然会重新渲染页面，触发 created 钩子，使用体验不好。

  在以下场景中使用 keep-alive 组件会显著提高用户体验，菜单存在多级关系（如：主页 -> 列表页 -> 详情页）的场景：

  （1）当从主页跳转列表页时，列表页组件重新渲染；

  （2）当从详情页返回列表页时，列表页组件缓存 不重新请求数据；

  // app.vue
  <template>
    <div id="app">
      <keep-alive :include="keepAliveInclude">
        <router-view/>
      </keep-alive>
    </div>
  </template>
  <script>
  import { mapGetters } from 'vuex'
  export default {
    name:'home',
    computed:{
      ...mapGetters([
        'keepAliveInclude',
      ])
    },
  }
  </script>

  
  

  store 中对 keepAliveInclude 的状态更新保存
  

  
  

  // store.js
  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)
  export default new Vuex.Store({
    state: {
      // keepAlive缓存组件
      keepAliveInclude:[],
    },
    getters:{
      keepAliveInclude: state => state.keepAliveInclude,
    },
    mutations: {
      SET_KEEPALIVEINCLUDE:(state, keepAliveInclude) => {
        state.keepAliveInclude = keepAliveInclude;
      }
    },
    actions: {
      setKeepAliveInclude({ commit }, keepAliveInclude){
        commit("SET_KEEPALIVEINCLUDE", keepAliveInclude)
      },
    },
  })

  
  

  需要进行缓存的页面 list.vue

  
  

  <template>
    <div>
      <button @click="goHome">主页</button>
      <button @click="goDetail">详情</button>
      列表: <input type="text" v-model="inputVal">
    </div>
  </template>
  <script>
  export default {
    name:'list',
    data(){
      return {
        inputVal:'',
      }
    },
    methods:{
      goDetail(){
        this.$router.push('./detail')
      },
      goHome(){
        this.$router.push('./home')
      }
    },
    beforeRouteLeave (to, from, next) {
      if(to.name == 'detail'){
        this.$store.dispatch('setKeepAliveInclude',['list'])
      }else{
        this.$store.dispatch('setKeepAliveInclude',[])
      }
      // next();
      setTimeout(() => { next(); }, 10); // next()需用定时器包裹，否则多次切换无法缓存
    }
  }
  </script>

  
  

  
  

  
  

  风口下的猪2023-05-18【vue】

  阅读更多

• vue中this.$router.back()、this.$router.go()的区别使用

  vue

  开发中遇到返回上一页的需求，有两个方法可选：

  1.$router.back()

  2.$router.go()

  在使用中发现，使用r o u t e r . b a c k ( ) 和 router.back()和router.back()和router.go(-1)作用相同，都是返回原页面。但如果原页面路由携带参数，使用以上两个方法返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由参数仍存在。

  代码

  go(-1): 原页面表单中的内容会丢失；
  this.$router.go(-1)：后退+刷新；
  this.$router.go(0)：刷新；
  this.$router.go(1) ：前进
   
  back(): 原页表表单中的内容会保留；
  this.$router.back():后退 ；
  this.$router.back(0) 刷新；
  this.$router.back(1)：前进

  
  

  风口下的猪2023-05-18【vue】

  阅读更多

• 在vue中实现onShow生命周期函数

  vue

  利用监听路由实现

  watch: {//仿造onShow
  	    $route (to, from ) {
  			if (to.path === '/home') {
  				this.getLinks();
  			}
  	    }
  	},

  
  

  
  

  
  

  风口下的猪2023-04-26【vue】

  阅读更多

• nvm 管理node版本

  软件开发

  node的版本管理器，可以方便地安装&切换不同版本的node

  我们在工作中，可以会有老版本的node的项目需要维护，也可能有新版本的node的项目需要开发，如果只有一个node版本的话将会很麻烦，nvm可以解决我们的难点

  nvm下载地址 https://github.com/coreybutler/nvm-windows/releases

  
  

  一.相关指令

  1.安装完成后，检测nvm是否安装，及查看版本

  nvm

  
  

  
  

  2.安装node前配置镜像

  node_mirror: https://npm.taobao.org/mirrors/node/
  npm_mirror: https://npm.taobao.org/mirrors/npm/

  
  

  3.安装指定版本node

  nvm install 14.16.0
  npm install 6.17.1

  
  

  4.查看node是否安装成功，或者安装了哪些node版本

  nvm ls

  
  

  5.切换node版本

  nvm use 14.16.0可以切换版本

  
  

  二.注意版本内文件完整

  nvm安装node，在使用某版本node时，如果出现 “npm不是内部命令”、“yarn不是内部命令”等字眼时，多半是该node文件不全。

  node_modules中缺少npm、yarn等文件。

  解决办法是：

  下载好的npm，我直接把node_modules复制过去了，最后将压缩包npm文件夹里面的bin目录下的npm和npm.cmd两个文件复制到对应node版本的根目录下
  
  

  
  

  三.注意python2.exe not found的问题

  出现这个提示，一般是项目中使用的node版本和环境中的node版本不一致，或缺少文件。首先切换到和项目对应的node版本

  
  

  
  

  
  

  
  

  
  

  风口下的猪2023-04-22【软件开发】

  阅读更多

• Vue中的爷孙传值$attrs 和利用$listeners 孙爷传值

  vue

  $attrs作为数据对象，$listeners作为函数方法对象，两者都是vue的实例属性。$attrs和$listeners主要作为多重组件爷孙之间数据通信和方法调用。

  grandFather.vue
  

  <template>
      <div>
          <father :age="ag" :number="nu" @onChange="onChange"></father>
      </div>
  </template>
  <script>
  import father from './father'
      export default {
          components:{
              father
          },
           data() {
              return {
                  ag: 12,
                  nu:111,
              }
          },
          methods: {
              onChange(ha){
                  console.log(ha)//'传给爷爷的'
              }
          },
      }
  </script>

  
  

  father.vue
  

  <template>
    <div>
      <son v-bind="$attrs" v-on='$listeners'></son>
    </div>
  </template>
  <script>
  import son from './son.vue'
  export default {
    props: {
      value: {
        type: Number,
      },
    },
    components:{
        son
  },
  created(){
    console.log(this.$attrs)//age number
    console.log(this.$listeners)//onChange
  }
  }
  </script>
  <style lang="scss" scoped></style>

  
  

  son.vue
  

  <template>
      <div>
          {{age}}
      </div>
  </template>
  <script>
      export default {
          props:['age'],
          created(){
              console.log(this.$attrs) // 111 因为父组件共传来 age, number两个值，由于age被 props接收了，所以只有number, 
              this.$emit('onChange','传给爷爷的')
          }
      }
  </script>
  <style lang="scss" scoped>
  </style>

  
  

  
  

  总结：

  （1）$attrs对应所有引用子组件时，除class、style等绑定的数据属性；

  eg: <father :age="ag" :number="nu" @onChange="onChange"></father>

  this.$attrs={ age:12，number:111};

  （2）$listeners 对应所有引用子组件时，绑定的函数方法；

  eg: <father :age="ag" :number="nu" @onChange="onChange"></father>

  this.$listeners={onChange:()=>{}};

  （3）多重组件之间，中间组件通过v-bind="$attrs"和v-on="$listeners "进行传递

  
  

  
  

  
  

  风口下的猪2023-04-22【vue】

  阅读更多

• fastAdmin的避坑

  PHP

  一.管理端能访问，用户中心不能访问

  伪静态规则在Apache fastcgi模式下会导致No input file specified.请修改public目录下的.htaccess文件

  默认的

  RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]

  修改成

  RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]

  
  

  
  

  
  

  
  

  
  

  
  

  风口下的猪2023-04-17【PHP】

  阅读更多

• fastAdmin本地安装插件避坑

  PHP

  fastAdmin本地安装插件主要有几个注意点：

  1. 安装插件，是上传压缩包（一般上传到addons文件夹中）；

  
  

  2. 出现无法解压ZIP文件(code:0)  的情况，有可能是

  （1）php没有安装zip、tar等处理压缩文件的扩展

  zip扩展下载地址：https://pecl.php.net/package/zip

  （2）插件压缩包层级问题（要将插件文件夹下的内容全选进行压缩，而不是将插件文件夹压缩）

  
  

  3. 出现 请从官网渠道下载插件压缩包(code:2)(code:0)  的情况

  定位到：\vendor\karsonzhang\fastadmin-addons\src\addons\Service.php

  上面文件的 263行：$json = self::sendRequest('/addon/valid', $params, 'POST');

  上面代码是做服务器验证的，直接在其下面新增一行代码：return true;即可

  
  

  
  

  风口下的猪2023-04-17【PHP】

  阅读更多

• vue webpack性能优化（二） 优化方向确定

  vue

  webpack性能优化方向主要是三个：

  （1）减少本地代码/无效代码、本地资源的引用；

  （2）

  风口下的猪2023-04-15【vue】

  阅读更多

• 组件内通信利器provide/inject

  vue

  provide/inject是作为组件之间通信的一种方式，专有名称--“依赖注入”。

  provide/inject的角色应该是介于props通信与vuex通信之间，或者融合两者。其作用表现为

  （1）不用props那样需要每个父子之间建立传输通道，provide/inject在整个父元素及其下的所有子元素都可调用，在这个以一个父元素为主的组件调用体系中，相当于全局通信，很方便；

  （2）provide/inject不会像vuex那样，对整个应用都有影响，具有一定隔离性

  
  

  也就是说provide/inject就是为插拔式模块开发而生的

  
  

  // 父组件提供 方法
  provide: function () {
    return {
      getMap: this.getMap
    }
  }
  // 子组件接收并使用 方法
  inject: ['getMap']
  ...
  created(){
    console.log(this.getMap())
  }

  
  

  
  

  
  

  
  

  风口下的猪2023-04-15【vue】

  阅读更多