[Job 实战]vue 后台/网站 开发总结(1)

1、常规组件 传值 有2种写法

• 开发部分
• 推荐的第一种 对象形式 接收

• 第二 数组形式 接收

• 官网描述

• 常规 父--->子

• 子 ---> 父 方法

2、class/style 动态控制

• 开发部分
  网络异常，图片无法展示

  |
  
  
• 官网
  
• 对象语法
  

• 数组语法

• 用在组件上
  网络异常，图片无法展示

  |
  
  
• style 直接定义 推荐
  网络异常，图片无法展示

  |
  
  
• 多重值
  

• vue 会给不同浏览器 加不同前缀

3、后端给的是 一些字段的 id 前端需要展示出这些字段

• 第一种方式 推荐
  
• 先将这些值拿到 并放在 store 中
  

import to from 'await-to-js';
import scriptApi from '@/api/modules/scriptApi';
const idMap = localStorage.getItem('pia-idMap');
let map = {};
if (idMap) {
  try {
    map = JSON.parse(idMap);
  } catch (error) {
    //
  }
}
function format(arr) {
  const obj = {};
  arr.forEach(item => {
    // eslint-disable-next-line no-underscore-dangle
    obj[item._id] = item.data;
  });
  return obj;
}
// 第一个参数是应用程序中 store 的唯一 id
export default defineStore('script-config', {
  state: () => ({
    //  下面5个都是剧本的属性的映射关系
    historicalBg: map.historicalBg || [],
    source: map.source || [],
    type: map.type || [],
    authorization: map.authorization || [],
    label: map.label || [],
  }),
  getters: {},
  actions: {
    // 获取映射关系
    async initMap() {
      const [err, res] = await to(scriptApi.init());
      const code = res?.code;
      if (err || code !== 0) {
        return;
      }
      const { data } = res;
      // eslint-disable-next-line no-restricted-syntax
      for (const key in data) {
        // eslint-disable-next-line no-prototype-builtins
        if (data.hasOwnProperty(key)) {
          data[key] = format(data[key]);
        }
      }
      this.historicalBg = data.historicalBg;
      this.source = data.source;
      this.type = data.type;
      this.authorization = data.authorization;
      this.label = data.label;
      localStorage.setItem('pia-idMap', JSON.stringify(data));
    },
  },
});
复制代码

• api

• localStorage 中也存了

• 使用

• 第二种方式  如果用在一些 没有关联的页面比较合适 当然此处可优化

• 页面直接调用
  网络异常，图片无法展示

  |

4、这种选项框 内容传递问题  如果使用 value 将无法 传递 自定义数据

• 这样写
  网络异常，图片无法展示

  |
  
  
• 使用
  

5、常用的页面/表单刷新方法

• 最不建议的是 window.location.reload() 非常的不现代化，体验非常的差
  
• 推荐方式  使用 ref
  

• getList 调取接口

6、值得注意的 switch 开关状态 控制

• 点击取消时 刷新 恢复
• 点击 确认后发请求
• 需要控制 Modal 显示隐藏

7、关于弹窗 Modal 和 confirm 选择

• 比较丑的 表现

• 使用 这种语法 更改为上面的表达

this.$Modal.confirm({ content: `<h3>询问内容？</h3>`, onOk: async () => { this.$Message.success('操作成功') }, })
复制代码

8、关于组件封装和页面简化

• 其实比较忌讳的是 写一些重复页面 ，这样会导致 写起来，包括后面的维护都变得比较困难
  
• 我想 每个行业 应该都会注重 重复性，重复的 代码 或者模版 往往 被视为是更好的表达
  
• 简单来说 就是复用
  
• 比如下面这个例子  3个tab 内容比较类似 ，可以写三个页面，当然也可以 写一个 组件 其他的页面传递一些参数
  

9、关于搜索/选择框数据渲染问题

• 这种 选择框的数据 需要动态生成，不能是固定写死的

• 看下解决方式
  
• data 中的 初始搜索项目为 空
  

• 点击 搜索 后是这样的

10、方便新添加的数据管理，按钮状态切换实现参考

• 目的是 新添加的 内容 不要 立即在网站上生效，可以做二次确认或者审核

11、数据 移动 + 序号变更

• 移动使用的是 Sortable.js
• 序号变更 需要给后端传递数据  传递 currentIndex, targetIndex

11、使用 @/utils/xslx 读取或者导入 Excel

• 下载模版

• 上传文件

• 看一下效果

12、有个 detail 页面 需要跳到新页面

• 参考实现

• 暂时 写这么多，未完待续......

参考网站

[Vue官网]