vue 快速入门 系列 —— 玩转 CMS2

其他章节请看:

vue 快速入门 系列

玩转 CMS2

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

比如某个工作需要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>

其他章节请看:

vue 快速入门 系列

posted @ 2024-02-20 18:50  彭加李  阅读(232)  评论(0编辑  收藏  举报