最新博文

• vue webpack性能优化（一） 准备分析工作

  web性能优化

  
  

  一.了解vue-cli项目的配置

  1.查看vue-cli版本是在package.json中查看

  2.查看webpack版本是在node_modules/webpack/package.json中查看

  
  

  
  

  二.查看编译耗时

  2.1  手动统计耗时

  vue编译命令npm run build，其实际使用的命令是vue-cli-service build，路径是node_modules\@vue\cli-service\lib\commands\build\index.js

  原108行加入命令：

  const beginTime = Date.now()

  
  

  原209~210行之间加入代码：
  

  const endTime = Date.now()
  info(`编译耗时：${chalk.cyan((endTime - beginTime) / 1000)}(s)`)

  
  

  npm run build即可看出编译总耗时

  
  

  
  

  2.2  使用第三方工具（推荐）

  speed-measure-webpack-plugin每一项耗时都有精确统计，搭配使用webpack-bundle-analyzer打包后的各个模块文件大小，直观明了，根据具体项目再去进行优化。

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  
  

  风口下的猪2023-04-06【web性能优化】

  阅读更多

• vue语法 `${ }` （模版字符串）

  vue

  一、基础用法${ }用``包裹起来

  Const name = '小缘'
  const age = 14
  console.info(`大家好，我叫${name}，今年${age}岁了`)
  // 等价于
  console.info('大家好，我叫' + name + '，今年' + age + '岁了')
   
  // 最大的优势是支持换行字符串
  Const url = '//baidu.com'
  Const text = '百度一下，你就知道'
  Const html = `
    <div class="container">
      <a href="${url}">${text}</a>
    </div>
  `
  console.log(html)
  console.log(typeof html)

  
  

  二、在{ }中使用函数动态传值

  html文件中

  <span :style="`color:${getColor(a.statustext)}`" class="nowStatus">
     [ {{ a.statustext }} ]
  </span>
  js文件中
  getColor(status) {
      let color;
   
              if (status === '退回') {
                  color = '#e64545';
              }
              if (status === '待受理') {
                  color = '#2e6be5';
              }
              if (status === '办结') {
                  color = '#35b389';
              }
              if (status === '已回复，待评价') {
                  color = '#f79042';
              }
   
              return color;
          },

  
  

  
  

  
  

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

  阅读更多

• mixin混入

  vue

  项目开发过程中，各页面/组件会用到一些复用的方法、data、生命周期中执行某个函数、监听某值。例如获取手机状态栏高度、后台管理列表页增删改查高度雷同复用...等。这时就靠将这些复用的内容提出来，让全局或一类页面混入该对象，减少书写重复

  
  

  一、局部混入

  定义一个 mixins.js 文件，此文件中可以混入Vue中所有的设置项，methods、computed、watch、data、生命周期函数等都可以。

  使用时在组件中直接引入此文件使用即可，它的值是一个数组，表示可以混入多个：

  
  

  // mixins.js文件

  export const mixin1 = {
      data() {
          return {
              name: 'bjl'
          }
      }
  }
  export const mixin2 = {
      methods: {
          showName() {
              console.log(this.name)
          }
      }
  }

  
  

  // 某一个组件中

  <template>
      ...
  </template>
  <script>
  import {mixin1, mixin2} from "../mixins.js"
  export default {
      mixins: [mixin1, mixin2]
  }    
  </script>

  
  

  二、全局混入

  全局混入表示混入到Vue对象中，Vue下的所有组件都会使用混入的方法，一定要注意，是所有的组件，所以，在使用全局混入的时候要确保所有的组件都会使用到。

  定义一个mixins.js文件，在main.js文件中引入并使用：

  //main.js文件

  import {mixin1, mixin2} from "../mixins.js"
  Vue.mixin(mixin1)
  Vue.mixin(mixin2)

  
  

  如果在使用混入的过程中出现冲突，除生命周期钩子外，其余的都以本组件中的为主，混入的不生效；生命周期钩子产生冲突是先执行混入的声明周期钩子，再执行本组件的生命周期钩子。

  
  

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

  阅读更多

• 关于next({ ...to, replace: true })的理解

  vue

  多人在使用动态添加路由addRoutes()会遇到下面的情况：

  • 问题：在addRoutes()之后，第一次访问被添加的路由会白屏。
  • 原因：在addRoutes()之后，立刻访问被添加的路由时，addRoutes()没有执行结束，因而找不到刚刚被添加的路由导致白屏。
  • 解决方案：需要重新访问一次路由才行。

  该如何解决这个问题 ?
  此时就要使用next({ ...to, replace: true })来确保addRoutes()时动态添加的路由已经被完全加载上去。

  关于next({ …to, replace: true })

  1. replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。
  2. next({ ...to })的执行很简单，它会判断：
     如果参数to不能找到对应的路由的话，就再执行一次路由守卫（beforeEach((to, from, next)）直到其中的next({ ...to})能找到对应的路由为止。

  next({ ...to, replace: true })可以保证addRoutes()已经执行完成，路由中已经有我们后来添加进去的用来路由了。
  找到对应的路由之后，接下来将前往对应路由，并执行路由守卫（beforeEach((to, from, next)），因此需要用代码来判断是否可以该入改路由（本文的代码根据store中的allowRoutes的长度是否大于零来确定是否进行next()），如果是，就执行next()放行。

  如果守卫中没有正确的放行出口的话，会一直next({ ...to})进入死循环 !!!

  因此你还需要确保在当addRoutes()已经完成时，所执行到的这一次路由守卫beforeEach((to, from, next)中有一个正确的next()方向出口。

  以下就是上述内容的伪代码，敲重点

  if (store.state.allowRouters && store.state.allowRouters.length > 0) {
     // 路由的出口 addRoute已经完成 避免路由守卫进入死循环
     next()
  } 
  else{
  	router.addRoute('要添加的路由');
  	// 保证addRoute已经完成，并导航到对应的路由
  	next({ ...to, replace: true })
  }

  
  

  
  

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

  阅读更多

• 组件内路由守卫 beforeRouteEnter和beforeRouteLeave

  vue

  组件内路由守卫和全局前置后置守卫还不一样，组件内守卫包括进入组件之前调用beforeRouteEnter和离开组件时调用beforeRouteLeave,这里的离开组件时并不是全局后置路由守卫，而是指，当前组件被切换到其他组件时。

  
  

  router=>index.js

    {
      path: '/void',
      name: 'void',
      component: () => import('../views/Void.vue'),
      meta:{
        isAuth:ture,  //是否需要权限校验
        title:'新闻',  //用于修改网页标题
      }
    },

  
  

  views=>Void.vue

  <script>
  import Category from '@/components/Category.vue'
    export default {
      name:'Void',
      components:{ Category},
   
      //通过路由规则，进入改组件时被调用
      beforeRouteEnter(to,from,next){
        console.log('beforeRouteEnter',to,from);//to一定是本组件的路由
        if(to.meta.isAuth){  //判断是否需要鉴权，就不用to.path === '/home/news' || to.path === '/home/msg'
            if(localStorage.getItem('school')==='atguigu'){  //权限控制的具体规则
              next()
            }else{
              alert('暂无权限查看')
            }
          }else{
            next()
          }
      },
      //通过路由规则，离开该组件时被调用
      beforeRouteLeave(){
        console.log('beforeRouteLeave',to,from); //from一定是本组件的路由
        next()
      }
    }
  </script>

  
  

  
  

  
  

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

  阅读更多

• 独享路由 beforeEnter

  vue

  独享路由守卫beforeEnter（某一个路由所单独享用的，只有前置没有后置）

  
  

  路由独立守卫，顾名思义就是这个路由自己的守卫任务，就如同咱们LOL，我们守卫的就是独立一条路，保证我们这条路不要被敌人攻克(当然我们也得打团配合)

  在官方定义是这样说的：你可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的。

  const router = new VueRouter({
   routes: [
    {
     path: '/foo',
     component: Foo,
     beforeEnter: (to, from, next) => {
      // ...
     }
    }
   ]
  })

  参数如下：

  beforeEnter(to,from,next)
  // to  要进入的目标，路由对象
  // from 当前导航正要离开的路由
  // next 初步认为是展示页面；（是否显示跳转页面）
  ​
  next()//直接进to 所指路由
  next(false) //中断当前路由
  next('route') //跳转指定路由
  next('error') //跳转错误路由

  
  

  我们在这里使用使用一个案例来演示它的用法；案例中独立路由单独检测是否在登入状态，在没有登录的情况下弹到登录界面，和全局登录效果一致，只不过只保留了自己；

  import Vue from 'vue';
  import VueRouter from 'vue-router';
  Vue.use(VueRouter);
  ​
  import Index from './Index/Index.vue'
  ​
  import AA from './views/AA.vue'
  import DD from './views/DD.vue'
  import EE from './views/EE.vue'
  export default {
    routes: [
      {
        path: '/',
        component: Index,
        name: 'index',
        children: [
          {
            path: 'AA',
            component: AA,
            name: 'aa',
            beforeEnter: (to, from, next) => {
              if (to.path == '/DD') {
                next()
              } else {
                alert('请登入');
                next('/DD')
              }
  ​
            }
          }, {
            path: 'DD',
            component: DD,
            name: 'dd'
          },
          {
            path: 'EE',
            component: EE,
            name: 'ee'
          },
  ​
        ]
      }
    ]
  }
  

   

  
  

  
  

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

  阅读更多

• 全局路由 router.afterEach 与 router.beforeEach

  vue

  1. router.afterEach是vue全局的导航钩子函数，我个人的理解是，进入某个路由之后触发的钩子函数，我用的比较多的有两种用法

     1. 修改，每个页面的title

        1. 首先在路由元中meta添加一个title属性，然后 用 document.title = to.meta.title修改当前页面的title。

           router.afterEach((to, from, next)=> {
             document.title = to.meta.title;
             to.meta && (document.title = to.meta.title) // 推荐写法
           })
           

     2. 每次切换页面的时候，让页面滚动到最顶部

        router.afterEach((to, from, next)=> {
          window.scrollTo(0, 0)
        })
        

  2. router.beforeEach是路由的全局导航守卫，在即将进入路由回调会被触发，一般用来做一些进入页面的限制。 比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面。说白了就是路由跳转前根据业务逻辑判断是否拦截。

     1. 获取token
     2. 判断token否存在以及要进入的页面
        1. 如果token存在或者要进入的页面是登陆页，放行
        2. 如果没有token并且进入的页面不是登陆页，那么提示用户登陆失效

     router.beforeEach((to, from, next)=> {
       let token = localstorage.getItem('token');
       if(to.path == "/login" || token) {
         next();
       }else {
         alert("登录失效，请重新登录");
         setTimeout(()=> {
           next({
             path: "/login"
           })
         }, 500)
       }
     })

  
  

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

  阅读更多

• vue路由守卫中next方法的理解

  vue

  在路由守卫中有三个参数；

  beforeEach((to, from, next) => {
  	to // 要去的路由
  	from // 当前路由
  	next() // 放行的意思
  }

  其实在路由守卫中，只有next()是放行，其他的诸如：next('/logon') 、 next(to) 或者 next({ ...to, replace: true })都不是放行，而是：中断当前导航，执行新的导航

  
  

  背景：你乘坐汽车从A景区想赶往B景区（模拟路由A跳转到路由B）

  1.next()

  next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。

  你乘坐汽车要从A景区到B景区，路过关卡时，守门人拦下你，你量出了next()，守门人一看没问题，赶紧放行，于是你顺利到达了B景区。

  2.next(false)

  next( false )中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。

  如果你量出了next(false)，守门人立马关住大门，不让你走，哪都不让你去，你说想换个交通方式，走路或者坐飞机，都不行，老实待在A景区吧

  3.next(’/’)

  next( ’ / ‘)或者next({ paht：’ / ’ })：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。可传递的参数可以是router-link标签中的to属性参数或router.push中的选项

  你原本打算从A景区到B景区，但是走到关卡的时候由于某些原因改变了主意，想要去C景区，你对守门员量出了next({path:’/C’})，守门员一看，哦，原来你不去B了，要去C啊，去吧去吧，然后你顺利到达了C景区

  4.next(error)

  next( error )：如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。

  你在出发之前，给你妈妈说，妈，要是有什么事我立马通知你，你记得查看消息啊（你注册了router.onError()）走到中途，出现了意外，你发出next(error)，然后你妈就收到了消息，赶紧打电话问你怎么了（执行router.onError()里的回调）

  
  

  
  

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

  阅读更多

• vue 中$t()的作用

  vue

  $t，是vue-i18n国际化插件
  

  
  

  vue 项目中 $t('')直接在html中直接调用这个函数 {{ $t('login.title') }}

  
  

  $t是引入国际化后,挂到了Vue.prototype上的一个方法，接受一个字符串作为参数

  <div class="title-container">
       <h3 class="title">
           {{ $t('login.title') }}
       </h3>
  </div>
  //---------$t('login.title') 我理解的意思是去当前语言环境下login对象的title值

  
  

  1.main.js中引入vue-i18n

  // 国际化 这个文件是本地创建的 主要是获取当前语言环境和相应的变量值
  import i18n from './lang' 
  new Vue({
      el: '#app',   
      i18n,
      render: h => h(App)
  })

  
  

  2.浏览器的语言环境不同，相应设置不同的语言配置文件

  // ./lang/index.js 
  import Vue from 'vue' //引入vue
  import VueI18n from 'vue-i18n'  //引入vue的国际化插件
  import Cookies from 'js-cookie' //我这里需要，所以引入轻量级的处理cookies的js
  import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
  import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
  import zhLocale from './zh'     //本地创建的中文环境配置文件
  import enLocale from './en'     //本地创建的英文环境配置文件
   
  Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件
   
  const messages = {
      en: {
          ...enLocale,
          ...elementEnLocale
      },
      zh: {
          ...zhLocale,
          ...elementZhLocale
      }
  }
  //获取当前语言环境，通过后台返回的语言或者浏览器语言环境
  export function getLanguage() {
      const chooseLanguage = Cookies.get('language')//取后台设置的语言
      if (chooseLanguage) return chooseLanguage
      //如果后台没有返回语言则根据浏览器的语言环境返回语言变量
      const language = (navigator.language || navigator.browserLanguage).toLowerCase()
      const locales = Object.keys(messages)//获取前端设置的所有语言
      //遍历所有语言值组成的数组，匹配前端设置的语言能匹配到就返回改语言值
      for (const locale of locales) {
          if (language.indexOf(locale) > -1) {
              return locale
          }
      }
      //如果都没匹配到就直接返回英文
      return 'en'
  }
  const i18n = new VueI18n({
      //语言标识 this.$i18n.locale 通过切换locale的值来实现语言切换
      //如：this.$i18n.locale='en' 直接切换成英文，仅限于配置了语言的一些变量
      locale: getLanguage(),//调的上边这个函数
      messages              //上边配置的语言标识对应的不同配置
  })
  export default i18n

  
  

  3.创建不同语言标识对应的文件，以中文环境为例

  // ./lang/index.js   创建文件 存储语言对应的一些变量  
  export default {  
      login: {
          title: '登录表单',
      },
      warning: '警告信息'
  }

  
  

  
  

  
  

  
  

  风口下的猪2023-03-30【vue】

  阅读更多

• chrome调试捕捉hover样式

  软件开发

  二开项目中，经常会对原有页面样式进行重构，需要捕捉到原来的hover样式是在哪个文件定义

  
  

  方法：

  1.鼠标滑动到该dom元素；

  2.点击右键，不做任何选择；

  3.按住N键，style样式说明这会定位到该hover样式；

  4.但是此时移开鼠标，style中该样式说明会消失，可配合微信屏幕截图截取该hover样式

  
  

  
  

  风口下的猪2023-03-28【软件开发】

  阅读更多

• yii2 关联查询总结

  yii2

  1 join 方式 直接关联查询
  

  $goodsId = BargainGoods::find()->alias('bg')
                          ->where(['bg.mall_id' => $this->mall->id, 'bg.is_delete' => 0])
                          ->leftJoin(['g' => Goods::tableName()], 'g.id = bg.goods_id')
                          ->andWhere(['g.goods_warehouse_id' => $goodsWarehouseId])
                          ->select(['bg.id']);

  
  

  2  with方式

  
  

  （1）方法一：模型添加关联关系法

  
  

  $detail = Mch::find()->where([
                  'id' => \Yii::$app->user->identity->mch_id ?: $this->id,
                  'mall_id' => \Yii::$app->mall->id,
                  'is_delete' => 0,
              ])->with('user.userInfo', 'mchUser', 'store', 'category','store.tradeArea','store.tradeAreaList')->asArray()->one();

  
   public function getUser()
      {
          return $this->hasOne(User::className(), ['id' => 'user_id']);
      }
      public function getMchUser()
      {
          return $this->hasOne(User::className(), ['mch_id' => 'id']);
      }
      public function getStore()
      {
          return $this->hasOne(Store::className(), ['mch_id' => 'id']);
      }
      public function getCategory()
      {
          return $this->hasOne(MchCommonCat::className(), ['id' => 'mch_common_cat_id']);
      }

  
  

  （2）

  ->with(['goodsSku' => function(ActivityQuery $query) {
  	$query->with(['category']);
  }]);

  
  

  
  

  
  

  
  

  
  

  风口下的猪2023-03-15【yii2】

  阅读更多