python 做网站 套件,天津网站优化步骤,网站建设费应入什么科目,网站开发工程师求职简历ue-vben-admin 与.net core 结合实例 这里计划使用.net core 作为后端 。目标#xff1a;打造好看 易用 开箱即用 的netcore一体化框架。Vue Vben Admin For NetCore 取命 hcrain-vvadmin 我不是前端人员 但有时开发还是要写一些界面。
之前使用layui是时候 狠心升级下了。
…ue-vben-admin 与.net core 结合实例 这里计划使用.net core 作为后端 。目标打造好看 易用 开箱即用 的netcore一体化框架。Vue Vben Admin For NetCore 取命 hcrain-vvadmin 我不是前端人员 但有时开发还是要写一些界面。
之前使用layui是时候 狠心升级下了。
只为了好看----------于是 小白教程来了。可以根据 git提交一步步来重现我的实现。
【后面会发布到在线 效果预览 还没发布啊 我要将它改造成我自己想要的。要时间。这里占个坑而已。不回改文章了。】
目录 第3节---简单列表的增删查改
说在前面
1为简单点先在复制一份原有的角色页相关内容
2创建业务无关的接口
3分析-》了解-》调整列表查询页
1怎样自定义调用后台Api入参自由定义参数 怎样获取到附带的表格查询条件
2因为我们返回的结构与table要求不一样所以要这里指定下
3删除记录的处理
4增加角色
git提交记录
本系列文章后在还说会什么? 第3节---简单列表的增删查改
说在前面
1 因为vue-vben-admin table 有高度的封装如果你的是新项目可以直接按它的接口风格来定义接口这个会简单点。下面主要说 本来就有接口了怎样让 vue-vben-admin table 与原有的自定义接口对接。
2 目前主流的前端在框架都学了后端的搞多层架构 多层定义。对于我来说 太麻烦了。不够直接开发也会慢无法做到快速开发。所以专业的不要学本文。
3 我理想是 定义界面---定义json对象-----统一axios的接口所有界面业务走统一的api接口 不会一个个去定义 功能就实现了 这里以角色的管理为例。可以看代码提交 在界面的代码上 我也很可能说明了 列表各参数的使用了 1为简单点先在复制一份原有的角色页相关内容 同时添加路由 2创建业务无关的接口
post接口HcrainPost
get接口HcrainGet
//通用POST查询
export function HcrainPost(url, params: {}) {return defHcHttp.postBasicFetchResultHc{}({ url: url, params });
}//通用Get
export function HcrainGet(url) {return defHcHttp.getBasicFetchResultHc{}({ url: url});
}
//统一的返回
export interface BasicFetchResultHcT {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?idrecord[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目标快速简单的开发框架 只要会复制就可以实现新业务----- 多谢
