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

一.登陆页面：

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

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

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