技巧1: 添加登录成功回调 | TLWB云开发平台文档(v4.0.0)

# 技巧1: 添加登录成功回调

如果要更改登录成功后的内容或做后续的操作，可更改登录事件，并添加回调即可。
操作步骤：
(1) 在登录页面login.vue,默认路径为/views/manager/login.vue (2) 更改登录按钮的提交方法,默认的登录提交方法为无参的handleLogin()
(3) 在handleLogin()方法中添加回调函数，例如:handleLogin((user) => {Console.log(user);})

# 技巧2: 更改登录及退出时的跳转页面

系统默认会记录登录页面的路径，退出时会默认回到该页面。
原理为系统将登录页面的路径保存在本地sessionStorage中的loginPath中，退出时从该变量中拿，如果未拿到则跳转到/manager/login路径。假如用户想更改退出时跳转的页面到/manager/xx路径，则代码如下：

sessionStorage.removeItem('loginPath');
sessionStorage.setItem('loginPath', '/manager/xx');

1
2

提示

该代码建议在登录成功后立即设置,结合技巧1可在handleLogin中的回调中设置。

handleLogin((user) => {
    /* 定制退出时的登录界面 */
    sessionStorage.removeItem('loginPath');
    sessionStorage.setItem('loginPath', '/manager/xx');
    /* 返回跳转的页面路径,例如更改为'/home', 默认为'/manager/dashboard' */
    return '/home';
})

1
2
3
4
5
6
7

# 技巧3: 更改登录后台页面地址

后台登录页面地址存放在后台数据库中，有2种方式更改：
(1) 登录后台管理系统，在菜单模板中更改 (2) 直接修改数据，找到type字段值为managerLogin的记录，修改该记录的字段path的值。

# 技巧4: 添加注册功能

系统默认已经有注册功能，主页界面默认在/views/manager/login.vue中。
(1) 打开注册按钮，将/views/manager/login.vue页面中下面代码的注释去掉就可看到有注册按钮

     <el-checkbox v-model="remember" class="remember">记住密码</el-checkbox>
<!-- <el-button type="text" icon="el-icon-s-help" @click="register=true" style=" margin-left: 40px">注册</el-button>-->
<!-- <el-button type="text" icon="el-icon-s-help" @click="dialogUserInfo=true" style=" margin-left: 40px">修改用户信息</el-button>-->
      <el-button type="text" icon="el-icon-s-custom" style="float: right" @click="handelFindPsswordVisible(true)">找回密码</el-button>

1
2
3
4

(2) 如果注册字段不够，则可修改页面中注册代码。

点击查看原始注册代码内容

<x-dialog :visible.sync="register" title="注册"  destroy-on-close append-to-body>
    <x-form ref="register" label-width="80px" inline cols="2" action="add" :buttons="false" :form="()=>$refs.register" :data-source="{head:{},save:{add:{url:'/api/public/register'}}}">
        <template slot-scope="scope">
            <x-form-item prop="uid" label="账号:" :rules='{required:true,type:"string",message:"请输入账号",trigger:"blur"}'>
                <x-input v-model="scope.row.uid" auto-complete="off" placeholder="账号" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item prop="name" label="姓名:" :rules='{required:true,type:"string",message:"请输入姓名",trigger:"blur"}'>
                <x-input v-model="scope.row.name" auto-complete="off" placeholder="姓名" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item prop="pwd" label="密码:" :rules='{required:true,type:"string",message:"请输入密码",trigger:"blur"}'>
                <x-input type="password" v-model="scope.row.pwd" auto-complete="off" placeholder="密码" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item prop="sex" label="性别:" :rules='{required:true,type:"string",message:"请选择性别",trigger:"blur"}'>
                <el-select v-model="scope.row.sex" :disabled="scope.action" placeholder="请选择">
                    <el-option key="男" label="男" value="男"/>
                    <el-option key="女" label="女" value="女"/>
                </el-select>
            </x-form-item>
            <x-form-item label="手机" prop="mobile">
                <x-input v-model="scope.row.mobile" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item label="电话">
                <x-input v-model="scope.row.tel" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item label="qq">
                <x-input v-model="scope.row.qq" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item label="邮箱" :rules='{required:true,type:"string",message:"请输入邮箱",trigger:"blur"}'>
                <x-input v-model="scope.row.email" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item label="住址" cols="2">
                <x-input v-model="scope.row.addr" :disabled="scope.action"/>
            </x-form-item>
        </template>
    </x-form>
    <template slot="footer">
        <el-button type="primary" icon="el-icon-success" @click="handelRegister"> 注册 </el-button>
        <el-button icon="el-icon-error" @click="register=false"> 取 消 </el-button>
    </template>
</x-dialog>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

提示

系统默认注册数据存放在系统的sys_user表中。
修改是只需修改x-form-item的内容即可，其它不动。增加、删除字段系统会自动判断。
注意口令默认做了md5加密。

# 技巧5: 添加修改用户信息功能

使用场景中可能会存在用户注册后需要审核通过后才能登录，当审核不通过的时候，需要用户在未登录情况下修改并提交自己的信息再次审核，此功能系统默认已经提供了。 (1) 打开修改用户信息按钮，将/views/manager/login.vue页面中下面代码的注释去掉就可看到有注册按钮

     <el-checkbox v-model="remember" class="remember">记住密码</el-checkbox>
<!-- <el-button type="text" icon="el-icon-s-help" @click="register=true" style=" margin-left: 40px">注册</el-button>-->
<!-- <el-button type="text" icon="el-icon-s-help" @click="dialogUserInfo=true" style=" margin-left: 40px">修改用户信息</el-button>-->
      <el-button type="text" icon="el-icon-s-custom" style="float: right" @click="handelFindPsswordVisible(true)">找回密码</el-button>

1
2
3
4

(2) 如果原始用户信息不够，则修改原始代码

点击查看原始代码

<x-dialog :visible.sync="dialogUserInfo" title="用户信息" width="600px" append-to-body destroy-on-close :close-on-click-modal="false">
    <el-steps :active="dialogUserInfoStep" align-center>
        <el-step title="步骤 1" description="验证账号密码"/>
        <el-step title="步骤 2" description="修改用户信息"/>
        <el-step title="步骤 3" description="提交审核"/>
    </el-steps>
    <el-form v-if="dialogUserInfoStep==1" label-width="80px">
        <el-form-item prop="uid" label="账号:" style="margin-top: 80px">
            <el-input type="text" v-model="uid" auto-complete="off" placeholder="账号"/>
        </el-form-item>
        <el-form-item type="password" prop="pwd" label="密码:">
            <el-input type="password" v-model="pwd" auto-complete="off" placeholder="密码"/>
        </el-form-item>
    </el-form>
    <x-form v-if="dialogUserInfoStep==2" ref="userInfo" label-width="80px" inline cols="2" @mounted="mountedx" :buttons="false" keyField="aid" :form="()=>$refs.userInfo" :isDataSourceLoad="false" :data-source="{head:{module: 'sys_user'},save:{edit:{url:'/api/user/public/saveUserInfo', filter:[{uid:uid}, {pwd:pwd}]}},webEvn:{afterEditSaveEvn:afterEditSaveEvn}}">
        <template slot-scope="scope">
            <x-form-item prop="uid" label="账号:" :rules='{required:true,type:"string",message:"请输入账号",trigger:"blur"}'>
                <x-input v-model="scope.row.uid" auto-complete="off" placeholder="账号" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item prop="name" label="姓名:" :rules='{required:true,type:"string",message:"请输入姓名",trigger:"blur"}'>
                <x-input v-model="scope.row.name" auto-complete="off" placeholder="姓名" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item prop="sex" label="性别:" :rules='{required:true,type:"string",message:"请选择性别",trigger:"blur"}'>
                <el-select v-model="scope.row.sex" :disabled="scope.action" placeholder="请选择">
                    <el-option key="男" label="男" value="男"/>
                    <el-option key="女" label="女" value="女"/>
                </el-select>
            </x-form-item>
            <x-form-item label="手机" prop="mobile">
                <x-input v-model="scope.row.mobile" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item label="电话">
                <x-input v-model="scope.row.tel" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item label="qq">
                <x-input v-model="scope.row.qq" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item label="邮箱" :rules='{required:true,type:"string",message:"请输入邮箱",trigger:"blur"}'>
                <x-input v-model="scope.row.email" :disabled="scope.action"/>
            </x-form-item>
            <x-form-item label="住址" cols="2">
                <x-input v-model="scope.row.addr" :disabled="scope.action"/>
            </x-form-item>
        </template>
    </x-form>
    <div v-if="dialogUserInfoStep==3" style="margin:auto;margin-top:50px;width:60%;text-align:center">
        <img src="../../assets/success.png" style="width: 80px;"/>
        <h2 style="text-align: center;margin-top: 10px;font-weight: bold;font-size: 20px;">提交成功</h2>
        <div style="margin-top:40px;padding:20px;font-size:15px">
            <p>你的信息正在审核中,请耐心等待审核... </p>
        </div>
    </div>
    <template slot="footer">
        <el-button v-if="dialogUserInfoStep!=3" type="primary" icon="el-icon-success" @click="handelUserInfo"> 下一步 </el-button>
        <el-button icon="el-icon-error" @click="handelUserInfoVisible(false)"> 关 闭 </el-button>
    </template>
</x-dialog>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

提示

系统默认数据存放在系统的sys_user表中。
修改是只需修改x-form-item的内容即可，其它不动。增加、删除字段系统会自动判断。
注意口令默认做了md5加密。

← 清除缓存(sys-clear-cache) API汇总 →