发表于 | 分类于 | 阅读次数:

file-preview

word、excel、ppt 和 pdf 文件在线预览。查看

使用的技术

实现的功能

  • 单文件上传
  • 根据文件类型实现word、excel、ppt 和 pdf 文件的在线预览
  • 定时任务进行文件删除
  • 使用log4js打印上传、预览、定时任务删除文件的日志

如何使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 下载项目
$ git clone https://github.com/XHalso/file-preview.git

# 使用的mysql数据库，在根目录创建mysql的配置文件.env
DB_HOST=localhost
DB_PORT=3306
DB_USETNAME=root
DB_PASSWORD=123456
DB_DATABASE=file_preview
DB_SYNC=true
EXPIREDATE=3000000000
BASEURL=http://localhost:3001/

# 本地启动项目,访问地址是 http://localhost:3001
$ npm install
$ npm run dev

发表于 | 分类于 | 阅读次数:

客户端上传文件

首先从后台后去七牛云的token,这里使用node来获取token

1
2
3
4
5
6
7
8
9
10
11
12
const getUploadToken = () => {
  const accessKey = 'accessKey';
  const secretKey = 'secretKey';
  const bucket = "bucket";  //存储空间名称
  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
  const options = {
    scope: bucket
  }
  const putPolicy = new qiniu.rs.PutPolicy(options);
  const uploadToken = putPolicy.uploadToken(mac);
  return uploadToken;
}

接着再浏览器请求接口获取七牛云token，进行文件上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--使用的vue+elementUI-->
qiniuUpload() {
  this.axios.get("/api/work/getQiniuToken").then(res => {
    let token = res.token;
    let config = {
      useCdnDomain: true,
      region: qiniu.region.z1
    };
    let putExtra = {
      fname: "",
      params: {},
      mimeType: null
    };
    let file = this.form.audio[0].raw;
    let key = dayjs().format("YYYYMMDDHHmmssSSS") + ".mp3";
    let observable = qiniu.upload(file, key, token, putExtra, config);
    let that = this;
    let observer = {
      next: res => {
        console.log(res);
      },
      error: err => {
        console.log(err);
      },
      complete: res => {
        that.submitForm(res.key);
      }
    };
    let subscription = observable.subscribe(observer);
  });
},

发表于 | 分类于 | 阅读次数:

安装

1
2
$ npm i --save dotenv
$ npm i --save-dev @types/dotenv

创建一个.env文件

1
2
3
4
5
6
DB_HOST=localhost
DB_PORT=3306
DB_USETNAME=root
DB_PASSWORD=123456
DB_DATABASE=test
DB_SYNC=true

全局引入

1
2
<!--main.ts-->
import 'dotenv/config'

连接数据库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--app.moudle.ts-->
@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: process.env.DB_HOST,
      port: parseInt(process.env.DB_PORT),
      username: process.env.DB_USETNAME,
      password: process.env.DB_PASSWORD,
      database: process.env.DB_DATABASE,
      entities: [__dirname + '/**/*.entity{.ts,.js}'],
      synchronize: process.env.DB_SYNC=='true'?true:false,
      logging: true
    }),
  ],
  ...
})

发表于 | 分类于 | 阅读次数:

音频播放

微信小程序目前建议要使用音频的功能，推荐使用通过wx.createInnerAudioContext()创建内部 audio 上下文 InnerAudioContext 对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!--seek：跳转的位置，auto: 是否自动播放-->
handleAudio(seek=0,auto=true){
    const that=this
    this.setData({
      innerAudioContext: wx.createInnerAudioContext()
    })
    this.data.innerAudioContext.seek(seek)
    <!--这里的url指的是音频的地址-->
    this.data.innerAudioContext.src = url
    if(auto){
      this.data.innerAudioContext.autoplay = true
    }
    this.data.innerAudioContext.onPlay(() => {
      console.log('开始播放')
    })
    this.data.innerAudioContext.onTimeUpdate(()=>{
      <!--持续更新已播放的进度-->
      that.setData({
        currentTime: that.formatTime(that.data.innerAudioContext.currentTime)
      })
    })
    this.data.innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  }

接着在页面生命周期onReady里使用wx.request的success里去调用handleAudio函数。

阅读全文 »

发表于 | 分类于 | 阅读次数:

javascript的变量类型

  1. 基本类型：存放在栈内存中的简单数据段，数据大小确定，内存空间大小可以分配。
    5种基本数据类型有Undefined、Null、Boolean、Number 和 String，它们是直接按值存放的，所以可以直接访问。

  2. 引用类型：存放在堆内存中的对象，变量实际保存的是一个内存地址，这个内存地址指向另一个内存空间。每个空间大小不一样，要根据情况开进行特定的分配。
    当我们需要访问引用类型（如对象，数组，函数等）的值时，首先从栈中获得该对象的内存地址，然后再从堆内存中取得所需的数据。

javascript存储对象都是存地址的，所以浅拷贝会导致 arr1 和arr2 指向同一块内存地址。改变了其中一方的内容，都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变，而深拷贝是开辟一块新的内存地址，将原对象的各个属性逐个复制进去。对拷贝对象和源对象各自的操作互不影响。

例如：数组拷贝

1
2
3
4
5
6
//浅拷贝，双向改变,指向同一片内存空间
var arr1 = [1, 2, 3];
var arr2 = arr1;
arr1[0] = '2';
console.log(arr1); //2,2,3
console.log(arr2); //2,2,3
阅读全文 »

发表于 | 分类于 | 阅读次数:

原文：Sharing sessionStorage between tabs for secure multi-tab authentication

使用场景

在web项目中，当用户重开一个标签页的时候，需要重新登录。造成这种情况的是登录的标识符存取在session中，标签页之间没有共享session数据。

解决方式

发现国外开发者解决的方式是监听storage事件，利用localStorage事件来跨标签页共享sessionStorage。
在线例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// Removed IE support in this demo for the sake of simplicity
// 移除对IE浏览器的支持

(function () {

  if (!sessionStorage.length) {
    // Ask other tabs for session storage
    // 新开的标签页触发这个事件
    
    localStorage.setItem('getSessionStorage', Date.now());
  };

  window.addEventListener('storage', function (event) {

    //console.log('storage event', event);
    
    if (event.key == 'getSessionStorage') {
      // Some tab asked for the sessionStorage -> send it
      // 已存在的标签页会接收到这个事件
      
      localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
      localStorage.removeItem('sessionStorage');

    } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
      // sessionStorage is empty -> fill it
      // 新开启的标签页会收到这个事件
      
      var data = JSON.parse(event.newValue), value;

      for (key in data) {
        sessionStorage.setItem(key, data[key]);
      }

      showSessionStorage();
    }
  });

发表于 | 分类于 | 阅读次数:

应用场景

在使用vue的框架中，常常出现提交完表单之后，data对象中表单的字段的数据还是存在的，做重复表单提交的过程中不是很友好，如果两个表单中存在公用的组件（组件C），如果这个表单（表单A）的数据没有清空，再跳转到另外一个表单（表单B）的时候，表单A上的组件C上的数据会出现到表单B的组件C上。

解决方式

参考vue的API文档，

阅读全文 »

发表于 | 分类于 | 阅读次数:

本地运行跨域问题

通过webpack-dev-server的proxy来解决api接口请求跨域的问题，在dev的index.js文件中，设置proxy

1
2
3
4
5
6
7
8
9
proxyTable: {
  '/api': {
    target: 'http://baidu.com/',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  }
},

在axios的中设置

1
axios.defaults.baseURL = "/api";
阅读全文 »

发表于 | 分类于 ， | 阅读次数:

安装nrm

开发的npm registry 管理工具 nrm, 能够查看和切换当前使用的registry。github

1
$ npm install -g nrm

查看当前使用的NPM registry

1
2
3
4
5
6
7
8
9
$ nrm ls

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
阅读全文 »