玩转 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 方式

2. 新建下载页：，在CMS系统中配置菜单就可以访问该页面。系统已经将动态路由这部分做成配置。

注：新增下载页时，CMS系统中配置菜单，但页面找不到。重新登录也不行，最后本地重启服务、重新登录即可，不需要添加其他代码，或修改权限 —— 暂时不深究。

核心知识点

• 最外层使用 卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。有点像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（可参考 爷孙传递数据），将属性一次性传给组件

"formItemLayout">

等价于

"{ span: 5 }" 
  :wrapperCol="{ span: 14 }"
>

Tip：更多知识点请看下面代码的注释。

核心代码

<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 属性，否则不生效。

核心代码

page3

核心代码

Tip：其中的表单、表格、审核等部分可以从 index.vue 中提取出去，作为一个单独的文件引入，就像 spug 开源项目中一样。

防抖和节流

防抖 - 1秒内，只要有新的触发产生，则从0开始计时。

节流 - 1秒内，只要有新的触发产生则无效，除非之前的操作执行完。

Tip：原生input事件和change 事件触发时机感觉有些不好理解。可参考这里

比如在 input 中增加 lazy，可以实现防抖效果：。当blur或回车时，msg的值就会更新。

但是 失效，输入一个字符 msg 就会同步更新。可能是 ant design vue 1.x 不支持lazy。笔者使用 lodash 实现防抖效果。请看代码：