action

action 查看完整档案

上海编辑东北大学  |  钢铁冶金 编辑  |  填写所在公司/组织 songlongfee.github.io 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

action 关注了问题 · 1月14日

electron应用中调用系统打印对话框后取消打印,线程阻塞,无法进行后续操作

在electron开发的应用中使用window.print()调用系统打印对话框后取消打印,页面事件操作无响应,是否有方法恢复!image

关注 1 回答 0

action 提出了问题 · 1月14日

electron应用中调用系统打印对话框后取消打印,线程阻塞,无法进行后续操作

在electron开发的应用中使用window.print()调用系统打印对话框后取消打印,页面事件操作无响应,是否有方法恢复!image

关注 1 回答 0

action 发布了文章 · 2020-11-08

通过canvas获取视频第一帧封面图

let video = document.createElement('video');
video.style="width:0;height:0;position:fixed;right:-100%;"
video.muted = 'muted';
video.autoplay = 'autoplay';
video.onloadeddata = function() {
  let { width, height } = getVideoSize(120, this.videoWidth, this.videoHeight);
  let canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  canvas.getContext('2d').drawImage(this, 0, 0, width, height);
  // 视频转换为图片
  canvas.toDataURL('image/png')
  document.body.removeChild(video);
}
video.src = URL.createObjectURL(file.files[0]); // file本地文件
document.body.appendChild(video);

// 获取视频等比缩放宽高
function getVideoSize(maxWidth, width, height) {
  if(maxWidth >= width) {
    return {
      width,
      height
    }
  } else {
    return {
      width: maxWidth,
      height: Math.floor(maxWidth / width * height)
    }
  }
}
查看原文

赞 0 收藏 0 评论 0

action 发布了文章 · 2020-11-08

前端权限控制-基于vue-router的动态路由实现

在中后台应用系统开发中,大部分情况下会涉及到用户权限控制,除了后端做权限验证外,前端在用户访问时也需要基于用户权限做相应控制。针对前端使用vue框架的情况,对页面一级的权限控制,常规处理是在页面导航栏通过控制导航显隐控制权限,但在浏览器地址栏输入访问路径依然可以访问,可以用vue-router的动态路由来实现权限控制。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

// 默认路由只配置无需权限的页面
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/user/login'
    },
    {
      path: '/user/login',
      name: 'login',
      component: () => import('@/views/user/Login.vue')
    }
  ]
})

登录成功后通过addRoutes更新路由配置

import routeConfig from '@/routeConfig'

this.$api.user.login({
  username,
  password
}).then(res => {
  if(res.data.code === 0) {
    // 登录成功,根据返回权限码配置动态路由
    let router = routeConfig();
    router.routes.forEach(route => this.$router.options.routes.push(route));
    // 必须将路由push到options中才生效
    this.$router.addRoutes(router.routes);
  }
})

正常情况下这样就可以实现动态路由控制了,但刷新页面发现会出现404,因为刷新时vue实例重新初始化了,导致动态路由被还原成默认路由,此时需要将权限码存储在本地,在main.js中根据权限码重新生成动态路由

// 刷新页面时根据本地缓存重新生成路由
if(sessionStorage.getItem('permission')) {
  let routerData = routeConfig();
  routerData.routes.forEach(route => router.options.routes.push(route));
  router.addRoutes(routerData.routes);
}

以上步骤基本可以实现动态添加路由并在刷新页面是维持路由状态,但访问根路径会始终跳转到登录页,无法默认跳转到首页,这个问题目前还未想到好的解决方案。

查看原文

赞 0 收藏 0 评论 0

action 发布了文章 · 2020-11-04

axios使用拦截器取消重复的请求

由于接口响应速度等原因,在项目开发中经常需要处理重复点击导致多次调用接口的问题,针对每个接口调用单独处理相对繁琐,这里通过axios提供的拦截器实现对重复请求的统一拦截处理。

import axios from 'axios'
import md5 from 'js-md5'
let pending = {};// 网络请求记录map结构
let CancelToken = axios.CancelToken;
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 通过请求url、method、params字段生成每个请求唯一的md5值
let key = md5(`${config.url}&${config.method}&${JSON.stringify(config.data)}`);
  config.cancelToken = new CancelToken(c => {
    if(pending[key]) {
      if(Date.now() - pending[key] > 5000) {
        // 同一个请求再次发起时距上次请求时间超过5s,删除对应的请求记录,重新发起请求,时间根据实际情况调整
        delete pending[key];
      } else {
        // 5s以内的已发起请求,取消重复发送请求
        c('repeated');
      }
    }
    // 记录当前的请求,如果是进行中的请求则更新标记时间戳
    pending[key] = Date.now();
  });
}, error => {
  return Promise.reject(error);
});

// 添加响应拦截

axios.interceptors.response.use(res => {
//response的config.url包含域名,需替换为空字符串,保证和request的url完全一致
  let key = md5(`${res.config.url.replace(/.*\/api/, '')}&${res.config.method}&${res.config.data}`);
  if(pending[key]) {
    // 请求响应完成,删除对应的请求记录
    delete pending[key];
  }
  return res;
}, err => {
  if(err.message !== 'repeated') {
    // 非取消重复请求的报错,给出错误提示
    let content = '系统错误!';
    if(window.navigator.onLine) {
      if(/timeout/.test(err)) {
        content = '请求超时!';
      }
    } else {
      content = '网络异常!';
    }
    alert(content);
  }
  return Promise.reject(err);
})
查看原文

赞 1 收藏 1 评论 0

action 赞了回答 · 2020-07-17

解决justify-content: space-between;未生效?没有两端对齐

有可能是伪元素导致的,比如::before或::after影响到了。

关注 4 回答 3

action 赞了回答 · 2020-05-09

解决vue应用的main.js 里如何使用 vuex有关的store.js 里state 的数据?

main.js

import  store  from  './store'
if (store && store.state) {
    ...
}

image.png

关注 2 回答 2

action 赞了回答 · 2020-01-06

关于设置textarea光标位置?

加个 setTimeout 可以,但是有个问题,光标会先在最后一闪,然后马上返回你设置的位置。
可以先blur,然后获取位置,然后focus。
参考

tabDelete (e) { // 自定义默认 tab 事件
  const TABKEY = 9;
  if (e.keyCode === TABKEY) {
    let pos = this.$refs['mTextarea'].selectionStart
    if (pos >= 0) {
      this.input = this.input.splice(pos, '    ')
      this.$refs['mTextarea'].blur()
      setTimeout(() => {
        this.$refs['mTextarea'].selectionStart = pos + 4
        this.$refs['mTextarea'].selectionEnd = pos + 4
        this.$refs['mTextarea'].focus()
      })
    }
    if(e.preventDefault) {
      e.preventDefault()
    }
  }
}

关注 6 回答 4

action 赞了回答 · 2019-12-30

electron-vue脚手架搭建的工程的build命令怎么配置才能不打包asar呢

package.json   
"build": {
    "asar": false
  }

关注 1 回答 1

action 赞了问题 · 2019-12-30

electron-vue脚手架搭建的工程的build命令怎么配置才能不打包asar呢

我的工程是根据electron-vue搭建的,想知道怎么配置打包结果的exe文件夹中app显示源文件而不是app.asar呢

关注 1 回答 1

认证与成就

  • 获得 2 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-05-07
个人主页被 343 人浏览