vue3，后台管理列表页面各组件之间的状态关系

最新推荐文章于 2024-04-18 16:36:58 发布
最新推荐文章于 2024-04-18 16:36:58 发布
阅读量508 收藏
点赞数
原文链接：https://www.cnblogs.com/jyk/p/14981201.html
版权
本文介绍了在Vue3后台管理界面中，如何处理各组件间的状态关系，强调了状态管理的重要性。通过使用轻量级状态管理方案，详细讲解了页面结构、组件状态注册与获取、列表管理类的功能，包括动态菜单、查询、操作按钮组、列表和分页的交互。还探讨了是否需要重新统计总数的情况，并提供了视频演示和快捷键的实现，帮助开发者更好地理解和构建复杂的后台管理系统。
摘要由CSDN通过智能技术生成
  • vite2
  • vue 3.0.5
  • vue-router 4.0.6
  • vue-data-state 0.1.1
  • element-plus 1.0.2-beta.39

前情回顾

前面介绍的表单控件和查询控件，都是原子性的，实现自己的功能即可。

而这里要介绍的是管理后台里面的各个组件之间的状态关系。

为啥需要状态？因为组件划分的非常原子化（细腻），所以造成了很多的组件，那么组件之间就需要一种“通讯方式”，这个就是状态了。不仅仅是传递数据，还可以实现事件总线。

页面结构

一般的后台管理大体是这样的结构：

后台页面结构.png

具体项目里页面结构会有一些变化，但是总体结构不会有太大的改变。

做出来的效果大体是这样的：

一种后台管理的效果

  • 动态菜单
    根据用户权限加载需要的菜单。

  • 动态 tab
    点击一下左面的菜单，创建一个新的tab，然后加载对应的组件，一般是列表页面（组件），也可以是其他页面（组件）。

  • 查询
    各种查询条件那是必备的，总不能没有查询功能吧，查询控件需要提供查询条件。

  • 操作按钮组
    里面可以有常见的添加、修改、删除、查看按钮，也可以有自定义的其他按钮。可以“弹窗”也可以直接调用后端API。

  • 列表
    显示客户需要的数据，看起来简单，但是要和查询、翻页、添加、修改、删除等功能配合。

  • 分页
    这是和列表最接近的一个需求，因为数据有可能很大，不能一次性都显示出来，那么就需要分页处理，所以分页控件和列表控件就是天然CP。

  • 表单（添加、修改）
    数据提交之后，为了便于确认数据添加成功，是不是需要通知列表去更新数据呢？总不能填完数据，列表一点变化都没有吧。

  • 删除
    数据删掉了，不管是物理删除还是逻辑删除，列表里面都不需要再显示出来了。
    也就是说删除后要通知列表更新数据。

总之，各个组件直接需要统筹一下状态关系。

视频演示

我们来看一下实际效果。
【放视频】

设计状态

我们整理一下需求，用脑图表达出来：

后台管的状态.png

使用“轻量级状态管理”定义状态：

/store-ds/index.js

import VuexDataState from 'vue-data-state'

export default VuexDataState.createStore({
  global: { // 全局状态
    userOnline: {
      name: 'jyk' //
    }
  },
  local: { // 局部状态
    dataListState () { // 获取列表数据的状态 dataPagerState
      return {
        query: {}, // 查询条件
        pager: { // 分页参数
          pageTotal: 100, // 0：需要统计总数；其他：不需要统计总数
          pageSize: 5, // 一页记录数
          pageIndex: 1, // 第几页的数据，从 1  开始
          orderBy: { id: false } // 排序字段
        },
        choice: { // 列表里面选择的记录
          dataId: '', // 单选，便于修改和删除
          dataIds: [], // 多选，便于批量删除
          row: {}, // 选择的记录数据，仅限于列表里面的。
          rows: [] // 选择的记录数据，仅限于列表里面的。
        },
        hotkey: () => {}, // 处理快捷键的事件，用于操作按钮
        reloadFirstPager: () => {}, // 重新加载第一页，统计总数（添加后）
        reloadCurrentPager: () => {}, // 重新加载当前页，不统计总数（修改后）
        reloadPager: () => {} // 重新加载当前页，统计总数（删除后）
      }
    } 
  },
  init (state) {
  }
})

这里没有使用 Vuex，因为我觉得 Vuex 有点臃肿，还是自己做的清爽。
另外，状态里面除了数据之外，还可以有方法（事件总线）。

组件里面使用轻量级状态的方法

// 引入状态
import VueDS from 'vue-data-state'

// 访问状态
const { reg, get } = VueDS.useStore()
// 父组件注册列表的状态
const state = reg.dataListState()

// 子组件里面获取父组件注册的状态
const dataListState = get.dataListState()

先引入状态，然后在父组件注册（也就是注入）状态，然后在子组件就可以获取状态。
函数名就是 /store-ds/index.js 里面定义的名称。

然后我们还可以仿照 MVC 的 Controllar ，做一个控制类，当然也可以叫做管理类。
叫什么不是重点，重点是实现了什么功能。

列表的管理类

我们可以为列表的状态写一个状态的管理类。
这个类是在单独的 js 文件里面，并不需要像 Vuex 那样去设置 action 或者 module。

/control/data-list.js

import { watch, reactive } from 'vue'
// 状态
import VueDS from 'vue-data-state'

// 仿后端API
import service from '../api/dataList-service.js'

/**
 * * 数据列表的通用管理类
 * * 注册列表的状态
 * * 关联获取数据的方式
 * * 设置快捷键
 * @param {string} modeluId 模块ID
 * @returns 列表状态管理类
 */
export default function dataListControl (modeluId) {
  // 显示数据列表的数组
  const dataList = reactive([])
  // 模拟后端API
  const { loadDataList } = service()

  // 访问状态
  const { reg, get } = VueDS.useStore()
  // 子组件里面获取父组件注册的状态
  const dataListState = get.dataListState()

  // 数据加载中
  let isLoading = false

  /**
   * 父组件注册状态
   * @returns 注册列表状态
   */
  const regDataListState = () => {
    // 注册列表的状态，用于分页、查询、添加、修改、删除等
    const state = reg.dataListState()

    //  重新加载第一页，统计总数（添加、查询后）
    state.reloadFirstPager = () => {
      isLoading = true
      state.pager.pageIndex = 1 // 显示第一页
   
      // 获取数据
      loadDataList(modeluId, state.pager, state.query, true).then((data) => {
        state.pager.pageTotal = data.count
        dataList.length = 0
        dataList.push(...data.list)
        isLoading = false
      })
    }
    // 先执行一下，获取初始数据
    state.reloadFirstPager()

    // 重新加载当前页，不统计总数（修改后）
    state.reloadCurrentPager = () => {
      // 获取数据
      loadDataList(modeluId, state.pager, state.query).then((data) => {
        dataList.length = 0
        dataList.push(...data)
      })
    }

    // 重新加载当前页，统计总数（删除后）
    state.reloadPager = () => {
      // 获取数据
      loadDataList(modeluId, state.pager, state.query, true).then((data) => {
        state.pager.pageTotal = data.count
        dataList.length = 0
        dataList.push(...data.list)
      })
    }

    // 监听，用于翻页控件的翻页。翻页，获取指定页号的数据
    watch(() => state.pager.pageIndex, () => {
      // 避免重复加载
      if (isLoading) {
        // 不获取数据
        return
      }
      // 获取数据
      loadDataList(modeluId, state.pager, state.query).then((data) => {
        dataList.length = 0
        dataList.push(...data)
      })
    })

    return state
  }
 
  return {
    setHotkey, // 设置快捷键，（后面介绍）
    regDataListState, // 父组件注册状态
    dataList, // 父组件获得列表
    dataListState // 子组件获得状态
  }
}

管理类的功能：

  1. 父组件注册状态
  2. 子组件获取状态
  3. 定义列表数据的容器
  4. 各种监听
  5. 事件总线

父组件注册状态

因为使用的是局部的状态，并不是全局状态，所以在需要使用的时候，首先需要在父组件里面注册一下。看起来似乎没有全局状态简单，但是可以更好的实现复用，更轻松的区分数据，兄弟组件的状态不会混淆。

子组件获取状态

因为或者状态必须在vue的直接函数内才行，所以才需要先把状态获取出来，而不能等到触发事件了再获取。

定义列表数据的容器

列表数据并没有在状态里面定义，而是在管理类里面定义的，因为主要列表组件才需要这个列表数据，其他的组件并不关心列表数据。

监听：

  • 监听页号的变化，依据当前的查询条件获取新的记录，用于翻页，不用重新统计总数。

事件：

  • 统计总数并且翻到第一页，用于查询条件变化，添加新记录。
  • 重新获取当前页号的列表数据，用于修改数据后的更新。
  • 重新获取当前页号的列表数据，并且统计总记录数，用于删除数据后的更新。

是否重新统计总数

可能你会发现上面获取数据里面有一个明显的区别，那就是是否需要统计总数。
在数据量非常大的情况下，如果每次翻页都重新统计总数，那么会严重影响性能！
其实仔细考虑一下，一些情况是不用重新统计总数的，比如翻页、修改后的更新等，这些操作都不会影响总记录数（不考虑并发操作），那么我们也就不必每次都重新统计。

文件结构

基础功能搭建好了之后，剩下的就简单了，建立组件设置模板、控件、组件和使用状态即可。
总体结构如下：

文件结构

列表状态的使用

基础工作做好之后我们来看看，在各个组件里面是如何使用状态的。

查询

首先看看查询，用户设置查询条件后，查询控件把查询条件记入状态里面。
然后调用状态管理里的 reloadFirstPager ，获取列表数据。
查询控件支持防抖功能。

<template>
  <!--查询-->
  <nf-el-find
    v-model="listState.query"
    v-bind="findProps"
    @my-change="myChange"
  />
</template>

直接使用查询控件，模板内容是不是很简单了？

import { reactive } from 'vue'
// 加载json
import loadJson from './control/loadjson.js'
// 状态
import VueDS from 'vue-data-state'

  // 组件
  import nfElFind from '/ctrl/nf-el-find/el-find-div.vue'

  // 属性：模块ID、查询条件
  const props = defineProps({
    moduleId:  [Number, String]
  })

  // 设置 查询的 meta
  const findProps = reactive({reload: true})
  loadJson(props.moduleId, 'find', findProps)

  // 访问状态
  const { get } = VueDS.useStore()
  // 获取状态
  const listState = get.dataListState()
  // 用户设置查询条件后触发
  const myChange = (query) => {
    // 获取第一页的数据，并且重新统计总数
    listState.reloadFirstPager()
  }

分页

分页就很简单了，查询条件由查询控件搞定，所以这里只需要按照 el-pagination 的要求，把分页状态设置给 el-pagination 的属性即可。

<template>
  <!--分页-->
  <el-pagination
    background
    layout="prev, pager, next"
    v-model:currentPage="pager.pageIndex"
    :page-size="pager.pageSize"
    :total="pager.pageTotal">
  </el-pagination>
</template>

直接把状态作为属性值。

// 状态
import VueDS from 'vue-data-state'

// 访问状态
const { get } = VueDS.useStore()
// 获取分页信息
const pager = get.dataListState().pager

直接获取分页状态设置 el-pagination 的属性即可。
翻页的时候 el-pagination 会自动修改 pager.pageIndex 的值，而状态管理里面会监听其变化，然后获取对应的列表数据。

添加、修改

添加完成之后，总记录数会增加，所以需要重新统计总记录数，然后翻到第一页。
而修改之后，一般总记录数并不会变化，所以只需要重新获取当前页号的数据即可。

<template>
  <div>
    <!--表单-->
    <el-form
      ref="formControl"
      v-model="model"
      :partModel="partModel"
      v-bind="formProps"
    >
    </el-form>
    <span class="dialog-footer">
      <el-button @click="">取 消</el-button>
      <el-button type="primary" @click="mysubmit">确 定</el-button>
    </span>
  </div>
</template>

使用表单控件和两个按钮。

import { computed, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
// 加载json
import loadJson from './control/loadjson.js'

// 状态
import VueDS from 'vue-data-state'

// 仿后端API
import service from './api/data-service.js'
 
  // 表单组件
  import elForm from '/ctrl/nf-el-form/el-form-div.vue'

  // 访问状态
  const { get } = VueDS.useStore()

  // 定义属性
  const props = defineProps({
    moduleId:  [Number, String], // 模块ID
    formMetaId:  [Number, String], // 表单的ID
    dataId: Number, // 修改或者显示的记录的ID
    type: String // 类型：添加、修改、查看
  })

  // 模块ID + 表单ID = 自己的标志
  const modFormId = computed(() => props.moduleId + props.formMetaId)

  // 子组件里面获取状态
  const dataListState = get.dataListState(modFormId.value)
  
  // 表单控件的 model
  const model = reactive({})
  
  // 表单控件需要的属性
  const formProps = reactive({reload:false})
  // 加载需要的 json
  loadJson(props.moduleId, 'form_' + props.formMetaId,  formProps)
  
  // 仿后端API
  const { getData, addData, updateData } = service(modFormId.value)

  // 监听记录ID的变化，加载数据便于修改
  watch(() => props.dataId, (id) => {
    if (props.type !== 'add') {
      // 加载数据
      getData( id ).then((data) => {
        Object.assign(model, data[0])
        formProps.reload = !formProps.reload
      })
    }
  },
  {immediate: true})

  // 提交数据
  const mysubmit = () => {
    // 判断是添加还是修改
    if (props.type === 'add'){
      // 添加数据
      addData(model).then(() => {
        ElMessage({
          type: 'success',
          message: '添加数据成功!'
        })
        // 重新加载第一页的数据
        dataListState.reloadFirstPager()
      })
    } else if (props.type === 'update') {
      // 修改数据
      updateData(model, props.dataId).then(() => {
        ElMessage({
          type: 'success',
          message: '修改数据成功!'
        })
        // 重新加载当前页号的数据
        dataListState.reloadCurrentPager()
      })
    }
  }

代码稍微多了一些，基本上就是在合适的时机调用状态里的重新加载数据的事件。

删除

删除之后也会影响总记录数，所以需要重新统计，然后刷新当前页号的列表数据。
删除的代码写在了操作按钮的组件里面，对应删除按钮触发的事件：

      case 'delete':
        dialogInfo.show = false
        // 删除
        ElMessageBox.confirm('此操作将删除该记录, 是否继续？', '温馨提示', {
          confirmButtonText: '删除',
          cancelButtonText: '后悔了',
          type: 'warning'
        }).then(() => {
          // 后端API
          const { deleteData } = service(props.moduleId + meta.formMetaId)
          deleteData(dataListState.choice.dataId).then(() => {
            ElMessage({
              type: 'success',
              message: '删除成功！'
            })
            dataListState.reloadPager() // 刷新列表数据
          })
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '已经取消了。'
          })
        })
        break

删除成功之后，调用状态的 dataListState.reloadPager() 刷新列表页面。

快捷键

我是喜欢用快捷键实现一些操作的，比如翻页、添加等操作。
用鼠标去找到“上一页”、“下一页”或者需要的页号，这个太麻烦。
如果通过键盘操作就能翻页，是不是可以更方便一些呢？
比如 w、a、s、d，分别表示上一页、下一页、首页、末页；数字键就是要翻到的页号。

是不是有一种打游戏的感觉？
实现方式也比较简单，一开始打算用 Vue 的键盘事件，但是发现似乎不太好用，于是改用监听document 的键盘事件。


  /**
   * 列表页面的快捷键
   */
  const setHotkey = (dataListState) => {
    // 设置分页、操作按钮等快捷键
    // 计时器做一个防抖
    let timeout
    let tmpIndex = 0 // 页号
    document.onkeydown = (e) => {
      if (!(e.target instanceof HTMLBodyElement)) return // 表单触发，退出
      if (e.altKey) {
        // alt + 的快捷键，调用操作按钮的事件
        dataListState.hotkey(e.key)
      } else {
        // 翻页
        const maxPager = parseInt(dataListState.pager.pageTotal / dataListState.pager.pageSize) + 1
        switch (e.key) {
          case 'ArrowLeft': // 左箭头 上一页
          case 'PageUp':
          case 'a':
            dataListState.pager.pageIndex -= 1
            if (dataListState.pager.pageIndex <= 0) {
              dataListState.pager.pageIndex = 1
            }
            break
          case 'ArrowRight': // 右箭头 下一页
          case 'PageDown':
          case 'd':
            dataListState.pager.pageIndex += 1
            if (dataListState.pager.pageIndex >= maxPager) {
              dataListState.pager.pageIndex = maxPager
            }
            break
          case 'ArrowUp': // 上箭头
          case 'Home': // 首页
          case 'w':
            dataListState.pager.pageIndex = 1
            break
          case 'ArrowDown': // 下箭头
          case 'End': // 末页
          case 's':
            dataListState.pager.pageIndex = maxPager
            break
          default:
            // 判断是不是数字
            if (!isNaN(parseInt(e.key))) {
              // 做一个防抖
              tmpIndex = tmpIndex * 10 + parseInt(e.key)
              clearTimeout(timeout) // 清掉上一次的计时
              timeout = setTimeout(() => {
                // 修改 modelValue 属性
                if (tmpIndex === 0) {
                  dataListState.pager.pageIndex = 10
                } else {
                  if (tmpIndex >= maxPager) {
                    tmpIndex = maxPager
                  }
                  dataListState.pager.pageIndex = tmpIndex
                }
                tmpIndex = 0
              }, 500)
            }
        }
      }
      e.stopPropagation()
    }
  }

这段代码，其实是放在状态管理类里面的，拿出来单独介绍一下，避免混淆。

  • document.onkeydown
    监听键盘按下的事件，这个 e 并不是原生的 e，而是Vue封装之后的 e。
    首先要判断一下事件来源，如果是 input 等触发的需要跳过，以免影响正常的数据输入。
    然后是判断按了哪个按键，根据需求调用对应的函数。

e 的样子

  • altKey
    是否按下了 alt 键。有些快捷键可以是组合方式，本来想用 ctrl 键的，但是发现在网页里面 ctrl 开头的快捷键实在太多，抢不过，所以只好 用 alt。

  • alt + a 相当于按 添加按钮

  • alt + s 相当于按 修改按钮

  • alt + d 相当于按 删除按钮

zhidao.baidu.com/question/1502939440348293619.html
www.im286.net/thread-24259323-1.html
blog.51cto.com/u_15205168/2807757
xueqiu.com/4824316523/180714746
www.meipian.cn/3m237o25?share_depth=1
weibo.com/ttarticle/p/show?id=2309404640437720711421
zhidao.baidu.com/question/1246811797793270539.html
zhidao.baidu.com/question/1762784674689527388.html
wenwen.sogou.com/question/q925462833062676887.htm
wenwen.sogou.com/question/q925464186673629659.htm
wenwen.sogou.com/question/q925464761700125175.htm
www.zhihu.com/question/461325786
zhuanlan.zhihu.com/p/375117150

www.im286.net/thread-24260424-1.html
www.meipian.cn/3mc0vjg7?share_depth=1
blog.51cto.com/weixincrm/2826041
xueqiu.com/4824316523/181165793
www.im286.net/thread-24261917-1.html
beijing.wanye.cc/bbs/show.asp?id=69986
beijing.wanye.cc/bbs/show.asp?id=70310
beijing.wanye.cc/bbs/show.asp?id=70423
blog.51cto.com/weixincrm/2861038
www.im286.net/thread-24261973-1.html
www.meipian.cn/3mwlkpew?share_depth=1
weibo.com/ttarticle/p/show?id=2309404644408934137992
zhidao.baidu.com/question/2019041767711428828.html
t.bilibili.com/533800482832932695?tab=2
www.meipian.cn/3n4zk8vq?share_depth=1
xueqiu.com/4824316523/182144147
www.im286.net/thread-24262675-1.html
blog.51cto.com/weixincrm/2882636
weibo.com/ttarticle/p/show?id=2309404645829867864240
zhuanlan.zhihu.com/p/378898588

你觉得 a 代表 add，d 代表 delete吗？
其实不是的，a、s、d 的键位可以对应操作按钮里面前三个按钮。就酱。

  • 数字翻页的防抖
    如果不做防抖的话，只能实现 1-9 的页号翻页，如果做了防抖的话，基本可以做到三位数页号的翻页。所以手欠做了个防抖。

ngv2021
关注
【vue3+ts后台管理】角色列表
Errol's Blog
08-04 833
角色管理完成
Vue3--后台管理系统--第一章
qq_63732605的博客
07-21 467
后台管理系统
vue 的5中组件通信方式
辣辣的草莓酱
08-19 290
vue 组件之间的通信方式父组件给子组件传值子组件给父组件传值不相关组件之间传值父直接访问子组件 父组件给子组件传值 子组件中通过props接收父组件传递的数据 父组件给子组件通过属性传值 props 类型：Array<string> | Object Object的选项配置 type default：any required：Boolean validator：Function，自定义验证函数会将该prop的值作为唯一的参数代入 示例： 父组件 <temp
Vue3+Vuex4实现组件公共状态
明知山
03-25 351
安装Vuex4.0以上版本 npm install vuex@4.0.0 -s 在src目录下新建store/index.js文件夹 import { createStore } from 'vuex'; export default createStore({ state: { num: 123 } }); 在main.js引入 import { createApp } from 'vue' import App from './App.vue' im
VUE去哪儿网 3 列表页面
weixin_43715100的博客
06-24 178
路由配置 src>router>index.js增加一个router { path: '/city', name: 'City', component: City } 给header.vue中的.header-right包裹一个<router-link to="/city"> </router-link> 此时点击城市后可以跳转但是会变色 因此给.header-right加个样式 color: #fff 搜索框布局 没什么...
vue3+element-plus 封装列表页，分页，排序，导出
鹤渺的星球
10-17 2397
虽然是简单的业务逻辑，但是封装起来使用更方便，这里是记录这种常见类型的列表页的业务需求实现方式。还有一篇实现，可以筛选的表格列 的实现方式。
vue3后台管理系统源码，含增删改查及echarts实例，下载安装即用
03-26
Vue3 后台管理系统是一个基于 Vue.js 框架的高效、灵活的管理平台开发解决方案。这个源码项目包括了完整的增删改查（CRUD）功能和 ECharts 实例，为开发者提供了一个快速搭建后台应用的基础模板。下面将详细介绍其中...
基于vue3+elementPlus的后台管理系统模板
02-18
Vue3是Vue.js的最新版本，带来了诸多性能优化和开发体验改进，而ElementPlus则是一个基于Vue3的组件库，提供了丰富的UI组件，使得开发者能够快速构建出美观、响应式的后台管理系统。 Vue3的核心改进包括： 1. **...
Vue3-后台管理系统(第三篇上)
可可的博客
07-22 1155
项目代码 第一步： 创建新项目 第二步： 设置全局css样式、引入图标库 reset.css 到main.js文件中引入css样式 到阿里巴巴矢量库，将需要的图标添加到项目中，点击复制代码引入 现在好像不支持链接的形式,可以下载文件本地引入即可第三步： 添加elementUi组件 如果提示需要安装python2.x版本的环境就去官网下载一个2.x的版本,下载后可能没有Script文件,想要生成找到此文件运行setup.py.git,配置环境变即可 第四步： 界面路由搭建 搭建需要的路由格式 Vue3-路由跳
基于Vue的后台管理系统模板
02-18
2. **状态管理**：Vuex作为全局状态管理工具，存储和管理组件间共享的状态，确保数据的一致性。 3. **API接口封装**：通过axios或fetch等库封装HTTP请求，便于与后端API交互，获取或提交数据。 4. **权限控制**：...
后台管理系统-品牌静态管理组件
princess66的博客
11-29 163
默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用。data:表格组件将来需要展示的数据----数组类型。border:给表格添加边框。有几列将column复制几次。align:标题的对齐方式。width：对应列的宽度。动态的业务逻辑之后做。label：显示标题。
后台管理制作首页组件及ui框架的使用
qq_33316107的博客
11-02 646
制作首页组件 整体结构分为左右结构,右边分为上下结构布局 1.左侧菜单项添加 2.顶部 3.下边框显示栏 使用Element-ui框架中的Container 布局容器 页面整体布局 <div class='index'> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header>Header</el-heade
vue原理相关
萌兔兔MMQ！！
08-11 387
DOM-Diff：diff是发生在虚拟 DOM 上的，将新虚拟 DOM 和旧虚拟 DOM进行 diff （精细化比较），得出最小的更新范围，最后反映到真实的 DOM 上的一个过程，这个过程其实是一个patch(补丁)过程，即指对旧的VNode进行修补，打补丁从而得到新的VNode。组件化的历史：在vue之前已经有组件化的概念了，想asp、jsp、php等就有组件化的概念，nodejs也有组件化。重新定义数组原型，创建新对象，原型指向oldArrayProperty，再扩展新的方法，所以不会影响原型。...
Vue3+Vite+TS后台项目 ~ 7.管理员列表
yuan
12-27 974
唯有热爱， 可抵岁月长河
Vue实战之实现员工列表案例（结合后端服务接口）
9.冄2.7.號的博客
07-30 1091
演示 后端服务接口 @RestController @CrossOrigin public class EmpController { private static final Logger log = LoggerFactory.getLogger(EmpController.class); /** * 服务对象 */ @Resource private EmpService empService; /** * 通过主键查询单条数据
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...
vue3, 前端后台管理模板
最新发布
05-14
vue3, 前端后台管理模板
Vue3+Vant开发：个人信息管理
程序员老茶的博客
04-18 1488
Vue3+Vant开发：个人信息管理
vue.js组件数据绑定_Vue 2.x指令，用于将热键绑定到组件
cuk5239的博客
07-22 329
vue.js组件数据绑定 v热键 (v-hotkey) Vue 2.x directive for binding hotkeys to components. Vue 2.x指令，用于将热键绑定到组件。 View demo 查看演示 Download Source 下载源 安装 (Install) $ npm i --save v-hotkey 用法 (Usage) import...
vue3实现通用后台管理（傻瓜式一步一步记录代码实现过程）
edison4499的博客
11-13 5342
(宁渡课堂)傻瓜式记录用vue3一步一步实现通用后台管理的过程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值