玩转 CMS2

  • 玩转 CMS2已关闭评论
  • 81 次浏览
  • A+
所属分类：Web前端
摘要

上篇研究了样式、请求、evn、mock，感觉对效率的提升没有太明显作用。比如某个工作需要2天，现在1天可以干完，这就是很大的提升。
便宜好用的国外VPS推荐

玩转 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>
便宜好用的国外VPS推荐