Skip to content

Latest commit

 

History

History
186 lines (126 loc) · 5.93 KB

笔记.md

File metadata and controls

186 lines (126 loc) · 5.93 KB
Raw

验证失败

方式一：响应拦截失败 HttpErrorCode responseCatch：err -> err.response.status

全局拦截

方式二： 返回还是 200，但是有个字段：returnCode = -1001

icon 可以放到一个变量里面使用

// 前提：引入，并在components里面注册
// 最普通使用
<el-icon>
  <share />
</el-icon>

// 直接使用
<share style="width: 1em; height: 1em; margin-right: 8px" />
// 当变量使用
// 引入不需要在component里面注册，直接在setup里面返回即可
<el-avatar class="avatar" :icon="UserFilled"> </el-avatar>
<el-button :icon="UserFilled"></el-button>

elment 语法

ul>li{用户列表$}*5

reactive

进行组件 v-model 双向绑定的时候，多多少少是有问题的 不管是组件还是原生 input 标签：一般使用 ref

vuex 里面对请求路径进行封装

// 公司里面请求路径不规范
// 1、
const pageName = payload.pageName
let pageUrl = ''

switch (pageName) {
  case 'user':
    pageUrl = '/api/users/abc/list'
    break
  case 'role':
    pageUrl = '/api/role/cba/list'
    break
}

// 2、
const pageUrlMap = {
  users: '/api/users/abc/list'
}

let pageUrl = pageUrlMap[pageName]

请求的时候直接使用 pageUrl

const pageResult = await getPageListData(pageUrl, payload.queryInfo)

setup 只会调用一次

类似于组件的 created

用户按钮权限管理方案

拿到 userMenus 取到所有的按钮权限，放到数组里面（utils 封装函数） 在拿到菜单的地方去调用函数，保存到 vuex 里面

定义 hook 在 page-content 里面调用一个 hook，传入 pageName 和权限，返回 boolean

监视怎么使用

vsc 复制当前行到上一行：alt+上

加 shift 则多复制一行

浏览器快速切换标签页

ctrl+tab：左循环 加 shift：又循环

属于页面的逻辑得写到页面里面

公共的逻辑才写到公共的 hook 里面

组件 v-model 使用理解

给组件绑定 v-model，就把父组件的值传递到了子组件，子组件可以直接使用 modelValue 子组件改变数据，得分发 update:modelValue 事件，值改变的时候，就把新值当参数传递过去，这样父组件的值就又改了，再传到子组件，以实现双向数据绑定

子组件如果不直接使用 modelValue，而又把这个值绑定到如：el-input 上面，可以不使用 v-model 而采用本质写法：动态绑定： modelValue + 事件：@update:modelValue 当 modelValue 的值改变的时候，触发事件的回调函数，把新值（formData）分发出去

const handelChange = (newValue: any, field: string) => {
  emit('update:modelValue', { ...props.modelValue, [field]: newValue })
}
// 父组件定义的数据
const formData = ref(formOrigin)

自定义表单组件理解

1、在页面级(user.vue)动态绑定(v-bind)配置对象 2、在公共组件级（page-form）也动态绑定（v-bind）配置对象，并双向绑定（v-model）表单的 formData 数据 3、在 base-ui 级的 element-plus 里面响应位置使用配置项目，双向绑定 formData 数据

其中每个表单项，动态绑定配置单 field 属性

自定义表格组件理解

1、在页面级 （user.vue）动态绑定（v-bind）配置对象 2、在公共组件级（page-content）也动态绑定（v-bind）配置对象，并动态绑定（v-bind）表格数据、数据总数。双向绑定（v-model）分页信息 3、在 base-ui 级遍历 propData 显示每一列，因配置的属性名，和 Table 组件需要的属性名一致，所以动态绑定（v-bind）所配置的每一列（propItem），还可以在列中动态写入插槽

setup 只会执行一次，只要组件没重新创建

vuex 的数据是响应式的，但前提是在模板、computed、watch 等添加到响应式系统里面的时候，在异步 action 请求到数据的时候，才会响应式

如果逻辑 是在 setup 里面，请求异步 action 到配置文件里面，则不会响应式

解决：在值改变的时候，添加一个副作用（例如：使用 computed），副作用可以实现响应式（类似页面刷新） computed 监听 vuex 里面的数据，改变的时候，重新执行 computed 的 get 函数，实现数据请求回来后的页面刷新

computed 执行逻辑

里面的回调在依赖的值发生改变的时候，是会重新执行的，这是一个副作用

点击新建的逻辑

1、首先弹框 2、然后判断是编辑还是新建（父组件有传递数据过来）。编辑跟新建接口不一样 3、有数据之后，dispatch 一个异步 action，去异步提交数据（那就得先定义好请求函数）

新建角色之权限处理

1、权限只是在角色里面的，在 dialog 设一个插槽，在角色页面单独传入 2、点击编辑可以拿到 page-content 那里传递过来的 row 数据，再传递给 page-modal，在点击确定的时候，传给服务器 3、eltree 是在父组件里面写的，数据请求到之后展示。在新建的时候需要把选中的数据传递给 page-modal 一同携带给服务器，可通过 prop 的方式传递，最后拼接 4、在点击编辑数据回显的时候，通过传递给 hook 的回调函数，把 row 数据通过形式参数带出来，转化成叶子节点之后，设置给 eltree

防止数据是后面拿到的，给数据包裹 computed，保证数据是响应式的

const menus = computed(()=>store.state.allMenuList)

注意：默认插槽，不需要 template 包裹

computed 监听 props

当 props 改变的时候，computed 的回调函数副作用重新执行，模板重新渲染，options 改变，那么 echarts 要重新 setOption

onMounted(() => {
  const { setOption } = useEchart(echartRefDiv.value)
  watchEffect(() => {
    // 也可以更新的时候重新调用
    setOption(props.options)
  })
})

拿 vuex 里面数据的时候，用 computed 包裹，数据请求下来是响应式的

git bash 连接远程服务器

ssh root@公网 ip