一个基于 ThinkJS 框架的登录功能示例代码:
在路由文件 src/router.js 中添加以下代码:
module.exports = [
// 显示登录页面
{ method: 'get', path: '/login', controller: 'home', action: 'login' },
// 处理登录请求
{ method: 'post', path: '/login', controller: 'home', action: 'doLogin' },
// 显示个人资料页面
{ method: 'get', path: '/profile', controller: 'home', action: 'profile' }
];
在控制器文件 src/controller/home.js 中添加以下代码:
const Base = require('./base.js');
module.exports = class extends Base {
// 显示登录页面
async loginAction() {
return this.display('login');
}
// 处理登录请求
async doLoginAction() {
const { username, password } = this.post();
// 在这里进行用户名和密码的验证
if (username === 'admin' && password === 'password') {
// 登录成功,记录用户信息到 session
this.session('user', { username });
return this.redirect('/profile');
} else {
// 登录失败,返回错误提示
return this.fail('用户名或密码不正确!');
}
}
// 显示个人资料页面
async profileAction() {
// 检查用户是否已登录,如果未登录,则重定向到登录页面
if (!this.session('user')) {
return this.redirect('/login');
} else {
// 显示用户的个人资料页面
const user = this.session('user');
return this.success(`欢迎您,${user.username}!`);
}
}
};
在视图文件 src/view/home/login.html 中添加以下代码:
<h1>登录页面</h1>
<form method="post" action="/login">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="submit">登录</button>
</form>
在控制器文件home.js中,我们定义了三个路由处理程序,分别用于显示登录页面、处理登录请求和显示个人资料页面。在doLoginAction处理程序中,我们进行了用户名和密码的验证,并在验证成功时将用户信息记录到 session 中,表示用户已登录。在profileAction处理程序中,我们检查用户是否已登录,如果已登录,则显示用户的个人资料页面,否则重定向到登录页面。
在视图文件login.html中,我们定义了一个简单的登录表单,它将数据提交到/login路由中,使用 POST 方法。