springboot3。0。4RBAC（3）用户和角色及vi

　　我们对接过了菜单列表，这次来对接用户，和之前一样RestControllerRequestMapping（sysuser）publicclassSysUserController｛AutowiredSysUserServicesysUserService；GetMapping（page）publicJSObjectPageDataSysUserDTOpage（ApiIgnoreRequestParamMapString，Objectparams）｛PageDataSysUserDTOpagesysUserService。page（params）；returnnewJSObjectPageDataSysUserDTO（）。ok（page）；｝｝
　　对应的前端代码templateelform：inlinetrue：modelstate。dataFormkeyup。enterstate。getDataList（）elformitemelinputvmodelstate。dataForm。usernameplaceholder用户名clearableelformitemelformitemelbuttonclickquery查询elbuttonelformitemelformeltablevloadingstate。dataListLoading：datastate。dataListborderselectionchangedataListSelectionChangeHandlesortchangedataListSortChangeHandlestylewidth：100eltablecolumntypeselectionheaderaligncenteraligncenterwidth50eltablecolumnpropusernamelabel用户名sortablecustomheaderaligncenteraligncentereltablecolumnpropdeptNamelabel部门名称headeraligncenteraligncentereltablecolumnpropemaillabel邮箱headeraligncenteraligncentereltablecolumnpropmobilelabel手机号sortablecustomheaderaligncenteraligncentereltablecolumnpropgenderlabel性别sortablecustomheaderaligncenteraligncentereltablecolumnpropstatuslabel用户状态sortablecustomheaderaligncenteraligncentertemplatevslotscopeeltagvifscope。row。status0sizesmalltypedanger正常eltageltagvelsesizesmalltypesuccess停用eltagtemplateeltablecolumneltablecolumnpropcreateDatelabel创建日期sortablecustomheaderaligncenteraligncenterwidth180eltableelpagination：currentpagestate。page：pagesizes〔10，20，50，100〕：pagesizestate。limit：totalstate。totallayouttotal，sizes，prev，pager，next，jumpersizechangepageSizeChangeHandlecurrentchangepageCurrentChangeHandletemplatestylelangscssscoped。tableBox｛：deep。cell｛height：40px！important；｝｝style
　　我们发现这样写代码，有好多共同点，后端我们已经用了代码生成，可以一键生成，但是前端还要每次都写一次，有些不优雅，所以这边定义了一个hookimport｛IObject，IViewHooks，IViewHooksOptions｝from。。typesinterface；import｛http｝fromutilshttp；import｛onMounted｝fromvue；constuseView（props：IViewHooksOptionsIObject）：IViewHooks｛constdefaultOptions：IViewHooksOptions｛createdIsNeed：true，activatedIsNeed：false，getDataListURL：，getDataListIsPage：false，deleteURL：，deleteIsBatch：false，deleteIsBatchKey：id，exportURL：，dataForm：｛｝，dataList：〔〕，order：，orderField：，page：1，limit：10，total：0，dataListLoading：false，dataListSelections：〔〕，elTable：｛｝｝；constmergeDefaultStateToPageState（options：IObject，props：IObject）：IViewHooksOptions｛for（constkeyinoptions）｛if（！Object。getOwnPropertyDescriptor（props，key））｛props〔key〕options〔key〕；｝｝returnprops；｝；conststatemergeDefaultStateToPageState（defaultOptions，props）；onMounted（（）｛if（state。createdIsNeed！state。activatedIsNeed）｛viewFns。query（）；｝｝）；constviewFns｛获取数据列表query（）｛if（！state。getDataListURL）｛return；｝state。dataListLoadingtrue；http。get（state。getDataListURL，｛order：state。order，orderField：state。orderField，page：state。getDataListIsPage？state。page：null，limit：state。getDataListIsPage？state。limit：null，。。。state。dataForm｝）。then（（res：any）｛state。dataListLoadingfalse；state。dataListstate。getDataListIsPage？res。data。list：res。data；state。totalstate。getDataListIsPage？res。data。total：0；｝）。catch（（）｛state。dataListLoadingfalse；｝）；｝，多选dataListSelectionChangeHandle（val：IObject〔〕）｛state。dataListSelectionsval；｝，排序dataListSortChangeHandle（data：IObject）｛if（！data。order！data。prop）｛state。order；state。orderField；returnfalse；｝state。orderdata。order。replace（ending，）；state。orderFielddata。prop。replace（（〔AZ〕）g，1）。toLowerCase（）；viewFns。query（）；｝，分页，每页条数pageSizeChangeHandle（val：number）｛state。page1；state。limitval；viewFns。query（）；｝，分页，当前页pageCurrentChangeHandle（val：number）｛state。pageval；viewFns。query（）；｝，搜索getDataList（）｛state。page1；viewFns。query（）；｝，｝；return｛。。。viewFns｝；｝；exportdefaultuseView；
　　在user上面代码中引入hookimportuseViewfromhooksuseView；import｛reactive，toRefs｝fromvue；defineOptions（｛name：User｝）；constviewreactive（｛getDataListURL：sysuserpage，getDataListIsPage：true，deleteURL：sysuser，deleteIsBatch：true，exportURL：sysuserexport，dataForm：｛username：，deptId：，postId：，gender：｝｝）；conststatereactive（｛。。。useView（view），。。。toRefs（view）｝）；