图书商城项目练习①管理后台Vue2/ElementUI

本系列文章是为学习Vue的项目练习笔记，尽量详细记录一下一个完整项目的开发过程。面向初学者，本人也是初学者，搬砖技术还不成熟。项目在技术上前端为主，包含一些后端代码，从基础的数据库（Sqlite）、到后端服务Node.js（Express），再到Web端的Vue，包含服务端、管理后台、商城网站、小程序/App，分为下面多个篇文档。

系列目录：

• 图书商城Vue+Element+Node+TS项目练习
• 图书商城①管理后台Vue2+ElementUI
• 图书商城②后端服务Node+Express+Sqlite
• 未完成：商城网站Vue3+TS、商城APP端Vue3+TS+uniapp

---

00、管理后台Vue2+ElementUI

这是一个比较典型的管理后台练习项目，包含登录、框架页、导航路由、导航标签、数据管理、字典管理等基础功能。管理后台的业务大多是数据管理CRUD功能，该项目只是是简单实现了几个模块。同时针对CRUD，整理了一个模板template。

技术路线：

• Vue v2.*
• ElementUI v2.*

相关组件：

• vuex：状态管理
• vue-router：前端路由
• axios：HTTP调用
• echarts：图表组件，按需定制
• i18n：多语言国际化vue-i18nv8.*版本
• @wangeditor：富文本编辑器
• Less：CSS预处理器/语言

源代码地址：Github / KWebNote，Gitee / KWebNote，管理后台代码在目录book_admin下。

在线体验地址：http://kanding.gitee.io/kwebnote （任意用户名、密码。通过gitee静态页面Gitee Pages部署的，所以这里部署的版本是写了个mock模拟api，路由用的hash模式）。

---

01、创建项目/准备

创建图书管理后台项目“book_admin”，基于@vue/cli，通过其vue ui管理工具，可视化操作创建项目。

• 选择项目目录，开始创建项目。
• 可以选择内置的多种预设模式，也可选择“手动”模式，按需设置项目的详细规则。

• 在手动模式下，选择需要的组件，如Vuex、Vue-Router、Less等。
• 更多@vue/cli参考《Vue项目工程@vue/cli入门》

vue创建的项目已经包含了一个基础的架子了，如下图，主html页面文件“index.html”，入口JS文件“main.js”，入口Vue文件“App.vue”。

---

02、主页面/框架页面

管理后端是SPA单页应用，创建主框架页面“Main.vue”，登录后的所有内容都在这个主页面内呈现和管理。页面视图关系如下图：

2.1、Main.vue

因此，主页面就比较重要，是搬砖的基座，实际效果和布局结构图如下：

• Header：头部区域，包含Logo、标签栏（存放打开的页面，类似浏览器的多页签）、系统按钮（最右侧区域）。
• 路由菜单：系统导航菜单，数据来自路由配置信息。
• 面包屑：内容区域当前视图的路由信息。
• 内容区域：当前视图内容呈现区域。
  • 缓存<keep-alive>，配合多标签组件视图缓存，切换标签后视图的状态会被保持。
  • 切换动画<transition>，切换内容时的动画效果。
  • 内容滚动处理：内容区域的高度、宽度自适应铺满，如果内容超出该区域，则显示滚动条，不会导致整个页面出现滚动条。
• Footer：底部区域，好像也没啥用，先放这吧！

<template>
  <el-container style="height:100%">
    <el-container class="main-aside">
      <!-- 左侧 ：logo+导航菜单 -->
      <el-aside :width="config.menuCollapse?'auto':'200px'">
        <MenuSidebar />
      </el-aside>

      <!-- 右侧 ：头部+主内容-->
      <el-container>
        <!-- 头部 -->
        <el-header :style="config.thema" class="header">
          <!-- 标签工具栏 -->
          <div style="flex:1;overflow:hidden">
            <TabsBar ref="tabsBar"></TabsBar>
          </div>
        	<!-- 右侧的系统操作按钮 -->
          <i class="el-icon-setting h-button" v-on:click="$refs.userConfig.show()" title="系统设置"></i>
          <el-dropdown class="header-userbox" @command="handleCommand">
            <span>
              <img :src="$api.URL.proxy+'/file/f1.jpg'" alt="头像" />
              [ {{$store.state.user.name}} ]
              <i class="el-icon-arrow-down el-icon--right" style="font-size:12px"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="pwd">修改密码</el-dropdown-item>
              <el-dropdown-item command="about">
                <i class="el-icon-info"></i>关于
              </el-dropdown-item>
              <el-dropdown-item command="user">
                <i class="el-icon-user-solid"></i>个人中心
              </el-dropdown-item>
              <el-divider></el-divider>
              <el-dropdown-item command="logout" icon="el-icon-circle-close">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <!-- 主内容区域 -->
        <el-main class="main-wrapper">
          <!-- 面包屑 -->
          <div class="breadcrumb-bar">
            <el-button type="text"
              :icon="config.menuCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
              v-on:click="config.menuCollapse=!config.menuCollapse" ></el-button>
            <el-breadcrumb separator="/" style="display:inlne-block">
              <el-breadcrumb-item v-for="r in $route.matched" :key="r.name">{{r.meta?.lang ? $t('menu.' + r.meta.lang) : r.meta?.title}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- 页面内容的容器 -->
          <div class="main view-scroll">
            <!-- 加了切换动画、保存页面状态 -->
            <transition :name="config.routerAnimation?'fade-transform':''" mode="out-in">
              <keep-alive :include="cacheNames">
                <router-view></router-view>
              </keep-alive>
            </transition>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <!-- footer -->
    <el-footer height="30px">{{$consts.footer}}</el-footer>
    <UserConfig ref="userConfig"></UserConfig>
  </el-container>
</template>

2.2、导航菜单&路由

每个后台系统都会有导航菜单，支持多级展示、可收缩，效果如下图：

‍♂️实现过程：

1、路由的配置：这里用的是本地路由（vue-router中的路由配置信息），实际项目中路由可后台管理，或者本地+后台结合。本地路由配置“routes.js”详见Github / KWebNote。

import constants from '@/assets/constants'
import Vue from 'vue'
import VueRouter from 'vue-router'
//路由配置
import baseRoutes from './routes'
//注册路由插件
Vue.use(VueRouter)
// 创建路由
const router = new VueRouter({
  mode: 'history',           //模式
  base: process.env.BASE_URL,
  routes: baseRoutes,        //路由配置
})

// 路由全局守卫-导航前，登录token判断
router.beforeEach((to, from, next) => {
  if (to.path === '/login')
    return next();
  // 除开登录页面，其他页面都验证token，如果没有token则跳转到登录页面
  const token = sessionStorage.getItem('admin_token');
  if (!token)
    return next('/login');
  else
    next();
})
router.afterEach((to, from) => {
  //更新网页标题
  document.title = constants.sysName + '-' + to.meta.title;
})

404页面的配置：路由的匹配是从上而下的，404页面路由放到最后即可，然后路径使用通配符匹配所有地址，{ path: '*', component: 404 }

2、导航菜单组件：创建“MenuSidebar.vue”，用<el-menu>组件显示多级菜单，启用路由导航router，菜单的数据就是来自前面的路由。

3、树形菜单：导航菜单项-递归，菜单项用一个“MenuItem.vue”组件来实现递归路由树，如果路由还有子节点children，则递归调用组件自身。

<template>
  <el-menu-item v-if="!hasChildren" :index="item.path">
    <i :class="item.meta.icon"></i>
    <!-- 名称用title插槽 -->
    <span slot="title">{{title(item)}}</span>
  </el-menu-item>
  <el-submenu v-else :index="item.path">
    <template slot="title">
      <i :class="item.meta.icon"></i>
      <span slot="title">{{title(item)}}</span>
    </template>
    <MenuItem v-for="child in children" :item="child" :key="child.path"></MenuItem>
  </el-submenu>
</template>
<script>
export default {
  name: 'MenuItem',
  props: ['item'],
  computed: {
    children() {
      return this.item?.children?.filter(s => !s.hidden);
    },
    hasChildren() {
      return this.item?.children?.length > 0;
    },
  },
  methods: {
    title(item) {
      return item.meta?.lang ? this.$t('menu.' + item.meta.lang) : item.meta?.title;
    }
  }
}
</script>

2.3、配置路由动画

就是在路由切换页面视图的时候，有一个过渡动画效果，如下图。

主要是使用Vue的<transition>组件来实现过渡动画，设置其name和对应CSS动画即可，可参考另外一篇《Vue2快速上门(2)-模板语法 / Vue动画》。

<transition :name="config.routerAnimation?'fade-transform':''" mode="out-in">
  <keep-alive :include="cacheNames">
    <router-view></router-view>
  </keep-alive>
</transition>

  <style>
// 路由切换动画
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
</style>

注意动画模式mode="out-in"，避免布局变更引起的显示异常。name值是用于动画CSS样式的类名，这里的的name用了一个用户配置属性，目的是可以配置是否开启路由转场动画。

2.4、多标签工具栏

如下效果图，类似Chrome浏览器的多标签效果，打开的路由视图标题显示在标签栏，可以刷新、关闭、切换。切换时会保留视图状态，这样就可以很方便的多标签操作了。

方案设计：

• 监测路由变化，记录打开的页面路由，保存在vuex的store中。同时记录打开的页面名称，用于<keep-alive>的include实现定向路由缓存，过滤不需要缓存的组件，也是实现视图刷新的关键。
• 显示缓存的路由列表，就是看到的标签栏。
• 关闭按钮，激活的路由视图显示关闭按钮，关闭后自动路由到下一个页面/标签。
• 固定的标签：对于如“主页”的路由固定在标签栏（会在路由信息中配置），在初始化的时候就显示在标签栏，固定的标签不支持关闭。
• 右键菜单功能：刷新、关闭、关闭其他、关闭所有，更新缓存的路由列表。

‍♂️实现过程：

1、在vuex中添加一个子模块“tabBars.js”，单独管理标签的状态信息。提供缓存路由列表的操作方法：添加、删除、删除其他、删除所有、清空。

export default {
  namespaced: true,
  state: {
    cacheRoutes: [], //缓存的路由，用于标签栏使用
    cacheNames: [],  //缓存的打开的路由Name，用于Keep-alive的缓存白名单
  },
  mutations: {
    add(state, obj) {
      if (!state.cacheRoutes.some(s => s.path === obj.path)) {
        //添加打开的路由，只需要path、name、mata
        state.cacheRoutes.push({ path: obj.path, name: obj.name, meta: obj.meta });
        state.cacheNames = state.cacheRoutes.map(s => s.name);
      }
    },
    remove(state, obj) {
      const i = state.cacheRoutes.findIndex(s => s.path === obj.path);
      if (i < 0)
        return;
      state.cacheRoutes.splice(i, 1);
      state.cacheNames = state.cacheRoutes.map(s => s.name);
    },
    removeName(state, obj) {
      //只移除缓存名字
      const i = state.cacheNames.findIndex(s => s === obj.name);
      if (i < 0)
        return;
      state.cacheNames.splice(i, 1);
    },
  },
}

2、路由信息配置，来自vue-router的路由配置，添加了几个自定义的属性。

• 注意name和组件内部的name定义应该一致，会在<keep-alive :include="cacheNames">中使用。
• meta.title：标题
• meta.icon：icon图标
• meta.affix：是否固定，固定在标签栏

{
  path: '/home',
    name: 'Home',
    meta: { title: '首页', lang: 'home', icon: 'el-icon-s-home', affix: true },
  	component: () => import('@/views/Home.vue'),
},
{
  path: '/books',
  name: 'Books',
  meta: { title: '图书管理', lang: 'book', icon: 'el-icon-notebook-2' },
  component: () => import('@/views/book/Books.vue'),
},

3、创建标签栏组件TabsBar.vue，核心功能、代码都在这里，标签的显示、功能操作，包括右键菜单。完整代码：Github / KWebNote

<template>
  <div class="tabs-bar">
    <router-link
      class="item"
      v-for="r in cachedRoutes"
      :to="r"
      :key="r.path"
      :class="isActive(r)?'active':''"
      @contextmenu.prevent.native="showMenu(r,$event)"
      >
      <i :class="r.meta.icon"></i>
      {{r.meta?.lang ? $t('menu.' + r.meta.lang) : r.meta?.title}}
      <i class="el-icon-close close" v-if="!isAffix(r)" @click.prevent.stop="handleClose(r)"></i>
    </router-link>

    <!-- 页签按钮的右键菜单 -->
    <el-card class="menu" v-show="tagMenu.visible" :style="{left:tagMenu.left+'px',top:tagMenu.top+'px'}">
      <ul>
        <li @click="refresh(selectedTag)" v-show="isActive(selectedTag)">
          <i class="el-icon-refresh"></i> 刷新
        </li>
        <li @click="handleClose()" v-show="!isAffix(selectedTag)">
          <i class="el-icon-close"></i> 关闭
        </li>
        <li @click="handleCloseOther()">
          <i class="el-icon-circle-close"></i> 关闭其他
        </li>
        <li @click="handleCloseAll">
          <i class="el-icon-error"></i> 关闭所有
        </li>
      </ul>
    </el-card>
  </div>
</template>

注意：这里的标签关闭按钮，一定要加上修饰符“.prevent.stop”，阻止冒泡、及其他事件，因为标签本身也是有点击事件的，开始没加，莫名其妙没有跳转，被卡了好半天。

<i class="el-icon-close close" v-if="!isAffix(r)" @click.prevent.stop="handleClose(r)"></i>

复习一下：

修饰符	描述
.stop	调用 event.stopPropagation()，停止向上冒泡（propagation /ˌprɒpəˈɡeɪʃn/ 传播）
.prevent	调用 event.preventDefault()，取消默认事件行为，如checkbox、<a>的默认事件行为，不影响冒泡

刷新怎么实现？

刷新的实现稍微复杂一点点，因为这是本地路由，不能刷新整个页面，而当前路由视图是用了<keep-alive>缓存的。因此实现刷新的的基本过程：

• 去除缓存并关闭路由：去除<keep-alive>的缓存，就是从其include白名单中移除。
• 重新打开路由视图。

为了视觉效果更佳，这里用一个中间页面进行跳转，效果如下：

设计了一个中级页面Redirect.vue，作用只有一个，就是用于跳转，跳转目标用路由参数传递。

// 用于中转跳转的页面
<script>
export default {
  created() {
    this.$router.replace({ path: '/' + this.$route.params.path, query: this.$route.query });
  },
  render: function (h) {
    return h()
  }
}
</script>

需要注意中间页面，不缓存、不显示标签栏。刷新时，移除缓存，然后重定向到当前页面，重新加载当前页面。

refresh(tag) {
  //移除去掉缓存，再重定向跳转到当前页面
  this.$store.commit('tabBars/removeName', this.$route);
  this.$nextTick(() => {
    this.$router.replace({
      path: '/redirect' + tag.path
    })
  })
},

2.5、用户配置本地化保存

系统菜单“用户设置”，实现用户自定义的一些个性化配置，并本地存储、加载。保存到localStorage中，这样下次进入系统可以保持个性化配置了。

效果如上图，需求分析：

• 主题样式，只实现了标题栏颜色样式，前景色color、背景色backgroundColor，应用在标题栏Header的样式上。
• 路由切换动画是否开启。
• 多语言设置，实现了中文、英文语言，详见下一章节。
• 导航菜单的折叠状态。
• 用户配置保存到本地localStorage中，系统初始化时从localStorage加载用户配置。

‍♂️实现过程：

1、创建一个单独的vue组件“UserConfig.vue”管理用户的设置项，内部用抽屉<el-drawer>来实现从右侧滑出的效果。

2、监听数据的变化（深度监听），如果变化则保存用户配置数据到localStorage，同时更新多语言的配置项。

created() {
  //监听配置变更，持久化存储到本地
  this.$watch('config', () => {
    localStorage.setItem('admin-userconfig', JSON.stringify(this.config));
    //手动更新语言
    this.$i18n.locale = this.config.language;
  }, { deep: true })
},

3、在main.js中添加初始化代码，从localStorage加载上次保存的用户配置信息。

created: function () {
  LoadUserConfig();
}
function LoadUserConfig() {
  let vstr = localStorage.getItem('admin-userconfig');
  if (vstr) {
    Object.assign(userConfig, JSON.parse(vstr));
    userConfig.thema = themas.filter(s => s.name == userConfig.thema.name)[0];
    //语言
    i18n.locale = userConfig.language;
  }

2.6、国际化多语言

实现多语言（国际化）的最主流、成熟的方案就是i18n（internationalization /ˌɪntəˌnæʃnəlaɪˈzeɪʃn/ 国际化，首字母i、尾字母n加中间的18个字母），官方文档，Vue中使用vue-i18n插件。

安装i18n插件，Vue2.*不太兼容最新版的v9.*，安装8.*版本：

vue add i18n
# 或者
cnpm i -S vue-i18n@8.0.0

安装完成后，“package.json”文件中就有了"vue-i18n": "^8.26.3"。

vue add i18n方式安装，除了安装插件，还把基本的配置、语言文件都准备好了，属于完成了简装可以拧包入住了。npm指令安装只会安装插件，需要自己完成配置和注册。

配置i18n

i18n的配置、使用还是比较简单的，先配置语言信息，然后在代码（JavaScript、Vue模板）中使用。

|- src
  |-lang
    |-index.js   # 配置i18n
    |-lang-en.js # 英文语言资源
    |-lang-cn.js # 中文语言资源

1、分别创建不同的语言包文件，语言信息为一个键值结构的JSON对象，键为语言项的key，值为显示的文本内容。结构可以按照项目情况自行定义，叶子节点属性是一个语言项。

2、注册插件，配置i18n实例。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import lang_zhcn from './lang-cn'
import lang_en from './lang-en'
//注册
Vue.use(VueI18n);
//申明i18n
const i18n = new VueI18n({
  locale: 'en',     //选中的语言
  messages: {
    en: {
      ...lang_en,   //英文语言配置
    },
    zh: {
      ...lang_zhcn, //中文语言配置
    }
  }
})

• locale属性为当前选中的语言，更改值实现语言切换。
• Element的国际化，按照官方文档配置即可：element-国际化

3、在main.js中引入，并注入到Vue根实例中。

import i18n from './lang'
new Vue({
  router,
  store,
  i18n,
}).$mount('#app')

使用

使用就简单了，使用i18n提供的方法$t('key')即可。

<p class="title">{{$t('home.user')}}</p>
//JS
title(item) {
  return item.meta?.lang ? this.$t('menu.' + item.meta.lang) : item.meta?.title;
}

---

03、登录页面/Login.vue

登录页面主要就是用户名、密码的表单，然后调用后端登录api接口验证、获得token完成登录。

• 表单规则：表单就需要用到输入验证规则rules，element表单验证。

{
  user: { name: '', pwd: '' },
  rules: {
    name: [{ required: true, message: '用户名不能为空' }, { min: 3, max: 8, message: "长度应为3-8" }],
    pwd: [{ required: true, message: '密码不能为空' }, { min: 3, max: 8, message: "长度应为3-8" }],
  },
}

• 表单验证：表单验证的执行是在表单<el-form>组件上调用validate()方法，因此需要绑定model对象，在表单项<el-form-item>``prop上绑定model对象字段名。

this.$refs.userForm.validate((valid, mes) => {
  if (!valid) {
    this.$message.error('输入有误，请修改后重新提交！');
    return;
  }
  //提交...

• 记住用户名：保存到本地localStorage中，加载该页面的时候读取。
• 登录成功：获取并保存token信息，保存在vuex的store中或本地sessionStorage，然后跳转到主页面 this.$router.push('/home')。

---

04、首页/Home.vue

管理类系统大概率都有一个首页Home.vue，作为默认页面，展示系统的一些概况、用户的一些统计信息、通知信息等。为保持各个“豆腐块”风格一致，推荐用<el-card>组件包装内容。

用到了图表组件 echarts，安装最新版本：

$ cnpm install echarts -S

// 引入echarts
import * as echarts from 'echarts'
// 在Vue原型上挂载$echarts，在vue示例中this.$echarts
Vue.prototype.$echarts = echarts

这里只用了2个图表，却引入了所有的echarts组件，打包后的JS文件6M多，实在太大了。通过官方提供的在线定制功能按需定制JS文件，然后引入该JS文件即可。

---

05、图书管理模块

图书管理为图书的综合管理，包含增、删、改、查，是管理后台的典型功能，如用户管理、商品管理、活动管理、公告管理等等都类似。

功能结构如下图：

代码结构如下图，图书管理模块包含多个页面，其中“Books.vue”为入口页面。

5.1、图书列表

• 图书列表由表格<el-table>和分页<el-pagination>组成。统一设计了查询结构，分页组件做了一个简单的封装。
• 表格中的状态用到了一个自己写的枚举组件，详见《前端枚举enum的应用(Element)封装》。
• 图书详情用了抽屉组件<el-drawer>，点击名称从右侧弹出。
• 图书的新增、修改用的弹框组件<el-dialog>，默认的BookDialog是弹出带遮罩的模态框，额外实现了一个Plus版本BookDialogPlus（详见下文）。

5.2、分页组件

分页是列表常用组件，Element-UI提供了分页组件<el-pagination>，在此基础上做一个简单的封装，统一规范、简化使用。

️封装了些什么？

• 统一风格样式、布局，也方便统一修改。
• 统一分页大小配置page-sizes="[5, 10, 20, 50]"
• 统一分页事件pagination，统一处理了页码、页数的变更。

<template>
  <el-pagination
    style="text-align:right;margin:6px 2px" background
    :total="total" :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
    @current-change="pageChanged" @size-change="pageSizeChanged"
    layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
</template>
<script>
  export default {
    props: {
      //总数
      total: { type: Number, default: 0, },
      //页码，外部绑定，加修饰符.sync
      size: { type: Number, default: 10, },
      // 当前页码，外部绑定，加修饰符.sync
      index: { type: Number, default: 1, }
    },
    computed: {
      // 用修饰符“.sync”来实现更新父组件的值
      currentPage: {
        get() { return this.index },
        set(val) { this.$emit('update:index', val) }
      },
      pageSize: {
        get() { return this.size },
        set(val) { this.$emit('update:size', val) }
      }
    },
    methods: {
      pageSizeChanged(v) {
        // 修改父组件值
        this.$emit('update:size', v);
        // 触发分页事件
        this.$emit('pagination');
      },
      pageChanged(v) {
        // 修改父组件值
        this.$emit('update:index', v);
        // 触发分页事件
        this.$emit('pagination');
      },
    }
  }
</script>

这里的页行数size、页码index，是外部传入的的prop值，但内部也会修改。导致了“双重绑定”更新，这就需要用到.sync修饰符了，其实就是基于事件通知实现的，可参考官网文档。

• 子组件内部通过Vue的事件this.$emit('update:myPropName', v);触发变更通知。
• 外部绑定的时候用.sync修饰符，.sync实现了更新update事件的监听和赋值，需注意不支持表达式，只能用property名。

使用：

<Pagination :total="total" :size.sync="search.size" :index.sync="search.index" @pagination="loadData"></Pagination>

5.3、图书编辑Plus

如下效果图，相比常规的模态框，只是遮住了当前视图（图书管理），不影响其他功能操作。

用的依然是弹框组件<el-dialog>，在此基础上做了一点点调整。完整代码见 Github / KWebNote。

• 取消遮罩层:modal="false"。
• 操作按钮放到了标题栏上。
• 通过样式让弹层刚好覆盖到当前视图。

.dialogPlus {
  position: absolute;
  overflow: inherit;
  .el-dialog {
    min-height: 100% !important;
    max-height: 100%;
    display: flex;
    flex-flow: column;
    .el-dialog__header {
      padding: 4px 10px;
    }
    .el-dialog__body {
      overflow: auto;
      max-height: 100%;
    }
  }
}

5.4、图片上传upLoad

图片上传使用文件上传组件<el-upload>，这里涉及一些基础通用操作，因此针对图片上传封装为一个组件“ImgUpload.vue”，效果如下：

• 上传接口action，后端文件接口实现详见后端章节。
• 文件格式accept="image/*"，这里的accept值为文件的类型。
• 文件数量limit，配置最大支持的文件个数，钩子on-exceed超过文件数量限制时触发。当达到限制时，隐藏上传按钮。
• 上传前before-upload上传前的钩子，可用来验证文件的合法性。
• 上传成功on-success文件上传成功的钩子，可用来同步上传的文件资源。
• 文件信息prop."value"，组件中定义了一个value的props，接受父组件传入的已有文件集合（字符串，多个逗号隔开），组件内文件变化通过this.$emit('input',nval)更新value值。
• 预览：用一个<el-dialog>来展示预览图。

<template>
  <div>
    <el-upload
      ref="upload" :action="$api.URL.upload" list-type="picture-card"
      :multiple="true" accept="image/*" name="file"
      :limit="limit" :class="{hide:uploadHide}" :file-list="fileList"
      :on-exceed="onOutOfLimit" :on-success="handleSuccess"
      :on-error="handleError" :before-upload="handeleBefore" >
      <!-- 上传按钮 -->
      <i slot="default" class="el-icon-plus"></i>
      <!-- 提示内容 -->
      <div slot="tip" style="font-size:0.8em">支持最多{{limit}}张图片，每张图片不超过{{maxSize}}Kb</div>
      <!-- file模板 -->
      <div slot="file" slot-scope="{file}" class="imgbox" :class="{success:file.status}">
        <!-- 缩略图的路径，如果相对路径则添加代理前缀-->
        <img :src="proxyURL(file.url)" alt />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <!-- 嵌套的dialog，需要设置append-to-body，嵌入自身到body元素 -->
    <el-dialog :visible.sync="dialogVisible" append-to-body custom-class="imgdialog">
      <img :src="proxyURL(dialogImageUrl)" alt style="max-width: 100%;max-heigt: 100%;object-fit:contain" />
    </el-dialog>
  </div>
</template>

再加上一点点JS和CSS就完成了，完整代码见 Github / KWebNote。。使用：

import ImgUpload from '@/components/ImgUpload.vue'

<ImgUpload v-model="book.imgs"></ImgUpload>

5.5、富文本@wangeditor

wangEditor 是一个轻量级 web 富文本编辑器，配置方便，使用简单。安装vue版本的“@wangeditor/editor-for-vue”：$ cnpm i @wangeditor/editor-for-vue -S。然后使用参考官方vue使用文档，Ctrl+CV即可。

要实现图片、视频上传还需要自己配置，因此就基于@wangeditor封装了一个富文本编辑器Editor.vue，效果如下。

• 调整了工具栏，排除了一些不需要的。
• 配置了图片上传服务，@wangeditor支持粘贴图片。

配置工具栏

默认提供的工具栏功能比较丰富，如果需要调整，则需要先获取工具栏的toolbarKeys。引入@wangeditor/editor，在编辑器组件准备完成后获取toolbarKeys，如updated()。

import { DomEditor } from '@wangeditor/editor'

updated() {
  ////在这里获取工具栏的配置toolbarKeys，用于自定义配置工具栏
  const toolbar = DomEditor.getToolbar(this.editor)
  console.log(toolbar.getConfig().toolbarKeys)
},

获取到的keys如下（整理后）：

[
  "headerSelect", "blockquote",
  "|",
  "bold", "underline", "italic",
  {
    "key": "group-more-style", "title": "更多", "iconSvg": "",
    "menuKeys": [ "through", "code", "sup", "sub", "clearStyle" ]
  },
  "color", "bgColor",
  "|",
  "fontSize", "fontFamily", "lineHeight",
  "|",
  "bulletedList", "numberedList", "todo",
  {
    "key": "group-justify", "title": "对齐", "iconSvg": "",
    "menuKeys": [ "justifyLeft", "justifyRight", "justifyCenter", "justifyJustify" ]
  },
  {
    "key": "group-indent", "title": "缩进", "iconSvg": "",
    "menuKeys": [ "indent", "delIndent" ]
  },
  "|",
  "emotion", "insertLink",
  {
    "key": "group-image", "title": "图片", "iconSvg": "",
    "menuKeys": [ "insertImage", "uploadImage" ]
  },
  {
    "key": "group-video",
    "title": "视频", "iconSvg": "",
    "menuKeys": [ "insertVideo", "uploadVideo" ]
  },
  "insertTable", "codeBlock", "divider",
  "|",
  "undo", "redo", "|", "fullScreen"
]

通过toolbarConfig.excludeKeys配置不需要的工具栏按钮：

data() {
  return {
    editor: null,
    toolbarConfig: { excludeKeys: ['group-video', 'emotion', 'lineHeight'] },
    editorConfig: { placeholder: '请输入内容...', maxLength: 8000 },
    mode: 'default', // default simple
  }
},

完整代码见 Github / KWebNote。

配置图片上传

在Editor的配置项editorConfig中配置图片上传参数，如下代码：

editorConfig: {
  placeholder: '请输入内容...', maxLength: 8000,
    MENU_CONF: {
     uploadImage: { //配置图片上传
      server: this.$api.URL.upload,  //后端文件上传地址
        fieldName: 'file', //表单参数名，和后端一致
        maxFileSize: 2 * 2048 * 2048,  //最大文件大小
        maxNumberOfFiles: 1, //每次文件个数
        allowedFileTypes: ['image/*'], //文件类型：图片
        timeout: 9 * 1000,  //超时时长
        // 自定义插入图片，根据后端返回的结构，加上跨域代理
        customInsert: (res, insertFn) => {
        const url = this.$api.URL.proxy + res.url
        insertFn(url)
      },
    }
  }
},

5.6、树形下拉框

图书的类型是来自字典数据（详见后续《字典管理》章节），树形结构，ElementUI2版本中么有树形的下拉框组件，Element3（ElementPlus）有。结合下拉框组件<el-select>和树形组件<el-tree>封装实现了一个树形下拉框组件TreeSelect，效果图如下。

<el-tree>作为<el-select>的一个选项值<el-option>，然后JS代码实现选择值的同步管理即可，逻辑比较简单。

<el-select v-model="currentText" placeholder="请选择" @clear="handelClear" clearable>
  <el-option class="option view-scroll" :value="currentItem[options.value]" :label="currentItem[options.label]">
    <!-- data：数据-->
    <!-- props：数据结构配置 -->
    <!-- node-key：唯一标识字段 -->
    <el-tree ref="tree" :data="data" :node-key="options.value" :props="options" class="tree" @current-change="handleCurrentChange"></el-tree>
  </el-option>
</el-select>

完整代码见Github / KWebNote。

---

06、字典管理模块

字典管理为一个比较通用的字典数据管理模块Dictionary.vue，用来管理一些可变的分类数据，如图书分类、商品促销类型、品牌、国家、省市区地址等。包含两部分数据：

• 字典类别，定义有哪些字典类别，包含分类名称、编码、是否树形结构等关键字段。
• 字典数据，每一个字典类别的字典数据，统一存储，用字典编码区分，树形结构。结构：id、名称、类别编码、排序号、父id。

树形结构的数据编辑时，可以选择父级，这里用的是<el-cascader>级联选择器组件。

数据是在本地进行树形组装和排序的，根级节点的父idpid为0，用buildDicTree方法递归构造一颗树。

export function queryDicData(type, istree = false) {
  return api.dicdata({ code: type }).then(res => {
    if (!res.data || res.data.length <= 0) return [];
    //构造树形结构
    if (!istree)
      return res.data.sort(sortDicData);
    let sortItems = buildDicTree(res.data, ROOT_PID);
    return sortItems;
  })
}
function buildDicTree(items, pid) {
  let sortItems = items.filter(s => s.pid == pid);
  if (!sortItems || sortItems.length <= 0) return [];
  sortItems.sort(sortDicData).forEach(item => {
    const res = buildDicTree(items, item.id);
    if (res && res.length > 0)
      item.children = res.sort(sortDicData);
  });
  return sortItems;
}
function sortDicData(item1, item2) {
  return item1.sort - item2.sort;
}

需要注意的是，这里修改字典数据时，父级节点不能选择自己及自己的子节点，否则会导致死循环。因此需要对上面构造的树做一个处理，把不能选择的节点设置disabled属性。

---

参考资料

• 在线体验地址：http://kanding.gitee.io/kwebnote （任意用户名、密码。通过gitee静态页面Gitee Pages部署的，所以这里部署的版本是写了个mock模拟api，路由用的hash模式）。
• vue-element-admin vue2的版本后台框架，比较全面，适合学习
• Vue 官方文档
• element-ui 2
• Vue2快速上门
• Vue项目工程@vue/cli入门

---

️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀