玩转 CMS2

玩转 CMS2

上篇研究了样式、请求、evn、mock，感觉对效率的提升没有太明显作用。

比如某个工作需要2天，现在1天可以干完，这就是很大的提升。

提高效率的方法有代码复用、模块化、低代码工具。

目前可以考虑从代码复用方面下手，即使最低级的代码复制也可以。

要快速提高效率，需要对本地项目中的一些关键流程和技术比较了解，清楚常用功能实现思路和手段：

1. 如何快速开发产品提出的一些常用页面(功能)
2. 现存有哪些可复用组件
3. 常用布局
4. 本地项目常见 Bug

Tip: 移动端的后续在安排，比如：H5中常用布局、如何快速调试H5、端内H5问题排查...

常用页面(功能)

客户端下载配置页

需求：以前安卓和ios的下载页是在h5中写死的，现在需要将这部分改成配置（h5项目中 download.vue 中的数据来自cms 配置的 json 数据），于是需要增加一个下载页。

技术手段：

1. 创建 downloadPage.vue，编辑下载页和新建下载页，两个路由指向同一个组件。通过 this.$route.query.id 区分编辑和新建。
   
   $route和$router都可以通过 this 直接获取。

给路由传递参数有三种形式：params、search、state（可参考 react 这里）。这里使用 search 方式

1. 新建下载页：，在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>