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

　　我们对接过了菜单列表，这次来对接用户，和之前一样@RestController @RequestMapping(＂/sys/user＂) public class SysUserController {     @Autowired     SysUserService sysUserService;      @GetMapping(＂page＂)     public JSObject> page(@ApiIgnore @RequestParam Map params){         PageData page = sysUserService.page(params);          return new JSObject>().ok(page);     }  }
　　对应的前端代码    
　　我们发现这样写代码，有好多共同点，后端我们已经用了代码生成，可以一键生成，但是前端还要每次都写一次，有些不优雅，所以这边定义了一个hookimport { IObject, IViewHooks, IViewHooksOptions } from ＂@/../types/interface＂; import { http } from ＂@/utils/http＂; import { onMounted } from ＂vue＂;  const useView = (props: IViewHooksOptions | IObject): IViewHooks => {    const defaultOptions: 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: {}   };    const mergeDefaultStateToPageState = (     options: IObject,     props: IObject   ): IViewHooksOptions => {     for (const key in options) {       if (!Object.getOwnPropertyDescriptor(props, key)) {         props[key] = options[key];       }     }     return props;   };   const state = mergeDefaultStateToPageState(defaultOptions, props);   onMounted(() => {     if (state.createdIsNeed && !state.activatedIsNeed) {       viewFns.query();     }   });   //   const viewFns = {     // 获取数据列表     query() {       if (!state.getDataListURL) {         return;       }       state.dataListLoading = true;       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.dataListLoading = false;           state.dataList = state.getDataListIsPage ? res.data.list : res.data;           state.total = state.getDataListIsPage ? res.data.total : 0;         })         .catch(() => {           state.dataListLoading = false;         });     },     // 多选     dataListSelectionChangeHandle(val: IObject[]) {       state.dataListSelections = val;     },     // 排序     dataListSortChangeHandle(data: IObject) {       if (!data.order || !data.prop) {         state.order = ＂＂;         state.orderField = ＂＂;         return false;       }       state.order = data.order.replace(/ending$/, ＂＂);       state.orderField = data.prop.replace(/([A-Z])/g, ＂_$1＂).toLowerCase();       viewFns.query();     },     // 分页, 每页条数     pageSizeChangeHandle(val: number) {       state.page = 1;       state.limit = val;       viewFns.query();     },     // 分页, 当前页     pageCurrentChangeHandle(val: number) {       state.page = val;       viewFns.query();     },     //搜索     getDataList() {       state.page = 1;       viewFns.query();     },   };   return {     ...viewFns   }; };  export default useView;
　　在user上面代码中引入hookimport useView from ＂@/hooks/useView＂; import { reactive, toRefs } from ＂vue＂;  defineOptions({   name: ＂User＂ });  const view = reactive({   getDataListURL: ＂/sys/user/page＂,   getDataListIsPage: true,   deleteURL: ＂/sys/user＂,   deleteIsBatch: true,   exportURL: ＂/sys/user/export＂,   dataForm: {     username: ＂＂,     deptId: ＂＂,     postId: ＂＂,     gender: ＂＂   } });  const state = reactive({ ...useView(view), ...toRefs(view) });