Ant Design Pro+Amis构建后台管理系统
文章平均质量分 96
Ant Design Pro 是基于 Ant Design 的一整套企业级中后台前端/设计解决方案。
Amis 是百度开源的低代码前端框架,它使用 JSON 配置来生成页面。
我的想是:把二者结合起来,对于一般数据库表的CRUD使用Amis,一套Json搞定。对于稍微复杂的要求用Ant Design
JimmyTsai75
这个作者很懒,什么都没留下…
展开
-
三、以user表为例,用Amis+Sails实现增删改查操作
"footerToolbar" : [ "statistics" , //显示统计数据,比如1/3 总共:22 项 "switch-per-page" , //可以切换perPage值(设置pageSize) "pagination" //分页组件 ] ,保存后,界面就有可以设置分页大小的按钮了。"type" : "tpl" , "tpl" : "一共有 ${count} 行数据。原创 2023-01-15 16:29:56 · 3239 阅读 · 2 评论 -
二、连接Sails后端实现登录
我们在前端只是修改了service/api.ts里面一个login的请求,其他的请求没有动,那那些请求必然是没有在header里面增加token的,没有token的访问在sails端被禁止了,所以当然是会返回403了。这样本地保存的token和写在请求头里面的token是不一样的,这样可以增加一点安全系数。至此,我们成功的实现了和Sails后端的通讯,实现真正的通过数据库对前端输入的用户email和密码进行验证的登录过程,并且登录成功之后,可以查询当前登录用户信息,以及对敏感api的Jwt保护性的访问。原创 2023-01-14 20:41:27 · 639 阅读 · 0 评论 -
一、Ant Design Pro 与 Amis 结合
而我们前面对菜单的改造是希望我们可以访问本地的json文件,这样我们就需要把这两种访问方式区分开来,并且amis的schema文档内部也有需要访问后端api的时候,为此我们需要简单的封装一下umi 的request。2、加载菜单文件的时候,应该考虑当前用户选择的语言,然后根据用户当前的语言来加载不同的菜单文件,为了实现此功能,我们的函数参数应该直接修改成用户当前的语言,然后我们本地文档名称也应该直接用用户locale的key作为文件名。它最大的优势是,不需要代码就可以实现许多我们需要实现的功能。原创 2023-01-08 10:17:23 · 3444 阅读 · 1 评论 -
零、Ant Design Pro 开始
第一次采用ProLayout的时候也担心会不会不够灵活,比如我需要修改折叠按钮(collapsed)的位置能不能实现,带着这种猜疑,我进入官网,我的担心立刻解除,他们竟然直接就有了类似的demo: (可以进入以下网址,查看具体示例代码)https://procomponents.ant.design/components/layout#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84-collapsed。原创 2023-01-01 17:13:55 · 2038 阅读 · 4 评论