0


appsmith安装手记:7.第一个Appsmith应用(中)

在上一篇文章中,完成了任务管理界面,接着我们要创建另外两个页面:

一.登陆页面:
1.新建一个page,更名为login ,并"set as home page"
2.将“task"页面设置隐藏,因为我们不希望没有登录的用户,也可以看到这个页面。
3.在login页面上拖拽两个输入框,作为用户名(inp_username)和密码(inp_password)输入框,设置必填,设置密码输入框的类型为password,最后添加一个按钮“登录”,一个简单的登录页面就完成了。

4.新建Query:usercheck,从数据库用户表中获取用户
SELECT password,guid FROM dbo.Tasks_users where username={{inp_password.text}} and password={{inp_password.text}}

5.新建一个JSobject, 命名为logincheck,将export default中的默认内容删除,写一个loginchk函数
export default {
loginchk:async(username,passwordstr)=> {
const[loginuser] =await Usercheck.run({username},{passwordstr});
//如果有值,并且密码相同,则登录跳转到任务页面
if (loginuser && passwordstr === loginuser?.password)
{
await showAlert('欢迎'+username+'登录任务系统!','登录成功');
await navigateTo('Tasks');
}
else
{
await showAlert('hi'+username+'无法通过验证!','登录失败');
}
}
}


6.将按钮“登录”的onclick事件和logincheck的loginchk函数绑定,将用户名和密码作为参数传入。

7.预览
输入用户名和密码,通过验证,就可以跳转到了任务管理页面。

二.报表页面
1.创建一个页面Report,同样将它设置为隐藏。
3.创建一个Query, GetTasksbyDate
选择最近100天的任务
select tb. from (select top 100 billdate,Pedding,Pedding+Delivered+Accepted as total from tasks order by billdate desc) tb order by tb.billdate*
4.在Report上拖拽一个Chart, 因为我想按日期显示每天任务总量变化,就简单一个柱状图,选择Chart类型为Column Chart,这个时候Series data的示例数据如下:
[
{
"x": "Product1",
"y": 20000
},
{
"x": "Product2",
"y": 22000
},
{
"x": "Product3",
"y": 32000
}
]
将示例数据删除,将你Query填入,并map到x/y轴:

{{getTaskbyDate.data.map( p => ({x: moment(p.billdate).toISOString().split('T')[0], y: p.total}))}}
你的图表就显示出来了。
注意:你的测试数据中billdate不能有空值,否则会遇到错误:This value does not evaluate to type string

5.在Task页面上增加一个按钮“查看图表”,onclick事件:{{navigateTo('Report', {}, 'SAME_WINDOW');}},实现从主页面打开图表页面。

6.在Report页面上增加一个按钮“返回主页面”,实现从图表页面返回到任务管理主页面。onclick事件设置为:{{navigateTo('Tasks', {}, 'SAME_WINDOW');}}

至此,一个粗糙的应用就搭建完成了。

如果此时问一下你自己,低代码开发轻松不?大部分人肯定的回答是:一点都不!,因为改变自己的习惯都是痛苦的。


本文转载自: https://blog.csdn.net/samson_www/article/details/141110666
版权归原作者 samson_www 所有, 如有侵权,请联系我们删除。

“appsmith安装手记:7.第一个Appsmith应用(中)”的评论:

还没有评论