本系列文章是为学习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下。

🔸在线体验地址🔥🔥：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属性。

---

参考资料

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

---

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