最新博文

• vue-cli项目，如何给页面设置网站title、keywords、description等meta信息

  vue

  vue-cli是单页面，设置网站的meta信息，即修改页面的meta信息，即为document设置对应的meta属性值即可。

  如果每个页面都需要设置meta，需要让导航守卫配合实现

  
  

  1.路由规则中为每个页面设置meta信息

  {
              path: '/worklist',
              name: 'worklist',
              component: worklist,
              meta: {title:'维修工列表',keyword:'success-list',description:'维修工列表'},
   },

  2.路由导航读取每个页面的meta，当app.vue根页面调用各个路由组件时，修改document的meta属性

  router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
      document.title = to.meta.title
    }
    next()
  })

  
  

  
  

  
  

  风口下的猪2022-08-05【vue】

  阅读更多

• vue-cli项目中的404

  vue

  路由404，是路由匹配失效，交由通配符指向404页面

  404页面组件路由一般和layout路由统计，不在layout的children中

  
  

  
  

  出现404说明跳转的页面路由并没有在router中注册生效或者没有注册

  
  

  
  

  
  

  风口下的猪2022-07-29【vue】

  阅读更多

• vue-cli项目，点击某个菜单后公共模板（header/footer/menu等）不见了，只有主体页面部分

  vue

  风口下的猪2022-07-29【vue】

  阅读更多

• mp4在网页端不兼容问题

  软件开发

  mp4出现支持谷歌，不支持火狐、不支持微信浏览器的解决方法：

  （1）针对火狐，将编码格式调整为264

  （2）针对微信浏览器，不是因为手机端和pc端差异的问题，而是微信浏览器进行了对video标签的拦截

  风口下的猪2022-07-28【软件开发】

  阅读更多

• tp在smarty模式下解析富文本内容

  thinkphp

  tp在smarty模式下解析富文本内容，如果只是将变量用括号括起来，则会原样输出。例如

  <div>{$art.content}</div>

  输出

  <p><131332/p>

  
  

  避免原样输出，则需要在变量后面加个raw过滤输出

  <div>{$art.content | raw}</div>

  
  

  
  

  
  

  风口下的猪2022-07-20【thinkphp】

  阅读更多

• axios上传图片报500

  vue

  风口下的猪2022-07-14【vue】

  阅读更多

• vue-cli项目proxy跨域，在线上针对A域名跨B域名情况失效的解决方法

  vue

  vue-cli项目在本地能通过proxy跨域，是因为本地node环境配置了localhost的代理名称。在线上不能通过proxy实现A到B的跨域，是因为A的nginx没有配置针对B的代理

  
  

  
  

  
  

  风口下的猪2022-07-14【vue】

  阅读更多

• vue-cli项目的前端跨域解决方案

  vue

  vue-cli项目仍然通过proxy代理实现跨域

  vue-cli项目没有vue.config.js，在项目中新增vue.config.js，编译时便会自动加载上。proxy设置便在其中

  // 配置路径别名

    configureWebpack: {

      devServer: {

        // 调试时允许内网穿透，让外网的人访问到本地调试的H5页面

        disableHostCheck: true,

        // open: true, // 自动开启浏览器

        proxy: {

          '/api': {

            // target: 'http://192.168.1.9:8123',

            // target: 'https://admin.hjyywk.cn/',  //正式服

            target: 'http://www.hcjrdk.cn',     //测试服

            ws: true,

            changeOrigin: true,

            pathRewrite: {

              '^/api': ''

            } // 替换target中的请求地址

          }

        }

      }

    },

  
  

  另外在请求时判断请求环境是线上还是本地，如果是本地，就将请求网址域名换成'api'，这样是代理时识别网址中的api字段，将其替换成真正需要访问的网址

  const env = process.env.NODE_ENV

  // const baseUrl = (env === 'production') ? 'http://hc.admin.com' : '/api'

  //测试服

  const baseUrl = (env === 'production') ? 'http://www.hcjrdk.cn' : '/api'

  //正式服

  // const baseUrl = (env === 'production') ? 'https://admin.hjyywk.cn' : '/api'

  // http://192.168.1.9:8123

  export default baseUrl;

  
  

  
  

  
  

  
  

  风口下的猪2022-07-14【vue】

  阅读更多

• canvas--45度圆角/圆弧

  特效

  canvas中画45度圆角/圆弧，通过arc和Math.PI弧度实现

  Math.PI表示弧度

  左部 1*Math.PI

  上部 1.5*Math.PI

  右部 0*Math.PI / 2*Math.PI

  底部 0.5*Math.PI

  
  

  示例：表示右上角的圆弧

  ctx.arc(100,100,20,1.5*Math.PI,0*Math.PI)

  其中100,100是圆点坐标，20是半径

  
  

  
  

  
  

  
  

  风口下的猪2022-07-14【特效】

  阅读更多

• 数组API--计算类

  JavaScript

  数组的计算类api方法主要有reduce和reduceRight两种方法

  arr.reduce((total,currentVal,currentIndex,arr)=>{return total+currentVal}) 从左开始累加，total默认为第一个元素，所以执行次数为arr.length-1;

  arr.reduceRight((total,currentVal,currentIndex,arr)=>{return total+currentVal})  从右开始累加，total默认为最后一个元素，执行次数为arr.length-1;

  
  

  
  

  
  

  
  

  风口下的猪2022-07-04【JavaScript】

  阅读更多

• 数组API----检测/查找类

  JavaScript

  常见常用的数组检测查找类API方法有indexOf、lastIndexOf、find、findIndex、some、every、filter等主要的七个方法

  其中只有every和filter是无论是否得到条件匹配，仍然要全部遍历的两个方法，其余的都是遇到匹配条件即可停止执行。

  
  

  1.查找元素索引，不存在则返回-1

  参数是元素对象，拿来主义，不做条件查询
  

  arr.indexOf(item)  从左匹配到，则返回索引

  arr.lastIndexOf(item) 从右匹配到，则返回索引

  参数是回调函数，可做元素条件查询

  arr.findIndex((item)=>{item>1}) 从左匹配到，则返回索引

  
  

  2.检测元素，满足条件返回true，不满足则返回false

  arr.some((item)=>{item>1}) 从左匹配到，则返回true

  arr.every((item)=>{item>1})全部遍历进行匹配，如果全部满足条件返回true，其中有耗子屎不满足条件返回false

  
  

  3.查找元素

  arr.find((item)=>{item>1}) 从左匹配到，返回元素，停止执行。没有匹配到则返回false

  arr.filter((item)=>{item>1}) 创建一个空数组，全部遍历进行匹配，匹配到则将元素放入，结果返回该数组

  
  

  
  

  
  

  风口下的猪2022-07-04【JavaScript】

  阅读更多