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');}}

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

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