先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的)

笔者选用 方式。先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现。 新建项目 : 通过 下载包,但报错如下: 换一种下载方式: chrome 下载失败,edge 下载成功,解压到项目根目录。 hello-world 新建文件 ,内容直接拷贝于官网: Tip:amis-test 项目结构如下: 需要更改一下 css,js 资源引用路径。更改内容: 页面效果如下: amis-hello-world.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 Tip:笔者使用 vscode 的 live Server 插件,可直接右键启动一服务预览该页面。 后端服务 为了方便演示,笔者使用 实现后端接口。 目录调整 最初目录结构如下: 执行如下操作: 新建 文件夹,并将 skd 目录,hello-world.html 放到 public 文件夹中。 修改 的配置部分 新建 。这是一个普通的 html 页面,登录成功后跳转至此页 重写服务 ,其中数据库用对象模拟,直接放于内存。 调整后的目录结构如下: 服务器 会开启一个服务,并将 目录作为对外开放,能接收前端请求,并存入数据库并返回接口数据。 登录页 测试效果 启动服务: amis-login-error.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 输入正确的用户名密码,点击登录,就会跳转到系统主页。 跨域报错 引入后台模板 amis 在 github 的 readme.md 中提供了一个后台模板,我们将其引入。 解压完毕后的目录结构如下: 将 和 拷贝到 public 目录,并将 index.html 重命名为 。 直接访问 ,界面如下: amis-admin.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 任务计划初始化 接着我们将后台模板精简一下,将任务计划初始页完成。 pages 中只有一个 js 文件,其他都是 .json 文件。 保留唯一的 js 文件和 ,其他都删除。并将 jsonp.js 重命名为 。 Tip: 是网站配置,这里只保留一个一级菜单; 是一级菜单的配置文件,这里单独提取出来,方便维护。也能写注释,.json 文件中不能写注释,页面会报错的; 最后稍微修改一下 ,比如 logo,主题改为antd: 最终效果如下图所示: amis-admin2.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 任务计划列表 amis-schedule-table.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 然后编写获取任务计划的接口,接口内容直接来自官网,笔者将 id 改为动态的。 效果如下图所示: amis-schedule-table2.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 amis-schedule-table3.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 授权 通常,只有登录后才能看到数据。比如我们给列表查询接口添加如下权限: 再次请求后端数据,效果如下图所示: amis-schedule-unauth.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 下面我们在发送请求时添加 token,并给 api 加上授权限制。代码如下: 如果在浏览器控制台清空 token,再次请求,就看不到任务列表数据了。 路径美化 未登录的重定向 现在存在几个问题:

登录页和主页的 url 有点丑。比如登录页是 ,希望改成 期望输入 能直接到主页去,如果没有登录,就重定向到登录页 修复共涉及 4 个文件: ,资源路劲的变化,添加一个全局响应适配器,未授权则重定向到登录页 ,资源路劲的变化,登录成功后跳转至 ,url 的修改 ,api 的修改 Tip: url 跟资源路径是没有关系的。比如请求 ,服务器却可以返回 的内容。 接下来测试: 首先在控制台执行 ,清空 token。 接着在浏览器中输入 ,你会发现浏览器首先重定向到 ,然后由于没有 token,于是在重定向到 。如下图所示: amis-url-pretty.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 输入正确的用户名和密码,登录成功,直接来到任务计划。请看下图: amis-url-pretty2.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 任务计划的CURD 创建 直接将官网的代码拷贝到 中。 amis-schedule-table-add.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 点击,效果如下图所示: amis-schedule-table-add2.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 修改接口,后端接收到新增的信息,在控制台中输入。代码如下所示: 再次点击“新增”,输入 和 ,点击保存,界面提示保存成功,同时表格也会刷新当前页。如下图所示: amis-schedule-table-add3.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 服务器控制台输出如下信息: 更新 参考官网的示例,将对应代码拷贝至 : amis-schedule-table-modify.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 笔者新增两个 api,一个是根据 id 查询如果不提供这个 api,amis 则使用前端的数据,一个是真正修改的 api。代码如下所示: 点击修改按钮,默认是抽屉式弹框。效果如下图所示: amis-schedule-table-modify2.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 点击保存。效果如下图所示: amis-schedule-table-modify3.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 删除 参考官网的示例,将对应代码拷贝至 : amis-schedule-table-delete3.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 代码修改如下: 效果如下图所示: amis-schedule-table-delete.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 amis-schedule-table-delete2.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 参考官网的示例,将对应代码拷贝至 ,主要是 和 : amis-schedule-table-query2.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 代码修改如下: 效果如下图所示: amis-schedule-table-query.png 先用起来再说,笔者相信同样的需求用另一种方式应该也能够实现(各种需求方法都有他们共同适用的) 热门话题 查询字段 和 已发送给后端。 amis 后台系统完整代码 至此,我们就用 amis 搭建了一个后台系统,包括登录页,简单的权限控制以及任务计划模块。 后续如果需要添加其他类似的模块,差不多只需要写配置。 这里的任务计划模块不到 200 行,包含的功能却比较丰富:分页的,,,,和。 site.json home.html login.html 后台服务 server.js: github 这里罗列了许多低代码平台,可自行查看。


1g

发表评论

Copyright 2002-2022 by 创奇升降机械有限公司(琼ICP备2022001899号-3).All Rights Reserved.