×

VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(一)

96
言墨儿
2017.02.26 22:15* 字数 1977

推荐我的vue教程:VUE系列教程目录

如果说上面的温馨连接提示,带你们进入了VUE的大门,那么,今天我们就玩一个绝活,在网页端使用VUE框架配合indexDB数据库来实现zip文件的在线预览,这个功能对于VUE的要求不高,但是对于你前端的知识的考量却是上等甚至是顶尖级别的逻辑思维。所以我得手把手的教会你们,请做好被虐的准备。

温馨连接提示:vue中级之路篇系列教程:
VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(一)
VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(二)
VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(三)

前言

这里我准备了几个东西,需要大家在开始前进行相关的操作:

首先我的项目是存放在github上的,各位要是学习的话请安装git这个版本控制器,如果不知道github是干什么的怎么用的,请参考完我的博客:git+github的使用-最简单的入门教程,再来练这个项目,因为git是每个开发者必须会的,如果你不懂git,那么你永远都不知道团队开发为何物。我的github的项目是:VUE在线预览zip压缩文件。或者你使用我的百度云盘:VUE在线预览zip压缩文件,但是我不保证我会实时更新百度云盘所以请尽量使用git。

创建一个文件夹,然后打开你的git,执行

git clone https://github.com/nongshuqiner/VUEOnlineZIP.git

然后执行npm install,这个有些慢,要耐心等待。

如果特别慢,ctrl + c暂停它,使用上淘宝镜像安装

npm install -g cnpm --registry=http://registry.npm.taobao.org

完后继续执行npm install,安装完成以后,不能执行npm run dev,因为会报错(当然你可以先试试执行npm run dev,如果没有报错则无视下面),报错了是因为没有安装上node-sass,所以先执行:

cnpm install node-sass -D

等安装上node-sass,再执行npm run dev

如果跑起来了没有报错,则证明初始项目的构建已经完成了。

项目简单描述

我们需要实现VUE在线预览zip压缩文件,在开始做之前,得先想我们要做成什么样子?都有什么功能?我们是用什么样的实现方式?

这里我们一起发挥思维:

  1. 请求问题:应该是通过接口请求需要预览的zip压缩文件,但是我们做的例子是本地的,那就地本地请求(当然可以API网上请求啦)。

  2. 读取问题:请求到zip压缩文件然后该怎么办?因为压缩文件比较大,所以我们不能直接在网页上进行解析,不然网页就会崩溃,严重的电脑都会死机,这样的话我们得有一种方式把它暂时存储起来,然后进行需要的信息的分批渲染,大伙一定会问用什么把它暂时存起来?分批渲染怎么弄?这里我使用的存储方式是indexDB(一个html5出现的本地存储方式)和localStorage,大伙如果不明白这是什么东西该怎么用,可以去看看我的博客:web前端-在迷惘中的探索HTML5(二)本地存储之IndexDB,不然下面使用到它你们会措手不及的。关于分批渲染因为是压缩文件在线预览,所以我们的项目要做的肯定是有目录的,既然有目录,我在渲染时只需要先把目录信息读出来,予以展示,而里面的具体的比如图片啊,表格啊,我们在具体需要展示的时候再进行读取。

  3. 目录构建问题:说到这大家一定会问,那目录怎么构建呢?这里我给大家附上项目完成后的截图大家先看看我们的需求,然后后面我再具体的需要应用时进行说明,如图:




看完项目完成后的截图,大伙肯定兴趣倍增,跃跃欲试,那么就开始吧

项目的准备工作

安装我们需要的包

饿了么组件

我们需要使用到eleme饿了么组件:饿了么组件

进入我放置的连接我们就进入到饿了么组件的官网,如图:

我们对其进行安装:

npm i element-ui -S
jszip压缩包工具

安装完eleme饿了么组件包后,我们还需要压缩包分析工具:jszip。因为这个网站是英文的我也看不懂,所以英语好的去尝试尝试看看。

后面我们会对它进行详解,这里我们只需要安装它的包,进入淘宝npm镜像,然后在里面搜jszip,然后出来一堆,如图:

我们进入左边第一个,进去后看看,如果你看到的包含如下信息:

然后就通过它提示的命令进行安装:

cnpm install jszip
store一种本地localStorage管理包

我们即使用localStorage,也使用store.js来进行本地存储。

cnpm install store -D

到此我们需要的包就安装完成了

构建我们的目录,初始化我们的页面

首先把我们的目录构建成下面图片的样子:

然后修改config/routes.js,把它变为:

// 子路由索引
import childrouter from '../frame/childrouter.vue'
// zip压缩下载预览
import property from '../page/property/index.vue'
// zip压缩下载预览
import uploadreview from '../page/property/upload_review.vue'
import uploadreviewdetails from '../page/property/upload_review_details.vue'
import uploadreviewfile from '../page/property/upload_review_file.vue'

// 配置路由
export default [
  {
    path: '/',
    component: property
  },
  { // zip压缩下载预览
    path: '/property/',
    component: childrouter,
    children: [
      {path: 'uploadreview', component: uploadreview}, // zip压缩下载预览
      {path: 'uploadreviewdetails', component: uploadreviewdetails}, // zip压缩下载预览深入
      {path: 'uploadreviewfile', component: uploadreviewfile} // zip压缩下载预览文件
    ]
  }
]

开始初始化我们的页面,修改App.vue

<template>
  <div id="app">
    <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view class="view" keep-alive transition transition-mode="out-in"></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
  @import "./style/style";
</style>

再修改frame/childrouter.vue,把它变为:

<template>
  <div>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
  components: {
  }
}
</script>

修改page/property/index.vue,把它变为:

<template>
  <div>
    <router-link class="more_icon" :to="'property/uploadreview'">
      <el-button type="primary">在线预览</el-button>
    </router-link>
  </div>
</template>
<script>
export default {
}
</script>

/page/property/upload_review.vue文件变为

<template>
  <div>
    upload_review
  </div>
</template>
<script>
export default {
}
</script>

/page/property/upload_review_details.vue文件变为

<template>
  <div>
    upload_review_details
  </div>
</template>
<script>
export default {
}
</script>

/page/property/upload_review_file.vue文件变为

<template>
  <div>
    upload_review_file
  </div>
</template>
<script>
export default {
}
</script>

到了这里初始化我们的页面,构建我们的项目就完成了,我们打开页面,打开控制台,发现竟然有个错误,如图:

这是因为我们没有引入饿了么组件,于是打开mian.js,在里面添加上这句话:

// 引用ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)

既然饿了么组件得引用,那么store本地存储也得引入

// 引入本地存储
import store from 'store'
Vue.prototype.$store = store

mian.js就变成了这样:

// 1.引用 vue 没什么要说的
import Vue from 'vue'
// 3.引用路由
import VueRouter from 'vue-router'
// 光引用不成,还得使用
Vue.use(VueRouter)
// 2.入口文件为 src/App.vue 文件 所以要引用
import App from './App.vue'
// 4.引用路由配置文件
import routes from './config/routes'
// 5.引用API文件
import api from './api/api'
// 6.将API方法绑定到全局
Vue.prototype.$api = api
// 使用配置文件规则
const router = new VueRouter({
  routes
})

// 引入本地存储
import store from 'store'
Vue.prototype.$store = store

// 引用ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  router,
  el: '#app',
  render: (h) => h(App)
})

你的页面上的饿了么组件的效果就会显示出来,如图:

至此项目的准备工作也就完成了,接下来就是挽起胳膊干大活了

项目实战前言

由于我们要用到:JSZip,以及store.js,所以希望各位小伙伴在项目开始前好好的看看这两个的使用,然后为我们的实战做好准备。

如果有看不懂的地方可以在评论区里@我,本来打算一次性的献上,但是考虑到有些懒惰的人拿我的东西招摇撞骗,于是决定暂时推迟一下,同时大家也想想如果是你们,你们会怎样做,先去踩踩坑,不踩坑的程序员不是好程序员,等你们踩坑了,我再告诉你们究竟怎么做,这样才能锻炼你们自己的思维。

重要说明:就在这两天我会把实战慢慢的教授给大家,请耐心等待。

提示:在最近几天我会慢慢附上VUE系列教程的其他后续篇幅,后面还有精彩敬请期待,请大家关注我的专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。

日记本
Web note ad 1