vue 快速入门 系列 —— 玩转 CMS2
其他章节请看：
玩转 CMS2
上篇研究了样式、请求、evn、mock，感觉对效率的提升没有太明显作用。
比如某个工作需要2天，现在1天可以干完，这就是很大的提升。
提高效率的方法有代码复用、模块化、低代码工具。
目前可以考虑从代码复用方面下手，即使最低级的代码复制也可以。
要快速提高效率，需要对本地项目中的一些关键流程和技术比较了解，清楚常用功能实现思路和手段：
- 如何快速开发产品提出的一些常用页面(功能)
- 现存有哪些可复用组件
- 常用布局
- 本地项目常见 Bug
Tip: 移动端的后续在安排，比如：H5中常用布局、如何快速调试H5、端内H5问题排查...
常用页面(功能)
客户端下载配置页
需求：以前安卓和ios的下载页是在h5中写死的，现在需要将这部分改成配置（h5项目中 download.vue 中的数据来自cms 配置的 json 数据），于是需要增加一个下载页。
技术手段：
- 创建 downloadPage.vue，
编辑下载页和新建下载页，两个路由指向同一个组件。通过this.$route.query.id区分编辑和新建。
$route和$router都可以通过 this 直接获取。
给路由传递参数有三种形式：params、search、state（可参考 react 这里）。这里使用 search 方式
- 新建下载页：，在CMS系统中配置菜单就可以访问该页面。系统已经将动态路由这部分做成配置。
注：新增下载页时，CMS系统中配置菜单，但页面找不到。重新登录也不行，最后本地重启服务、重新登录即可，不需要添加其他代码，或修改权限 —— 暂时不深究。
核心知识点
- 最外层使用
<a-card>卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。有点像div，但提供了一些更丰富的东西。 - 表单使用 FormModel 组件。从官网介绍来看，FormModel组件和 Form组件 一样，但FormModel使用
v-model，感觉更新，更简单。4.x 版本不像 1.x 提供了 FormModel和Form 两个组件，只有一个 Form 组件，并且使用的是 v-model，没有 1.x 中 Form 中的 v-decorator（这个东西看起来有点难）。
Tip: v-bind="formItemLayout" 用法类似 v-bind=$attrs（可参考 爷孙传递数据），将属性一次性传给组件
<a-form-model v-bind="formItemLayout">
等价于
<a-form-model
:labelCol="{ span: 5 }"
:wrapperCol="{ span: 14 }"
>
Tip：更多知识点请看下面代码的注释。
核心代码
<template>
<a-card>
<!--
FormModel 表单 (支持 v-model 检验)(版本：1.5.0+)：具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
layout - 表单布局。水平布局如果不配合labelCol、wrapperCol，则仍旧是垂直布局。
ref - 用于取得表单组件，可用于校验
model - 表单数据对象
rules - 表单验证规则
-->
<a-form-model
layout="horizontal"
ref="ruleForm"
:model="form"
:rules="rules"
v-bind="formItemLayout"
>
<!--
prop 就是一个传给组件（a-form-model-item）的属性
官网：Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 FormItem 的 prop 属性设置为需校验的字段名即可
如果将 prop 属性注释掉，点击保存或 blur 都不会触发
-->
<a-form-model-item ref="title" label="标题" prop="title">
<a-input
placeholder="请输入标题"
v-model="form.title"
@blur="() => {
$refs.title.onFieldBlur();
}
"
>
<!--
Input 输入框中的`前缀和后缀`：https://1x.antdv.com/components/input-cn/#components-input-demo-prefix-and-suffix
-->
<span slot="addonAfter">{{ form.title.length }}/50</span>
</a-input>
</a-form-model-item>
<a-form-model-item label="应用简介" prop="description">
<!--
没有一个单独的 textarea，只有 input
4.x 有 maxlength 属性，只能输入约定的字符个数
-->
<a-input
v-model="form.description"
type="textarea"
:autoSize="{ minRows: 4, maxRows: 9 }"
/>
<div class="words-color">
当前字数{{ form.description.length ?
form.description.length : 0 }}/1000
</div>
</a-form-model-item>
<!-- 通过 required 增加一个必传的样式 *，不知道是否有其他副作用 -->
<a-form-model-item label="应用截图" required>
<a-row>
<a-col :span="24">
<ApplicationPhone :phones="phones"/>
</a-col>
</a-row>
</a-form-model-item>
</a-form-model>
<fixedBar>
<div class="options-btn">
<!-- 气泡确认框 -->
<a-popconfirm title="关闭页面将丢失已输入内容？" @confirm="cannoe">
<a-button class="btn">关闭</a-button>
</a-popconfirm>
<a-button type="primary" @click="saveform" class="btn">保存</a-button>
</div>
</fixedBar>
</a-card>
</template>
<script>
export default {
// name 组件属性有作用，比如跳转到其他页面，回来要保持这个装填。这里不需要，直接去掉
data () {
return {
form: {
// 标题
title: '',
// 应用简介
description: '',
// 应用名称
appName: '',
// 安卓下载地址
androidUrl: '',
},
rules: {
title: [
{ required: true, message: '请输入标题', trigger: 'blur' },
{ min: 1, max: 150, message: '最多输入150个字符', trigger: 'blur' },
],
iosUrl: [
{ required: true, message: '请输入iOS下载地址', trigger: 'blur' },
// 参考：https://github.com/yiminghe/async-validator
{ type: 'url', message: '请输入url类型', trigger: 'blur' },
{ min: 1, max: 800, message: '最多输入800个字符', trigger: 'blur' },
],
},
// 这个组件会通过路由跳转至此，所以直接通过 $route 取得数据即可。就像这样：/foo?user=1 通过 $route.query.user 取得 user 的值
id: this.$route.query.id,
}
},
computed: {
formItemLayout () {
return true
? {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
}
: {};
},
isEdit () {
return !!this.id
},
},
created () {
if (this.id) {
this.getDataList()
}
},
methods: {
async getDataList () {
if (res.code === 0) {
this.form.title = res.data.title
const json = JSON.parse(res.data.contentTxt)
// 报错 —— 一度怀疑不能这么设置form 的值。其实这么写没问题，出错是 json 对象缺少 title 属性，于是模板中就报错了
// this.form = {...json};
this.form = { ...this.form, ...json }
json.phones.forEach((item, i) => this.phones[i].imageUrl = item)
}
},
cannoe () {
this.$router.back(-1)
},
saveform () {
/*
this.$refs.ruleForm.validate(valid => {
if (!valid) {
console.log('验证失败');
return false
}
});
*/
// promise 的写法
this.$refs.ruleForm.validate().then(() => {
// 应用图标必传验证
if (!this.form.logoUrl) {
// Message 全局提示，根据ui文档写即可
this.$message.error('请上传xxx')
return false
}
this._saveform()
}).catch(error => {
// 验证失败
})
},
async _saveform () {
if (this.id) {
if (res.code === 0) {
this.$message.success(res.msg)
// 对于统一的编码规范和标准化建议，推荐使用 this.$router.go(-1) 来进行路由的回退操作
this.$router.back(-1)
}
} else {
if (res.code === 0) {
this.$message.success(res.msg)
this.$router.back(-1)
}
}
},
}
}
</script>
page2
核心知识点
- table 中的具名插槽使用的是 slot-scope，自 vue 2.6.0 起被废弃。
- a-row 属于 Grid 栅格。支持 flex，比如垂直方向的对齐、水平方向的对齐。比原生的 flex（flex 布局的基本概念） 简单点
- 将搜索中的 a-form 改成 a-form-model（笔者感觉 FormModel 更简单），虽然不需要校验也可以用起来。其中如果需要 Reset 功能，需要设置 prop 属性，否则不生效。
核心代码
<template>
<a-card>
<!-- 为了实现现在效果，这么写感觉很怪 -->
<a-row type="flex" justify="space-between" align="middle">
<a-col></a-col>
<a-col>
<router-link to="/demo/add">
<a-button type="primary" icon="plus">添加</a-button>
</router-link>
</a-col>
</a-row>
<!-- 将搜索中的 a-form 改成 a-form-model... -->
<a-row type="flex" justify="space-between" align="middle">
<a-col :span="24">
<a-form-model ref="ruleForm" layout="inline" :model="listQuery">
<a-form-model-item prop="title">
<a-input placeholder="关键词" v-model="listQuery.title" />
</a-form-model-item>
<a-form-model-item prop="state">
<a-select allowClear v-model="listQuery.state" placeholder="全部状态" @change="stateChange">
<a-select-option
v-for="item in stateList"
:key="item.id"
:value="item.id"
>{{item.name}}</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary" @click="handleQuery()">查询</a-button>
<a-button style="margin-left: 15px" @click="resetQueryForm()">清空</a-button>
</a-form-model-item>
</a-form-model>
</a-col>
</a-row>
<a-table
...
>
<span slot="index" slot-scope="text, record, index">
{{
(listQuery.current - 1) * listQuery.size + index + 1
}}
</span>
<template slot-scope="text, record" slot="state">
<span class="statustag s1" v-if="record.state === 1">启用</span>
<span class="statustag s2" v-else>禁用</span>
</template>
<template slot="operation" slot-scope="text, record">
<a
href="javascript:;"
@click="copyLink(record.xx)"
title="复制链接"
>链接</a>
<a
href="javascript:void(0);"
@click="offlineFn(record.id)"
v-if="record.state === 1"
>禁用</a>
<a href="javascript:void(0);" @click="onlineFn(record.id)" v-else >启用</a>
<router-link :to="'/demo/edit?id=' + record.id">编辑</router-link>
<a-divider type="vertical" />
<a href="javascript:void(0);" @click="logFn(record)">日志</a>
<a-divider type="vertical" />
<a-popconfirm title="您确认要删除吗?" @confirm="() => deleteItem(record.id)">
<a href="javascript:void(0);">删除</a>
</a-popconfirm>
</template>
</a-table>
<!-- main.js 中引入的组件，在 components 中，有 readme.md 说明文档。 -->
<footer-tool-bar>
<a-pagination
...
/>
</footer-tool-bar>
</a-card>
</template>
page3
核心代码
<template>
<a-card>
<a-form :form="form" :model="queryParams" layout="inline">
<!-- v-decorator 是 Ant Design Vue 提供的一个指令，用于表单校验和数据绑定。 -->
<a-form-item>
<a-select
v-decorator="['type']"
allowClear
@change="typeChange"
placeholder="xx"
>
<a-select-option :value="item.value" v-for="(item, i) in typeList" :key="i">{{item.cnt}}</a-select-option>
</a-select>
</a-form-item>
<!--
DatePicker 组件
v-decorator="['rangeDate']" 改成 v-model="queryParams.rangeDate"
-->
<a-form-item>
<a-range-picker
v-model="queryParams.rangeDate"
@change="dateRangeChange"
:format="dateFormat"
:ranges="{ '今天': [$moment(), $moment()], '近3天': [$moment().subtract(2, 'days'), $moment()],'近一周': [$moment().subtract(6, 'days'), $moment()] }"
style="width:260px;"
>
<a-icon slot="suffixIcon" type="calendar" />
</a-range-picker>
</a-form-item>
<a-form-item>
<a-input v-model="queryParams.昵称" @change="nickNameChange" placeholder="用户名称" />
</a-form-item>
<a-form-item>
<a-button type="primary" @click="handleQuery()">查询</a-button>
</a-form-item>
</a-form>
<a-tabs
:animated="false"
>
<a-tab-pane v-for="tab in tabList" :key="tab.key">
<span slot="tab">
{{tab.value}}
<sup>0</sup>
<sup>{{cnt[tab['number']]}}</sup>
</span>
</a-tab-pane>
</a-tabs>
<!-- 多个 tab 对应一个table -->
<a-table
...
>
...
</a-table>
<footer-tool-bar>
<a-pagination
...
/>
</footer-tool-bar>
</a-card>
</template>
Tip：其中的表单、表格、审核等部分可以从 index.vue 中提取出去，作为一个单独的文件引入，就像 spug 开源项目中一样。
防抖和节流
防抖 - 1秒内，只要有新的触发产生，则从0开始计时。
节流 - 1秒内，只要有新的触发产生则无效，除非之前的操作执行完。
Tip：原生input事件和change 事件触发时机感觉有些不好理解。可参考这里
比如在 input 中增加 lazy，可以实现防抖效果：<input v-model.lazy="msg">。当blur或回车时，msg的值就会更新。
但是 <a-input v-model.lazy="queryParams.昵称" 失效，输入一个字符 msg 就会同步更新。可能是 ant design vue 1.x 不支持lazy。笔者使用 lodash 实现防抖效果。请看代码：
<script>
function debounce (func, delay) {
return _.debounce(func, delay);
}
export default {
created () {
this.getDataList()
// 提前创建一个防抖函数
this.debouncedHandleQuery = _.debounce(() => {
this._handleQuery();
}, 200); // 设置延迟时间为200毫秒
},
methods: {
handleQuery () {
this.debouncedHandleQuery()
},
_handleQuery () {
if (this.queryFlag) return
this.queryParams.current = 1
this.getDataList()
},
}
}
编辑按钮的权限
比如某页面中的编辑按钮，有权限就显示，否则隐藏。
权限通过 this.$store.getters. 获取，就像这样：
/*
登录成功后，后端返回的数据包括权限，
"permissions": [
"demo:cms:push", // 推送权限
...
*/
if (this.$store.getters.permisaction.includes('demo:cms:push')) {
this.isEditPerxx = true
}
扩展
this.$message
比如保存成功或失败，项目中会通过 this.$message.xx，这里是 ant design vue 框架中提供的Message 全局提示
回退操作
编辑完成，需要返回之前的页面。
按照官方文档的建议，推荐使用 this.$router.go(-1) 来实现路由的回退操作，因为 this.$router.back(-1) 和 this.$router.back() 实际上是 this.$router.go(-1) 的简写形式
Tip: this.$router.push('/') 和 this.$router.push({ path: '/' }) 等价
params 是否可以不通过 path 传递
params 是否可以不通过 path 传递？
比如项目中 path 不是/push/:id/:title，而是 /push/id/title。而编程导航却出现如下代码：
this.$router.push({ name: 'demo2', params: { title: record.title, id: record.id, address: record.address } })
跳转到名为 demo2 的路由，通过 params 传递参数。
说这种方式刷新页面后，就不能获取参数了。
现存可复用组件
Tip：没必要在这里写出来。
ant design pro 自带的组件在 components 文件夹中
本地项目自己扩展的在 myComponents 文件夹中
通过vscode 搜索 @/myComponents/ 发现常用的有上传相关组件，其他常用的粗略感觉只有不到十个。稍微知晓一下这几个常用的组件即可。
Tip: 其中 ant design vue 中 components 中有的组件配有 readme.md，介绍该组件，这个就很好。
布局
ant design vue 中布局有：Grid 栅格、layout 布局、Space 间距
其中 Grid 栅格支持flex，layout 布局可能更适合整体布局，Space 间距是个不错的东西，但本地项目没有使用起来。
Tip：这几个UI提供的布局，感觉可以大范围用起来，避免在代码中写很多零碎的css布局相关代码，不好维护。
本地项目常见 Bug
输入超过50字后无法提交
有可能一个是50，一个是100，就像这样：
<a-input
placeholder="请输入标题（必填）"
maxLength="50"
@change="titleChange">
<span slot="addonAfter">{{queryParams.title ? queryParams.title.length : 0}}/100</span>
</a-input>
某一级导航切换到另一个页面，浏览器崩溃
原因在于后端返回5000条数据，前端一次性渲染，导致性能受阻。在该页面进行其他操作（比如编辑、删除）也会很慢
优化手段：后端先返回一级列表数据，点击某个数据后再去后端请求数据
保留上一次筛选条件
搜索中输入关键字 pengjiali，点击“搜索”按钮，在查询出的数据中点击编辑，编辑完该数据后点保存按钮，然后返回到该页面，未记住上一次搜索的信息 —— 也就是 pengjiali 没有了。
解决方法是：在该页面中的 beforeRouteLeave(Vue Router 的导航守卫之一，用于在离开当前路由前执行逻辑) 中更新更新需要缓存的组件。这里使用了<keep-alive(是一个抽象组件，用于缓存动态组件)。
相关代码如下：
export default {
// 组件名称。非常重要，必须和 {1} 处保持一致
name: 'name001',
beforeRouteLeave (to, from, next) {
if (this.xxRouteNames.includes(to.name)) {
this.$store.commit('setKeepAlive', ['name001']) // {1}
} else {
this.$store.commit('setKeepAlive', [])
}
next()
}
setKeepAlive 是 mutations，用于更新需要缓存组件的变量 cacheArray：
const app = {
state: {
// 动态缓存需要的组件
cacheArray: []
},
mutations: {
setKeepAlive: (state, keepAlive) => {
state.cacheArray = keepAlive;
},
cacheArray 用在 <keep-alive 中：
<template>
<div id="app">
<keep-alive :include="cacheArray">
<router-view />
</keep-alive>
</div>
</template>
<script>
export default {
name: 'RouteView',
computed: {
cacheArray() {
return this.$store.state.app.cacheArray;
}
}
编辑某条数据后，返回到列表页，列表信息未更新
Tip：编辑页和列表页属于不同的路由，或者说是两个页面。
在 activated 中重新请求数据即可：
activated () {
this.getDataList()
},
在 Vue.js 中，activated 是一个生命周期钩子函数，用于处理组件被激活时的逻辑。
当使用 Vue Router 进行页面导航时，如果路由组件在之前已经被渲染过，并且现在再次被访问，那么它的 activated 钩子函数将会被调用。
通常情况下，可以在 activated 钩子中执行一些需要在组件被重新激活时处理的逻辑，比如数据刷新、重新加载资源、定时器的重新启动等。
编辑操作取消勾选或者勾选后，点击取消按钮，再次点击编辑，会保留上一次的编辑结果
Tip：编辑是一个弹框，里面有很多 checkbox
在弹框的取消事件中重新请求数据，用于初始化状态：
+ onCancel() {
+ this.show = false
+ this.getDataList()
+ },
翻到第二页，输入关键字，点击搜索，还是搜索的第二页
点击搜索时重置 current 为 1：
handleQuery () {
+ this.listQuery.current = 1
this.getDataList();
},
表格错行显示
使用 ant design vue 的 table 组件，有时会使用 fixed: left、fixed: right（例如将操作固定在最右侧）。
某些情况就会出现错行显示
在 1.x 中如果设置了 fixed: left、fixed: right，这个表就会变成三个表，在 4.x 中使用高级css属性，只会生成一个表。
笔者将某一列的固定宽度去除，也就是留一列不设置即可。但某些数据下还是会有问题，比如某列很长，某列又太短，这时可以配合 scroll.x。
Tip： 若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x —— 官网 table-cn
{
title: 'desc',
dataIndex: 'desc',
- width: 240,
scopedSlots: { customRender: 'desc' }
})
编辑器中正文只添加引号或问号，保存后未生效
编辑器使用的是：一个“包装”了 UEditor 的 Vue 组件 —— vue-ueditor-wrap
特殊字符都会保存不上，比如 $。改成 observer 模式即可。
Tip：listener 模式借助 UEditor 的 contentChange 事件，优点在于依赖官方提供的事件 API，无需额外的性能消耗，浏览器兼容性更好。但缺点在于监听不准确，存在如“特殊字符（? ! $ #）输入时不触发”的 BUG —— 官网
表格子级序号错误
16
11
11
11
12
修复如下：
<span slot="index" slot-scope="text, record, index">
{{
- (listQu.current - 1) * listQu.size + index + 1
- }}
+ Object.is(record.pid, 0) ? ((listQu.current - 1) * listQu.size + index + 1) : (index + 1)
+ }}
</span>
其他章节请看：
出处：https://www.cnblogs.com/pengjiali/p/18023789
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
