vue-vben-admin 与.net core 结合实例【自学与教学小白教程】---第3节

//通用POST查询
export function HcrainPost(url, params: {}) {
  return defHcHttp.post<BasicFetchResultHc<{}>>({ url: url, params });
}

//通用Get
export function HcrainGet(url) {
  return defHcHttp.get<BasicFetchResultHc<{}>>({ url: url});
}
//统一的返回
export interface BasicFetchResultHc<T> {
  data: T[];
  iTotalRecords: number;
  isSuccess: Boolean;
  message: string;
}

3分析-》了解-》调整列表查询页

Table封装有点强大，但我又不想学。所以下面的说法不一定对，但能用。

1怎样自定义调用后台Api入参（自由定义参数）? 怎样获取到附带的表格查询条件

? 1利用beforeFetch 处理查询条件

? ?2api 参数里，定义后端要的数据。如下图。将它默认的??page, pageSize，分页字段转为我要的??

page:page,?length:pageSize,? ? ?同时带个查询栏的查询条件? queryKeyValue:postsearch,

注意?handleSearchInfoFn? 在页面第一次加载没有触发，所以我使用了beforeFetch

3 注意我这里也使用了通用的post接口HcrainPost，直接定义url和参数，这就是我想要的，不要到处定义（这里后面应该还会改? 还是要二次封让看起来不要太lose）

api: async ({ page, pageSize,e }) => {//转化api查询入参

? ? ? console.log(postsearch);

? ? ? const res = await HcrainPost("/api/SysRole/Search",{

? ? ? ? page:page,

? ? ? ? length:pageSize,

? ? ? ? queryKeyValue:postsearch,

? ? ? ? orderByFiled:' id desc'

? ? ? });

? ? ? /** 一定要返回改格式的数据 */

? ? ? return res;

? ? },

? ? beforeFetch: (prams) => {//请求之前对参数进行处理，转化为自己要的结构

? ? ? postsearch=[];

? ? ? for (let pS in prams) {

? ? ? ? ? ?if(pS!="page" && pS!="pageSize")postsearch.push({

? ? ? ? ? ? fieldName:pS,

? ? ? ? ? ? fieldValue:prams[pS]

? ? ? ? ? ?});

? ? ? ? }

? ? },

? ? //可拿到查询时的值 开启表单后，在请求之前处理搜索条件参数

? ? handleSearchInfoFn: (prams) => {//这里会有一个问题 第一次加载 不会进来这里

? ? ? // postsearch=[];

? ? ? // for (let pS in prams) {

? ? ? // ? ? ?postsearch.push({

? ? ? // ? ? ? fieldName:pS,

? ? ? // ? ? ? fieldValue:prams[pS]

? ? ? // ? ? ?});

? ? ? // ? }

? ? ?

? ? },

2因为我们返回的结构与table要求不一样，所以要这里指定下?

  fetchSetting:{
      listField: 'data',//数据列表字段---返回的数据组字段
      totalField: 'iTotalRecords',  //数据总量字段----返回的数据数据字段
    },

3删除记录的处理

我还是使用通用的get 方法。（后台的删除是get 不要问为什么不是detelte 哈）

function handleDelete(record: Recordable) {
    console.log(record); console.log(1111111);
    const { createMessage } = useMessage();
     HcrainGet('/api/SysRole/Delete?id='+record['id']) 
     .then((a) => {
              console.log(77777777);
             console.log(a);
              createMessage.success(a["message"]);
              reload();
              //emit('success');//这个成列表 有关  会让列表自动查询一次
            })
            .catch(() => {
             // createMessage.error('修改角色状态失败');
            })
            .finally(() => {
              
            });
  }

4增加角色

这里使用是使用通用的接口HcrainPost

区分添加或删除，这里异常不用管，底层Api访问层处理了，但这个是否合适，有待业务增加后分析

async function handleSubmit() {
    try {
      const values = await validate();
      setDrawerProps({ confirmLoading: true });
      const { createMessage } = useMessage();
      var url="/api/SysRole/Create";
       if (unref(isUpdate)) url='/api/SysRole/Update';
       HcrainPost(url,values)
            .then((a) => {
              createMessage.success(a["message"]);
              closeDrawer();
              emit('success');//这个成列表 有关  会让列表自动查询一次
            })
            .catch(() => {
             // createMessage.error('修改角色状态失败');
            })
            .finally(() => {
              
            });

      console.log(values);
      //closeDrawer();
      //emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }

git提交记录

本次因不了解和工作的原因，前后有点长了。不好意思?

本系列文章后在还说会什么?

1菜单权限的管理的实现

2组织架构的实现

3文件管理的实现

4怎样让二次开发很简单

5下一节的复杂表单? 复杂查询的了解

6.net core代码的整理共享

7目标快速简单的开发框架只要会复制就可以实现新业务-----

多谢

文章来源:https://blog.csdn.net/qq_33906319/article/details/135424801
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！

vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第3节

第3节---简单列表的增删查改

说在前面

1为简单点，先在复制一份原有的角色页相关内容

2创建业务无关的接口